chore(odd-platform-ui): fix comments (#1590)

opendatadiscovery · Feb 13, 2024 · 9c34338 · 9c34338
1 parent a4e1b7c
commit 9c34338
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 34 deletions.
diff --git a/odd-platform-ui/src/components/DataQuality/DataQualityFilters/DataQualityFilters.tsx b/odd-platform-ui/src/components/DataQuality/DataQualityFilters/DataQualityFilters.tsx
@@ -45,11 +45,11 @@ export const DataQualityFilters: FC = () => {
   // sync searchParams with formFilters on formFilters change
   useEffect(() => {
     const newSearchParams = new URLSearchParams();
-    for (const [key, value] of Object.entries(formFilters)) {
+    Object.entries(formFilters).forEach(([key, value]) => {
       if (Array.isArray(value) && value.length > 0) {
         newSearchParams.set(key, JSON.stringify(value));
       }
-    }
+    });
     setSearchParams(newSearchParams, { replace: true });
   }, [formFilters, setSearchParams]);
 

diff --git a/...Item/MultipleFilterItem/MultipleFilterItemAutocomplete/MultipleFilterItemAutocomplete.tsx b/...Item/MultipleFilterItem/MultipleFilterItemAutocomplete/MultipleFilterItemAutocomplete.tsx
@@ -73,15 +73,14 @@ const MultipleFilterItemAutocomplete: FC<Props> = ({
   }, []);
 
   const getFilterOptions = useCallback(
-    (_: any, params: FilterOptionsState<Option>) => {
+    (_: unknown, params: FilterOptionsState<Option>) => {
       const optionsWithoutSelected = options.filter(
         option =>
           !selectedOptions.some(selectedOption => selectedOption.name === option.name)
       );
       const optionsFiltered = searchText
-        ? optionsWithoutSelected.filter(
-            option =>
-              option.name.toLocaleLowerCase().indexOf(searchText.toLocaleLowerCase()) >= 0
+        ? optionsWithoutSelected.filter(option =>
+            option.name.toLowerCase().includes(searchText.toLowerCase())
           )
         : optionsWithoutSelected;
       return filter(optionsFiltered, params);

diff --git a/...ualityFilters/FilterItem/MultipleFilterItem/SelectedFilterOption/SelectedFilterOption.tsx b/...ualityFilters/FilterItem/MultipleFilterItem/SelectedFilterOption/SelectedFilterOption.tsx
@@ -14,7 +14,7 @@ const SelectedFilterOption: React.FC<FilterItemProps> = ({
   selectedOption,
   onDeselectOption,
 }) => (
-  <S.Container sx={{ mt: 0.5, mx: 0.25 }}>
+  <S.Container>
     <Typography noWrap>{selectedOption.name}</Typography>
     <Button
       sx={{ ml: 0.5 }}

diff --git a/...yFilters/FilterItem/MultipleFilterItem/SelectedFilterOption/SelectedFilterOptionStyles.ts b/...yFilters/FilterItem/MultipleFilterItem/SelectedFilterOption/SelectedFilterOptionStyles.ts
@@ -1,14 +1,19 @@
-import { Grid } from '@mui/material';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
-export const Container = styled(Grid)(({ theme }) => ({
-  display: 'flex',
-  backgroundColor: theme.palette.backgrounds.primary,
-  borderRadius: '2px',
-  padding: theme.spacing(0, 0.5, 0, 0.5),
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  '&:hover': {
-    backgroundColor: theme.palette.backgrounds.secondary,
-  },
-}));
+export const Container = styled('div')(
+  ({ theme }) => css`
+    display: flex;
+    background-color: ${theme.palette.backgrounds.primary};
+    border-radius: 2px;
+    padding: ${theme.spacing(0)} ${theme.spacing(0.5)} ${theme.spacing(0)}
+      ${theme.spacing(0.5)};
+    align-items: center;
+    justify-content: space-between;
+    &:hover {
+      background-color: ${theme.palette.backgrounds.secondary};
+    }
+    margin-top: ${theme.spacing(0.5)};
+    margin-right: ${theme.spacing(0.25)};
+    margin-left: ${theme.spacing(0.25)};
+  `
+);
diff --git a/odd-platform-ui/src/components/DataQuality/DataQualityStore/DataQualityStore.ts b/odd-platform-ui/src/components/DataQuality/DataQualityStore/DataQualityStore.ts
@@ -6,6 +6,8 @@ type FormFiltersAtom = {
   [Property in keyof DataQualityRunsApiGetDataQualityTestsRunsRequest]-?: Array<FilterOption>;
 };
 
+type FormFiltersKeys = keyof FormFiltersAtom;
+
 export const formFiltersAtom = atom<FormFiltersAtom>({
   namespaceIds: [],
   datasourceIds: [],
@@ -19,9 +21,7 @@ export const formFiltersAtom = atom<FormFiltersAtom>({
   deTagIds: [],
 });
 
-export const getFieldFilterAtom = (
-  key: keyof DataQualityRunsApiGetDataQualityTestsRunsRequest
-) =>
+export const getFieldFilterAtom = (key: FormFiltersKeys) =>
   atom<FilterOption[], [value: FilterOption[]], void>(
     get => get(formFiltersAtom)[key],
     (get, set, value) => {
@@ -31,17 +31,10 @@ export const getFieldFilterAtom = (
 
 export const filtersAtom = atom(get => {
   const formFilters = get(formFiltersAtom);
-  const filters: DataQualityRunsApiGetDataQualityTestsRunsRequest = Object.keys(
-    formFilters
-  ).reduce((acc, key) => {
-    if (
-      formFilters[key as keyof DataQualityRunsApiGetDataQualityTestsRunsRequest]
-        .length === 0
-    )
-      return acc;
-    acc[key as keyof DataQualityRunsApiGetDataQualityTestsRunsRequest] = formFilters[
-      key as keyof DataQualityRunsApiGetDataQualityTestsRunsRequest
-    ].map(({ id }) => id);
+  const filters = Object.keys(formFilters).reduce((acc, key) => {
+    const tKey = key as FormFiltersKeys;
+    if (formFilters[tKey].length === 0) return acc;
+    acc[tKey] = formFilters[tKey].map(({ id }) => id);
     return acc;
   }, {} as DataQualityRunsApiGetDataQualityTestsRunsRequest);