fix: hide search control if select no searchable (#6970)

* fix: hide search control if select no searchable

airbyte-webapp/src/components/ConnectorBlocks/TableItemTitle.tsx

@@ -74,9 +74,15 @@ const TableItemTitle: React.FC<IProps> = ({
         <Popout
           data-testid={`select-${type}`}
           options={options}
+          isSearchable={false}
           styles={{
             // TODO: hack to position select
-            menuPortal: (base) => ({ ...base, "margin-left": "-120px" }),
+            menuPortal: (base) => ({
+              ...base,
+              "margin-left": "-160px",
+              transform: "translateY(-36px)",
+              zIndex: 9999,
+            }),
           }}
           onChange={onSelect}
           targetComponent={({ onOpen }) => (

airbyte-webapp/src/components/base/DropDown/DropDown.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Props } from "react-select";
 import { SelectComponentsConfig } from "react-select/src/components";
+import { CSSObject } from "styled-components";
 
 import DropdownIndicator from "./components/DropdownIndicator";
 import Menu from "./components/Menu";
@@ -54,7 +55,12 @@ const DropDown: React.FC<DropdownProps> = (props) => {
       isSearchable={false}
       closeMenuOnSelect={!props.isMulti}
       hideSelectedOptions={false}
-      styles={{ menuPortal: (base: any) => ({ ...base, zIndex: 9999 }) }}
+      styles={{
+        menuPortal: (base: CSSObject) => ({
+          ...base,
+          zIndex: 9999,
+        }),
+      }}
       {...props}
       value={currentValue}
       components={components}

airbyte-webapp/src/components/base/Popout/Popout.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode, useMemo } from "react";
-import styled from "styled-components";
+import styled, { CSSObject } from "styled-components";
 import { useToggle } from "react-use";
 import { ActionMeta } from "react-select";
 
@@ -43,10 +43,6 @@ type PopoutProps = DropdownProps & {
   }) => ReactNode;
 };
 
-const selectStyles = {
-  control: (provided: Value) => ({ ...provided, minWidth: 240, marginTop: 8 }),
-};
-
 const Popout: React.FC<PopoutProps> = ({
   onChange,
   targetComponent,
@@ -67,16 +63,31 @@ const Popout: React.FC<PopoutProps> = ({
     [props.components]
   );
 
+  const selectStyles = {
+    control: (provided: Value) => ({
+      ...provided,
+      minWidth: 240,
+      marginTop: 8,
+    }),
+    menuPortal: (base: CSSObject): CSSObject => ({
+      ...base,
+      ...(!props.isSearchable ? { transform: "translateY(-37px)" } : {}),
+      zIndex: 9999,
+    }),
+  };
+
+  const target = targetComponent({
+    onOpen: toggleOpen,
+    isOpen,
+    value: props.value,
+  });
+
   return (
     <PopupOpener
       data-testid={props["data-testid"]}
       isOpen={isOpen}
       onClose={toggleOpen}
-      target={targetComponent({
-        onOpen: toggleOpen,
-        isOpen,
-        value: props.value,
-      })}
+      target={target}
     >
       <DropDown
         autoFocus

airbyte-webapp/src/components/base/Popout/index.stories.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import Button from "../Button";
+
+import { Popout } from "./Popout";
+
+export default {
+  title: "Ui/Popout",
+  component: Popout,
+} as ComponentMeta<typeof Popout>;
+
+const Target: React.FC<{ onOpen: () => void; title: string }> = ({
+  onOpen,
+  title,
+}) => {
+  return <Button onClick={() => onOpen()}>{title}</Button>;
+};
+
+const options = [
+  {
+    value: 1,
+    label: "Test 1",
+  },
+  {
+    value: 2,
+    label: "Test 2",
+  },
+  {
+    value: 3,
+    label: "Test 3",
+  },
+];
+
+const Template: ComponentStory<typeof Popout> = (args) => (
+  <Popout
+    {...args}
+    options={options}
+    targetComponent={(targetProps) => (
+      <Target
+        onOpen={targetProps.onOpen}
+        title={`isSearchable: ${args.isSearchable}`}
+      />
+    )}
+  />
+);
+
+export const Example = Template.bind({});
+Example.args = {
+  children: "Text",
+  title: "Title",
+  isSearchable: false,
+};

airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacePopout/WorkspacePopout.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import styled from "styled-components";
 import { components } from "react-select";
 import { FormattedMessage } from "react-intl";
@@ -16,7 +16,7 @@ import ExitIcon from "./components/ExitIcon";
 
 const BottomElement = styled.div`
   background: ${(props) => props.theme.greyColro0};
-  padding: 6px 16px 8px;
+  padding: 12px 16px 12px;
   width: 100%;
   min-height: 34px;
   border-top: 1px solid ${(props) => props.theme.greyColor20};
@@ -41,15 +41,51 @@ const TextBlock = styled.div`
   display: inline-block;
 `;
 
-type MenuWithRequestButtonProps = MenuListComponentProps<IDataItem, false>;
+const TopElement = styled.div<{ single: boolean }>`
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 17px;
+  display: flex;
+  align-items: center;
+  padding: 12px 16px 12px;
+
+  & > span {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  ${({ single, theme }) =>
+    !single && `border-bottom: 1px solid ${theme.greyColor20};`}
+`;
+
+const List = styled.div`
+  & .react-select__option {
+    & div {
+      font-weight: 400;
+      font-size: 11px;
+      color: #1a194d;
+    }
+  }
+`;
+
+type MenuWithRequestButtonProps = MenuListComponentProps<IDataItem, false> & {
+  selectedWorkspace: string;
+};
 
 const WorkspacesList: React.FC<MenuWithRequestButtonProps> = ({
   children,
+  selectedWorkspace,
   ...props
 }) => {
   const { selectWorkspace } = useWorkspaceService();
+
   return (
-    <>
+    <List>
+      <TopElement single={props.options.length === 0}>
+        <span>{selectedWorkspace}</span>
+      </TopElement>
       <components.MenuList {...props}>{children}</components.MenuList>
       <BottomElement>
         <Block onClick={() => selectWorkspace("")}>
@@ -59,7 +95,7 @@ const WorkspacesList: React.FC<MenuWithRequestButtonProps> = ({
           </TextBlock>
         </Block>
       </BottomElement>
-    </>
+    </List>
   );
 };
 
@@ -70,19 +106,27 @@ const WorkspacePopout: React.FC<{
   const { selectWorkspace, currentWorkspaceId } = useWorkspaceService();
   const { data: workspace } = useGetWorkspace(currentWorkspaceId || "");
 
+  const options = useMemo(() => {
+    return workspaces
+      ?.filter((w) => w.workspaceId !== workspace.workspaceId)
+      .map((workspace) => ({
+        value: workspace.workspaceId,
+        label: workspace.name,
+      }));
+  }, [workspaces, workspace]);
+
   return (
     <Popout
       targetComponent={(targetProps) =>
         children({ onOpen: targetProps.onOpen, value: workspace?.name })
       }
       components={{
-        MenuList: WorkspacesList,
+        MenuList: (props) => (
+          <WorkspacesList {...props} selectedWorkspace={workspace.name} />
+        ),
       }}
       isSearchable={false}
-      options={workspaces?.map((workspace) => ({
-        value: workspace.workspaceId,
-        label: workspace.name,
-      }))}
+      options={options}
       value={workspace?.workspaceId}
       onChange={({ value }) => selectWorkspace(value)}
     />