Replace Input.Group with Space.Compact

Signed-off-by: Dinika Saxena <dinikasaxenas@gmail.com>
BlueBrain · Oct 4, 2023 · f633a81 · f633a81
1 parent 7824526
commit f633a81
Show file tree

Hide file tree

Showing 3 changed files with 182 additions and 179 deletions.
diff --git a/src/shared/components/ImagePreview/ImagePreview.tsx b/src/shared/components/ImagePreview/ImagePreview.tsx
@@ -268,16 +268,15 @@ const ImagePreview: React.FC<Props> = ({
             label: 'Image Preview',
             children: (
               <>
-          <div className="preview-menu">
-            <Search
-              placeholder="Seach by name"
-              onChange={onSearchChange}
-              allowClear
-            />
-            <Dropdown
-              dropdownRender={() => sortOptions}
-              trigger={['hover', 'click']}
-
+                <div className="preview-menu">
+                  <Search
+                    placeholder="Seach by name"
+                    onChange={onSearchChange}
+                    allowClear
+                  />
+                  <Dropdown
+                    dropdownRender={() => sortOptions}
+                    trigger={['hover', 'click']}
                   >
                     <Tooltip title="Sort resources">
                       <Button

diff --git a/src/shared/components/SearchBar/index.tsx b/src/shared/components/SearchBar/index.tsx
@@ -37,102 +37,102 @@ const SearchBar: React.FC<{
   onBlur,
   inputOnPressEnter,
 }) => {
-    const [value, setValue] = React.useState(query || '');
-    const [focused, setFocused] = React.useState(false);
-    const inputRef = React.useRef(null);
-    const projectOptionValueSuffix = '______project';
-    const studioOptionValueSuffix = '______studio';
+  const [value, setValue] = React.useState(query || '');
+  const [focused, setFocused] = React.useState(false);
+  const inputRef = React.useRef(null);
+  const projectOptionValueSuffix = '______project';
+  const studioOptionValueSuffix = '______studio';
 
-    React.useEffect(() => {
-      focusOnSlash(focused, inputRef);
-    }, []);
+  React.useEffect(() => {
+    focusOnSlash(focused, inputRef);
+  }, []);
 
-    // Reset default value if query changes
-    React.useEffect(() => {
-      setValue(query || '');
-    }, [query]);
+  // Reset default value if query changes
+  React.useEffect(() => {
+    setValue(query || '');
+  }, [query]);
 
-    const handleSetFocused = (value: boolean) => () => {
-      setFocused(value);
-      if (value) {
-        onFocus();
-      } else {
-        onBlur();
-      }
-    };
+  const handleSetFocused = (value: boolean) => () => {
+    setFocused(value);
+    if (value) {
+      onFocus();
+    } else {
+      onBlur();
+    }
+  };
 
-    const handleSelect = (currentValue: string, option: any) => {
-      onSubmit(currentValue, option);
-      // @ts-ignore
-      inputRef.current?.blur();
-    };
+  const handleSelect = (currentValue: string, option: any) => {
+    onSubmit(currentValue, option);
+    // @ts-ignore
+    inputRef.current?.blur();
+  };
 
-    const handleSearch = (searchText: string) => {
-      onSearch(searchText);
-    };
+  const handleSearch = (searchText: string) => {
+    onSearch(searchText);
+  };
 
-    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
-      if (e.key !== 'Enter') {
-        return;
-      }
-    };
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.key !== 'Enter') {
+      return;
+    }
+  };
 
-    const optionsList = React.useMemo(() => {
-      let options: {
-        value: string;
-        key: string;
-        path: string;
-        type: 'search' | 'project' | 'studio';
-        label: JSX.Element;
-      }[] = [];
-      if (
-        (!query || query === '') &&
-        lastVisited &&
-        lastVisited.type === 'search'
-      ) {
-        options.push({
-          value: lastVisited.value,
-          key: 'search',
-          path: lastVisited.path,
-          type: 'search',
-          label: globalSearchOption(lastVisited.value),
-        });
-      } else {
-        options.push({
-          value,
-          key: 'search',
-          path: `/search/?query=${value}`,
-          type: 'search',
-          label: globalSearchOption(value),
-        });
-      }
+  const optionsList = React.useMemo(() => {
+    let options: {
+      value: string;
+      key: string;
+      path: string;
+      type: 'search' | 'project' | 'studio';
+      label: JSX.Element;
+    }[] = [];
+    if (
+      (!query || query === '') &&
+      lastVisited &&
+      lastVisited.type === 'search'
+    ) {
+      options.push({
+        value: lastVisited.value,
+        key: 'search',
+        path: lastVisited.path,
+        type: 'search',
+        label: globalSearchOption(lastVisited.value),
+      });
+    } else {
+      options.push({
+        value,
+        key: 'search',
+        path: `/search/?query=${value}`,
+        type: 'search',
+        label: globalSearchOption(value),
+      });
+    }
 
-      if (projectList.length) {
-        const projectOptions = projectList.map((projectHit, ix) => {
-          return {
-            key: `project-${projectHit.label}${ix}`,
-            path: makeProjectUri(projectHit.organisation, projectHit.project),
-            type: 'project' as 'project',
-            label: (
-              <Hit
-                key={projectHit.label}
-                orgLabel={projectHit.organisation}
-                projectLabel={projectHit.project}
-                type="project"
-              >
-                <span>
-                  {projectHit.label.length > LABEL_MAX_LENGTH
-                    ? `${projectHit.label.slice(0, LABEL_MAX_LENGTH)}...`
-                    : projectHit.label}
-                </span>
-              </Hit>
-            ),
-            // add suffix to value to differentiate from search term
-            value: `${projectHit.organisation}/${projectHit.project}${projectOptionValueSuffix}`,
-          };
-        });
-        options = [...options, ...projectOptions];
-      }
+    if (projectList.length) {
+      const projectOptions = projectList.map((projectHit, ix) => {
+        return {
+          key: `project-${projectHit.label}${ix}`,
+          path: makeProjectUri(projectHit.organisation, projectHit.project),
+          type: 'project' as 'project',
+          label: (
+            <Hit
+              key={projectHit.label}
+              orgLabel={projectHit.organisation}
+              projectLabel={projectHit.project}
+              type="project"
+            >
+              <span>
+                {projectHit.label.length > LABEL_MAX_LENGTH
+                  ? `${projectHit.label.slice(0, LABEL_MAX_LENGTH)}...`
+                  : projectHit.label}
+              </span>
+            </Hit>
+          ),
+          // add suffix to value to differentiate from search term
+          value: `${projectHit.organisation}/${projectHit.project}${projectOptionValueSuffix}`,
+        };
+      });
+      options = [...options, ...projectOptions];
+    }
 
     if (studioList.length) {
       const studioOptions = studioList.map((studioHit, ix) => {