From 0fd850937c66f0f11247dee120cb27324eb95f02 Mon Sep 17 00:00:00 2001
From: Shivam Sharma <meshivam81@gmail.com>
Date: Mon, 14 Aug 2023 18:20:48 +0530
Subject: [PATCH] common refractor

---
 webapp/src/components/EnumSelect.tsx          | 12 +--
 webapp/src/components/ImportButton.tsx        |  4 +-
 webapp/src/components/LabelsSelect.tsx        | 80 +++++++++----------
 .../components/NotificationMethodSelect.tsx   |  4 +-
 webapp/src/components/OptionalFunction.tsx    | 18 ++---
 webapp/src/components/SplitForm.tsx           |  2 +-
 webapp/src/components/Table.tsx               |  2 +-
 webapp/src/components/ViewSelect.tsx          |  4 +-
 webapp/src/domain/schemas/FindUsagesModal.tsx |  4 +-
 webapp/src/domain/schemas/Labels.tsx          | 16 ++--
 10 files changed, 73 insertions(+), 73 deletions(-)

diff --git a/webapp/src/components/EnumSelect.tsx b/webapp/src/components/EnumSelect.tsx
index 412a8a196..73a797246 100644
--- a/webapp/src/components/EnumSelect.tsx
+++ b/webapp/src/components/EnumSelect.tsx
@@ -9,21 +9,21 @@ type EnumSelectProps = {
     isDisabled?: boolean
 }
 
-export default function EnumSelect(props: EnumSelectProps) {
+export default function EnumSelect({options, selected, onSelect, isDisabled}: EnumSelectProps) {
     const [isOpen, setOpen] = useState(false)
     return (
         <Select
             isOpen={isOpen}
             onToggle={setOpen}
             placeholderText="Please select..."
-            selections={props.selected}
+            selections={selected}
             onSelect={(_, value) => {
-                props.onSelect(value as string)
-                setOpen(false)
+            onSelect(value as string)
+            setOpen(false)
             }}
-            isDisabled={props.isDisabled}
+            isDisabled={isDisabled}
         >
-            {Object.entries(props.options).map(([name, title]) => (
+            {Object.entries(options).map(([name, title]) => (
                 <SelectOption key={name} value={name}>
                     {title}
                 </SelectOption>
diff --git a/webapp/src/components/ImportButton.tsx b/webapp/src/components/ImportButton.tsx
index 354d1ac10..8d490c926 100644
--- a/webapp/src/components/ImportButton.tsx
+++ b/webapp/src/components/ImportButton.tsx
@@ -46,7 +46,7 @@ export default function ImportButton({label, onLoad, onImport, onImported}: Impo
                 actions={[
                     <Button
                         key="import"
-                        variant={overridden ? "danger" : "primary"}
+                        variant={overridden && "danger" || "primary"}
                         isDisabled={!config || uploading}
                         onClick={() => {
                             setUploading(true)
@@ -103,7 +103,7 @@ export default function ImportButton({label, onLoad, onImport, onImported}: Impo
                         }}
                     />
                 )}
-                {parseError !== undefined ? parseError.toString() : null}
+                {parseError !== undefined && parseError.toString() || null}
                 {overridden ||
                     (checking && (
                         <Bullseye>
diff --git a/webapp/src/components/LabelsSelect.tsx b/webapp/src/components/LabelsSelect.tsx
index e486d54be..7d1820aa8 100644
--- a/webapp/src/components/LabelsSelect.tsx
+++ b/webapp/src/components/LabelsSelect.tsx
@@ -56,10 +56,10 @@ type LabelsSelectProps = {
     style?: CSSProperties
 }
 
-export default function LabelsSelect(props: LabelsSelectProps) {
+export default function LabelsSelect({disabled, selection, onSelect, source, emptyPlaceholder, optionForAll, forceSplit, fireOnPartial, showKeyHelper, addResetButton, style}: LabelsSelectProps) {
     const [availableLabels, setAvailableLabels] = useState<any[]>([])
-    const initialSelect = props.selection
-        ? Object.entries(props.selection).reduce((acc, [key, value]) => {
+    const initialSelect = selection
+        ? Object.entries(selection).reduce((acc, [key, value]) => {
               if (key !== "toString") {
                   acc[key] = convertPartial(value)
               }
@@ -71,22 +71,22 @@ export default function LabelsSelect(props: LabelsSelectProps) {
     const dispatch = useDispatch()
     const teams = useSelector(teamsSelector)
     useEffect(() => {
-        props.source().then((response: any[]) => {
+        source().then((response: any[]) => {
             setAvailableLabels(response)
-            if (!props.optionForAll && response && response.length === 1) {
-                props.onSelect({ ...response[0], toString: () => convertLabels(response[0]) })
+            if (!optionForAll && response && response.length === 1) {
+                onSelect({ ...response[0], toString: () => convertLabels(response[0]) })
             }
         }, noop)
-    }, [props.source, props.onSelect, dispatch, teams, props.optionForAll])
+    }, [source, onSelect, dispatch, teams, optionForAll])
     const all: SelectOptionObject = useMemo(
         () => ({
-            toString: () => props.optionForAll || "",
+            toString: () => optionForAll || "",
         }),
-        [props.optionForAll]
+        [optionForAll]
     )
     const options = useMemo(() => {
         const opts = []
-        if (props.optionForAll) {
+        if (optionForAll) {
             opts.push(all)
         }
         availableLabels.map(t => ({ ...t, toString: () => convertLabels(t) })).forEach(o => opts.push(o))
@@ -115,25 +115,25 @@ export default function LabelsSelect(props: LabelsSelectProps) {
     }
     const filteredOptions = useMemo(() => getFilteredOptions(partialSelect), [availableLabels, partialSelect])
     useEffect(() => {
-        if (!props.fireOnPartial && filteredOptions.length === 1) {
+        if (!fireOnPartial && filteredOptions.length === 1) {
             const str = convertLabels(filteredOptions[0])
-            props.onSelect({ ...filteredOptions[0], toString: () => str })
+            onSelect({ ...filteredOptions[0], toString: () => str })
         }
     }, [filteredOptions])
 
     const empty = !options || options.length === 0
     if (empty) {
-        return props.emptyPlaceholder || null
-    } else if (!props.forceSplit && availableLabels.length < 16) {
+        return emptyPlaceholder || null
+    } else if (!forceSplit && availableLabels.length < 16) {
         return (
             <InnerSelect
-                disabled={props.disabled || empty}
+                disabled={disabled || empty}
                 all={all}
-                selection={props.selection === null ? all : props.selection}
+                selection={selection === null && all || selection}
                 options={options}
-                onSelect={props.onSelect}
+                onSelect={onSelect}
                 placeholderText="Choose labels..."
-                style={props.style}
+                style={style}
             />
         )
     } else {
@@ -153,12 +153,12 @@ export default function LabelsSelect(props: LabelsSelectProps) {
                 .sort()
             return (
                 <SplitItem key={key}>
-                    {props.showKeyHelper && <HelperText>{key}:</HelperText>}
+                    {showKeyHelper && <HelperText>{key}:</HelperText>}
                     <InnerSelect
-                        disabled={!!props.disabled}
+                        disabled={!!disabled}
                         isTypeahead
                         hasOnlyOneOption={opts.length === 1 && partialSelect[key] === undefined}
-                        selection={opts.length === 1 ? opts[0] : partialSelect[key]}
+                        selection={opts.length === 1 && opts[0] || partialSelect[key]}
                         options={opts}
                         onSelect={value => {
                             const partial = { ...partialSelect }
@@ -168,12 +168,12 @@ export default function LabelsSelect(props: LabelsSelectProps) {
                                 delete partial[key]
                             }
                             setPartialSelect(partial)
-                            if (props.fireOnPartial) {
+                            if (fireOnPartial) {
                                 const fo = getFilteredOptions(partial)
                                 if (fo.length === 1) {
-                                    props.onSelect(fo[0])
+                                    onSelect(fo[0])
                                  } 
-                                    props.onSelect(partial)
+                                    onSelect(partial)
                                 
                              }
                         }}
@@ -187,13 +187,13 @@ export default function LabelsSelect(props: LabelsSelectProps) {
                 </SplitItem>
             )
         })
-        if (props.addResetButton) {
+        if (addResetButton) {
             items.push(
                 <SplitItem style={{ alignSelf: "end" }} key="__reset_button">
                     <Button
                         onClick={() => {
-                            setPartialSelect({})
-                            props.onSelect({})
+                        setPartialSelect({})
+                        onSelect({})
                         }}
                     >
                         Reset
@@ -201,7 +201,7 @@ export default function LabelsSelect(props: LabelsSelectProps) {
                 </SplitItem>
             )
         }
-        return <Split style={props.style}>{items}</Split>
+        return <Split style={style}>{items}</Split>
     }
 }
 
@@ -218,31 +218,31 @@ type InnerSelectProps = {
     style?: CSSProperties
 }
 
-function InnerSelect(props: InnerSelectProps) {
+function InnerSelect({disabled, isTypeahead, hasOnlyOneOption, selection, options, all, onSelect, onOpen, placeholderText, style}: InnerSelectProps) {
     const [open, setOpen] = useState(false)
     return (
         <Select
-            isDisabled={props.disabled || props.hasOnlyOneOption}
-            variant={props.isTypeahead ? "typeahead" : "single"}
+            isDisabled={disabled || hasOnlyOneOption}
+            variant={isTypeahead ? "typeahead" : "single"}
             isOpen={open}
             onToggle={expanded => {
-                if (expanded && props.onOpen) {
-                    props.onOpen()
+                if (expanded && onOpen) {
+                    onOpen()
                 }
                 setOpen(expanded)
             }}
-            selections={[props.selection === null ? props.all : props.selection]}
+            selections={[selection === null && all || selection]}
             onSelect={(_, item) => {
-                props.onSelect(item === props.all ? null : item)
+                onSelect(item === all && null || item)
                 setOpen(false)
             }}
-            onClear={props.hasOnlyOneOption ? undefined : () => props.onSelect(undefined)}
+            onClear={hasOnlyOneOption ? undefined : () => onSelect(undefined)}
             menuAppendTo="parent"
-            placeholderText={props.placeholderText}
-            style={props.style}
-            width={props.style?.width || "auto"}
+            placeholderText={placeholderText}
+            style={style}
+            width={style?.width || "auto"}
         >
-            {props.options.map((labels: SelectOptionObject | string, i: number) => (
+            {options.map((labels: SelectOptionObject | string, i: number) => (
                 <SelectOption key={i} value={labels} />
             ))}
         </Select>
diff --git a/webapp/src/components/NotificationMethodSelect.tsx b/webapp/src/components/NotificationMethodSelect.tsx
index e6badfdb0..070ba07f3 100644
--- a/webapp/src/components/NotificationMethodSelect.tsx
+++ b/webapp/src/components/NotificationMethodSelect.tsx
@@ -27,8 +27,8 @@ export default function NotificationMethodSelect({isDisabled, method, onChange}:
             }}
             placeholderText="Please select..."
         >
-            {methods.map((m, i) => (
-                <SelectOption key={i} value={m} />
+            {methods.map((method, i) => (
+                <SelectOption key={i} value={method} />
             ))}
         </Select>
     )
diff --git a/webapp/src/components/OptionalFunction.tsx b/webapp/src/components/OptionalFunction.tsx
index 8e076cb11..f15893e7a 100644
--- a/webapp/src/components/OptionalFunction.tsx
+++ b/webapp/src/components/OptionalFunction.tsx
@@ -11,40 +11,40 @@ type OptionalFunctionProps = {
     defaultFunc: string
 }
 
-export default function OptionalFunction(props: OptionalFunctionProps) {
-    if (props.func === undefined || props.func === null) {
-        if (props.readOnly) {
-            return <>{props.undefinedText} </>
+export default function OptionalFunction({func, onChange, readOnly, undefinedText, addText, defaultFunc}: OptionalFunctionProps) {
+    if (func === undefined || func === null) {
+        if (readOnly) {
+            return <>{undefinedText} </>
         } else {
             return (
                 <Button
                     style={{ padding: 0, marginTop: "6px" }}
                     variant="link"
                     onClick={() => {
-                        props.onChange(props.defaultFunc)
+                    onChange(defaultFunc)
                     }}
                 >
                     <AddCircleOIcon />
                     {"\u00A0"}
-                    {props.addText}
+                    {addText}
                 </Button>
             )
         }
     } else {
         // failsafe if the wrong type gets passed in
-        const funcAsString = typeof props.func === "string" ? props.func : (props.func as any).toString()
+        const funcAsString = typeof func === "string" ? func : (func as any).toString()
         return (
             <div style={{ minHeight: "100px", height: "100px", resize: "vertical", overflow: "auto" }}>
                 <Editor
                     value={funcAsString}
                     onChange={value => {
-                        props.onChange(value?.trim() || "")
+                    onChange(value?.trim() || "")
                     }}
                     language="typescript"
                     options={{
                         wordWrap: "on",
                         wrappingIndent: "DeepIndent",
-                        readOnly: props.readOnly,
+                        readOnly: readOnly,
                     }}
                 />
             </div>
diff --git a/webapp/src/components/SplitForm.tsx b/webapp/src/components/SplitForm.tsx
index 5cf3e4446..920cc972a 100644
--- a/webapp/src/components/SplitForm.tsx
+++ b/webapp/src/components/SplitForm.tsx
@@ -83,7 +83,7 @@ export default function SplitForm<I extends Item>(props: SplitFormProps<I>) {
             const newItems = props.items.filter(t => t.id !== props.selected?.id)
             props.onDelete(item)
             props.onChange(newItems)
-            props.onSelected(newItems.length > 0 ? newItems[0] : undefined)
+            props.onSelected(newItems.length > 0 && newItems[0] || undefined)
         }
     }
     return (
diff --git a/webapp/src/components/Table.tsx b/webapp/src/components/Table.tsx
index ffaf4b314..1d2d65421 100644
--- a/webapp/src/components/Table.tsx
+++ b/webapp/src/components/Table.tsx
@@ -127,7 +127,7 @@ function Table<D extends object>({
                                         <th
                                             className={clsx(
                                                 "pf-c-table__sort",
-                                                columnProps.isSorted ? "pf-m-selected" : ""
+                                                columnProps.isSorted && "pf-m-selected" || ""
                                             )}
                                             {...column.getHeaderProps(columnProps.getSortByToggleProps())}
                                         >
diff --git a/webapp/src/components/ViewSelect.tsx b/webapp/src/components/ViewSelect.tsx
index e7a6d1a50..db8ed4036 100644
--- a/webapp/src/components/ViewSelect.tsx
+++ b/webapp/src/components/ViewSelect.tsx
@@ -18,8 +18,8 @@ export default function ViewSelect({views, viewId, onChange}: ViewSelectProps) {
             onToggle={setOpen}
             selections={selected !== undefined ? { ...selected, toString: () => selected.name } : undefined}
             onSelect={(_, item) => {
-                onChange((item as View).id)
-                setOpen(false)
+            onChange((item as View).id)
+            setOpen(false)
             }}
         >
             {views.map(view => (
diff --git a/webapp/src/domain/schemas/FindUsagesModal.tsx b/webapp/src/domain/schemas/FindUsagesModal.tsx
index 81f053c4a..970b4b2d6 100644
--- a/webapp/src/domain/schemas/FindUsagesModal.tsx
+++ b/webapp/src/domain/schemas/FindUsagesModal.tsx
@@ -142,10 +142,10 @@ export default function FindUsagesModal(props: FindUsagesModalProps) {
                 </Title>
                 {schemas ? (
                     <List>
-                        {schemas.map((s, i) => (
+                        {schemas.map((shema, i) => (
                             <ListItem key={i}>
                                 {/* TODO: looks like this is not navigating anywhere but IDK why */}
-                                <NameUri isLink={true} onNavigate={() => props.onClose()} descriptor={s} />
+                                <NameUri isLink={true} onNavigate={() => props.onClose()} descriptor={shema} />
                             </ListItem>
                         ))}
                     </List>
diff --git a/webapp/src/domain/schemas/Labels.tsx b/webapp/src/domain/schemas/Labels.tsx
index 2657b8296..0be265950 100644
--- a/webapp/src/domain/schemas/Labels.tsx
+++ b/webapp/src/domain/schemas/Labels.tsx
@@ -41,7 +41,7 @@ type LabelsProps = {
     funcsRef: TabFunctionsRef
 }
 
-export default function Labels(props: LabelsProps) {
+export default function Labels({schemaId, schemaUri, funcsRef}: LabelsProps) {
     const [loading, setLoading] = useState(false)
     const [labels, setLabels] = useState<LabelEx[]>([])
     const [selected, setSelected] = useState<LabelEx>()
@@ -53,7 +53,7 @@ export default function Labels(props: LabelsProps) {
     const isTesterForLabel = useTester(selected?.owner || "__no_owner__")
     const defaultTeam = useSelector(defaultTeamSelector)
     const dispatch = useDispatch()
-    props.funcsRef.current = {
+    funcsRef.current = {
         save: () =>
             Promise.all([
                 ...labels
@@ -96,7 +96,7 @@ export default function Labels(props: LabelsProps) {
     const history = useHistory()
     useEffect(() => {
         setLoading(true)
-        Api.schemaServiceLabels(props.schemaId)
+        Api.schemaServiceLabels(schemaId)
             .then(
                 labels => {
                     setLabels(labels)
@@ -118,11 +118,11 @@ export default function Labels(props: LabelsProps) {
                         dispatch,
                         error,
                         "LIST_LABELS",
-                        "Failed to fetch labels for schema " + props.schemaUri
+                        "Failed to fetch labels for schema " + schemaUri
                     ).catch(noop)
             )
             .finally(() => setLoading(false))
-    }, [props.schemaId, resetCounter])
+    }, [schemaId, resetCounter])
 
     return (
         <>
@@ -143,7 +143,7 @@ export default function Labels(props: LabelsProps) {
                     extractors: [],
                     owner: defaultTeam || "",
                     access: 0 as Access,
-                    schemaId: props.schemaId,
+                    schemaId: schemaId,
                     filtering: true,
                     metrics: true,
                     modified: true,
@@ -217,7 +217,7 @@ export default function Labels(props: LabelsProps) {
                             {selected.extractors.map((extractor, i) => {
                                 return (
                                     <JsonExtractor
-                                        schemaUri={props.schemaUri}
+                                        schemaUri={schemaUri}
                                         key={i}
                                         jsonpathTarget="dataset"
                                         extractor={extractor}
@@ -250,7 +250,7 @@ export default function Labels(props: LabelsProps) {
                                         Test label calculation
                                     </Button>
                                     <TestLabelModal
-                                        uri={props.schemaUri}
+                                        uri={schemaUri}
                                         label={selected}
                                         isOpen={testLabelModalOpen}
                                         onClose={() => setTestLabelModalOpen(false)}