GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-01 04:11:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: moved apply license form to antd form (#2746)

Browse Source 
* feat: moved apply license form to antd form

Signed-off-by: GermaVinsmoke <vaibhav1180@gmail.com>

* chore: added lib fn for require error msg

Signed-off-by: GermaVinsmoke <vaibhav1180@gmail.com>

---------

Signed-off-by: GermaVinsmoke <vaibhav1180@gmail.com>
This commit is contained in:
GermaVinsmoke 2023-05-23 23:14:02 +05:30 committed by GitHub
parent b034c60897
commit fda0441686
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 32 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
frontend/src/container/Licenses/ApplyLicenseForm.tsx
View File

@ -9,22 +9,27 @@ import { AppState } from 'store/reducers';
import { ErrorResponse, SuccessResponse } from 'types/api'; import { ErrorResponse, SuccessResponse } from 'types/api';
import { PayloadProps } from 'types/api/licenses/getAll'; import { PayloadProps } from 'types/api/licenses/getAll';
import AppReducer from 'types/reducer/app'; import AppReducer from 'types/reducer/app';
import { requireErrorMessage } from 'utils/form/requireErrorMessage';
import { ApplyForm, ApplyFormContainer, LicenseInput } from './styles'; import {
ApplyForm,
const FormItem = Form.Item; ApplyFormContainer,
KeyPreview,
LicenseInput,
} from './styles';
function ApplyLicenseForm({ function ApplyLicenseForm({
licenseRefetch, licenseRefetch,
}: ApplyLicenseFormProps): JSX.Element { }: ApplyLicenseFormProps): JSX.Element {
const { t } = useTranslation(['licenses']); const { t } = useTranslation(['licenses']);
const [key, setKey] = useState('');
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [form] = Form.useForm<FormValues>();
const { featureResponse } = useSelector<AppState, AppReducer>( const { featureResponse } = useSelector<AppState, AppReducer>(
(state) => state.app, (state) => state.app,
); );
const { notifications } = useNotifications(); const { notifications } = useNotifications();
const key = Form.useWatch('key', form);
const onFinish = async (values: unknown | { key: string }): Promise<void> => { const onFinish = async (values: unknown | { key: string }): Promise<void> => {
const params = values as { key: string }; const params = values as { key: string };
@ -66,16 +71,19 @@ function ApplyLicenseForm({
return ( return (
<ApplyFormContainer> <ApplyFormContainer>
<ApplyForm layout="inline" onFinish={onFinish}> <ApplyForm
<LicenseInput labelAlign="left" name="key"> form={form}
<Input layout="inline"
onChange={(e): void => { onFinish={onFinish}
setKey(e.target.value as string); autoComplete="off"
}} >
placeholder={t('placeholder_license_key')} <LicenseInput
/> name="key"
rules={[{ required: true, message: requireErrorMessage('License Key') }]}
>
<Input placeholder={t('placeholder_license_key')} />
</LicenseInput> </LicenseInput>
<FormItem> <Form.Item>
<Button <Button
loading={loading} loading={loading}
disabled={loading} disabled={loading}
@ -84,9 +92,9 @@ function ApplyLicenseForm({
> >
{t('button_apply')} {t('button_apply')}
</Button> </Button>
</FormItem> </Form.Item>
</ApplyForm> </ApplyForm>
{key && <div style={{ paddingLeft: '0.5em', color: '#666' }}> {key}</div>} {key && <KeyPreview>{key}</KeyPreview>}
</ApplyFormContainer> </ApplyFormContainer>
); );
} }
@ -99,4 +107,8 @@ interface ApplyLicenseFormProps {
>; >;
} }
interface FormValues {
key: string;
}
export default ApplyLicenseForm; export default ApplyLicenseForm;

5
frontend/src/container/Licenses/styles.ts
View File

@ -23,3 +23,8 @@ export const LicenseInput = styled(Form.Item)`
} }
} }
`; `;
export const KeyPreview = styled.div`
padding-left: 0.5em;
color: #666;
`;