NTP-33446 | Radio Button Support added in filter drawer (#1371)

* NTP-33446 | Radio Button Support added in filter drawer

* NTP-33446 | Radio Button Support added in filter drawer

src/components/FilterDrawer/NormalOptions.tsx

@@ -0,0 +1,59 @@
+import { RadioGroup } from '@navi/web-ui/lib/components';
+import { RadioOptions } from '@navi/web-ui/lib/components/RadioGroup/types';
+import { Checkbox } from '@navi/web-ui/lib/primitives';
+import { ChangeEvent } from 'react';
+import { isOptionChecked } from './utils';
+import styles from './index.module.scss';
+import cx from 'classnames';
+import { INormalOptionValues } from './types';
+
+const NormalOptions = (props: INormalOptionValues) => {
+  const {
+    filterSchema,
+    selectedFilter,
+    selectedOptions,
+    setSelectedOptions,
+    handleCheckboxChange,
+    filteredOptionsData
+  } = props;
+  const { isSearchEnabled, multiSelect = true } = filterSchema?.[selectedFilter] || {};
+
+  return (
+    <div
+      className={cx(
+        styles.filteredOptions,
+        { [styles.noSearch]: !isSearchEnabled },
+        { [styles.singleSelect]: !multiSelect }
+      )}
+    >
+      {multiSelect ? (
+        filteredOptionsData?.map(option => (
+          <div className={styles.option} key={option?.label}>
+            <Checkbox
+              onChange={e => handleCheckboxChange(e, option)}
+              title={option?.label as string}
+              defaultChecked={isOptionChecked(
+                option?.value as string,
+                selectedOptions,
+                selectedFilter
+              )}
+            />
+          </div>
+        ))
+      ) : (
+        <RadioGroup
+          direction="column"
+          onChange={(e: ChangeEvent<HTMLInputElement>) =>
+            setSelectedOptions({ ...selectedOptions, [selectedFilter]: [e.target.value] })
+          }
+          className="gap-[20px]"
+          value={selectedOptions[selectedFilter]?.[0]}
+          name={selectedFilter}
+          options={filteredOptionsData as RadioOptions[]}
+        />
+      )}
+    </div>
+  );
+};
+
+export default NormalOptions;

src/components/FilterDrawer/RightPanel.tsx

@@ -1,13 +1,13 @@
-import { handleOptionChange, isOptionChecked } from './utils';
+import { handleOptionChange } from './utils';
 import { Search } from '@cp/src/utils/search';
 import { SearchIcon } from '@navi/web-ui/lib/icons';
-import { BorderedInput, Checkbox, Typography } from '@navi/web-ui/lib/primitives';
+import { BorderedInput, Typography } from '@navi/web-ui/lib/primitives';
 import { ChangeEvent, useEffect, useRef, useState } from 'react';
 import styles from './index.module.scss';
-import cx from 'classnames';
 import { addClickstreamEvent } from '@cp/src/service/clickStreamEventService';
 import { IOption, IRightPanel } from './types';
 import SectionedOptions from './SectionedOptions';
+import NormalOptions from './NormalOptions';
 
 const RightPanel = (props: IRightPanel) => {
   const { filterSchema, selectedFilter, selectedOptions, setSelectedOptions, tableName } = props;
@@ -87,21 +87,14 @@ const RightPanel = (props: IRightPanel) => {
           isSearchEnabled={isSearchEnabled}
         />
       ) : (
-        <div className={cx(styles.filteredOptions, { [styles.noSearch]: !isSearchEnabled })}>
-          {filteredOptionsData?.map(option => (
-            <div className={styles.option} key={option.label}>
-              <Checkbox
-                onChange={e => handleCheckboxChange(e, option)}
-                title={option.label as string}
-                defaultChecked={isOptionChecked(
-                  option?.value as string,
-                  selectedOptions,
-                  selectedFilter
-                )}
-              />
-            </div>
-          ))}
-        </div>
+        <NormalOptions
+          filteredOptionsData={filteredOptionsData}
+          filterSchema={filterSchema}
+          selectedOptions={selectedOptions}
+          selectedFilter={selectedFilter}
+          handleCheckboxChange={handleCheckboxChange}
+          setSelectedOptions={setSelectedOptions}
+        />
       )}
     </div>
   );

src/components/FilterDrawer/index.module.scss

@@ -66,6 +66,11 @@
           padding-top: 16px;
         }
 
+        .singleSelect {
+          padding: 0 12px;
+          padding-top: 8px;
+        }
+
         .inputContainer {
           width: 100%;
           margin: 0;

src/components/FilterDrawer/types.ts

@@ -88,3 +88,12 @@ export interface ISectionedOptionValues {
   setSelectedOptions: (selectedOptions: ISelectedOptions) => void;
   isSearchEnabled: boolean;
 }
+
+export interface INormalOptionValues {
+  filteredOptionsData: IOption[];
+  filterSchema: Record<string, IFilterDrawerSchema>;
+  selectedOptions: ISelectedOptions;
+  selectedFilter: string;
+  handleCheckboxChange: (e: ChangeEvent<HTMLInputElement>, option: IOption) => void;
+  setSelectedOptions: (selectedOptions: ISelectedOptions) => void;
+}

src/utils/QueryParamsHelper.ts

@@ -112,7 +112,7 @@ export const getTableQueryParams = (
     return;
   }
   Object.keys(filterSchema).forEach(key => {
-    if (filterSchema[key] && filterSchema[key]?.multiSelect) {
+    if (filterSchema[key]) {
       tableQueryParams[key] = tableQueryParams[key]?.split(',') || [];
     }
     if (checkForNestedFilters) {