ADG-9783 add client id and dns record type to check form

client/src/__locales/en.json

@@ -620,6 +620,10 @@
     "check_cname": "CNAME: {{cname}}",
     "check_reason": "Reason: {{reason}}",
     "check_service": "Service name: {{service}}",
+    "check_hostname": "Hostname or domain name",
+    "check_client_id": "Client identifier (ClientID or IP address)",
+    "check_enter_client_id": "Enter client identifier",
+    "check_dns_record": "Select DNS record type",
     "service_name": "Service name",
     "check_not_found": "Not found in your filter lists",
     "client_confirm_block": "Are you sure you want to block the client \"{{ip}}\"?",

client/src/components/Filters/Check/index.tsx

@@ -9,13 +9,17 @@ import Info from './Info';
 import { RootState } from '../../../initialState';
 import { validateRequiredValue } from '../../../helpers/validators';
 import { Input } from '../../ui/Controls/Input';
+import { DNS_RECORD_TYPES } from '../../../helpers/constants';
+import { Select } from '../../ui/Controls/Select';
 
-interface FormValues {
+export type FilteringCheckFormValues = {
     name: string;
+    client_id?: string;
+    dns_record_type?: string;
 }
 
 type Props = {
-    onSubmit?: (data: FormValues) => void;
+    onSubmit?: (data: FilteringCheckFormValues) => void;
 };
 
 const Check = ({ onSubmit }: Props) => {
@@ -27,11 +31,13 @@ const Check = ({ onSubmit }: Props) => {
     const {
         control,
         handleSubmit,
-        formState: { isDirty, isValid },
+        formState: { isValid },
-    } = useForm<FormValues>({
+    } = useForm<FilteringCheckFormValues>({
         mode: 'onBlur',
         defaultValues: {
             name: '',
+            client_id: '',
+            dns_record_type: DNS_RECORD_TYPES[0],
         },
     });
 
@@ -48,24 +54,56 @@ const Check = ({ onSubmit }: Props) => {
                                 <Input
                                     {...field}
                                     type="text"
+                                    label={t('check_hostname')}
                                     data-testid="check_domain_name"
-                                    placeholder={t('form_enter_host')}
+                                    placeholder="example.com"
                                     error={fieldState.error?.message}
-                                    rightAddon={
-                                        <span className="input-group-append">
-                                            <button
-                                                className="btn btn-success btn-standard btn-large"
-                                                type="submit"
-                                                data-testid="check_domain_submit"
-                                                disabled={!isDirty || !isValid || processingCheck}>
-                                                {t('check')}
-                                            </button>
-                                        </span>
-                                    }
                                 />
                             )}
                         />
 
+                        <Controller
+                            name="client_id"
+                            control={control}
+                            render={({ field, fieldState }) => (
+                                <Input
+                                    {...field}
+                                    type="text"
+                                    data-testid="check_client_id"
+                                    label={t('check_client_id')}
+                                    placeholder={t('check_enter_client_id')}
+                                    error={fieldState.error?.message}
+                                />
+                            )}
+                        />
+
+                        <Controller
+                            name="dns_record_type"
+                            control={control}
+                            render={({ field }) => (
+                                <Select
+                                    {...field}
+                                    label={t('check_dns_record')}
+                                    data-testid="check_dns_record_type"
+                                >
+                                    {DNS_RECORD_TYPES.map((type) => (
+                                        <option key={type} value={type}>
+                                            {type}
+                                        </option>
+                                    ))}
+                                </Select>
+                            )}
+                        />
+
+                        <button
+                            className="btn btn-success btn-standard btn-large"
+                            type="submit"
+                            data-testid="check_domain_submit"
+                            disabled={!isValid || processingCheck}
+                        >
+                            {t('check')}
+                        </button>
+
                         {hostname && (
                             <>
                                 <hr />

client/src/components/Filters/CustomRules.tsx

@@ -7,7 +7,7 @@ import PageTitle from '../ui/PageTitle';
 
 import Examples from './Examples';
 
-import Check from './Check';
+import Check, { FilteringCheckFormValues } from './Check';
 
 import { getTextareaCommentsHighlight, syncScroll } from '../../helpers/highlightTextareaComments';
 import { COMMENT_LINE_DEFAULT_TOKEN } from '../../helpers/constants';
@@ -48,8 +48,12 @@ class CustomRules extends Component<CustomRulesProps> {
         this.props.setRules(this.props.filtering.userRules);
     };
 
-    handleCheck = (values: any) => {
+    handleCheck = (values: FilteringCheckFormValues) => {
-        this.props.checkHost(values);
+        const filteredValues = Object.fromEntries(
+            Object.entries(values).filter(([_, value]) => value !== undefined && value !== '')
+        );
+
+        this.props.checkHost(filteredValues);
     };
 
     onScroll = (e: any) => syncScroll(e, this.ref);

client/src/helpers/constants.ts

@@ -523,3 +523,12 @@ export const TIME_UNITS = {
     HOURS: 'hours',
     DAYS: 'days',
 };
+
+export const DNS_RECORD_TYPES = [
+    "A", "AAAA", "AFSDB", "APL", "CAA", "CDNSKEY", "CDS", "CERT", "CNAME",
+    "CSYNC", "DHCID", "DLV", "DNAME", "DNSKEY", "DS", "EUI48", "EUI64",
+    "HINFO", "HIP", "HTTPS", "IPSECKEY", "KEY", "KX", "LOC", "MX", "NAPTR",
+    "NS", "NSEC", "NSEC3", "NSEC3PARAM", "OPENPGPKEY", "PTR", "RP", "RRSIG",
+    "SIG", "SMIMEA", "SOA", "SRV", "SSHFP", "SVCB", "TA", "TKEY",
+    "TLSA", "TSIG", "TXT", "URI", "ZONEMD"
+];