Add connector stage to dropdown value (#10677)

* Add connector stage to dropdown value
airbytehq · Mar 1, 2022 · a6b10b0 · a6b10b0
1 parent 2bae03f
commit a6b10b0
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 11 deletions.
diff --git a/airbyte-webapp/src/components/base/DropDown/components/SingleValue.tsx b/airbyte-webapp/src/components/base/DropDown/components/SingleValue.tsx
@@ -9,14 +9,14 @@ export type IProps = {
   data?: IDataItem;
 } & SingleValueProps<OptionTypeBase>;
 
-const ItemView = styled.div`
+export const ItemView = styled.div`
   display: flex;
   flex-direction: row;
   justify-content: left;
   align-items: center;
 `;
 
-const Icon = styled.div`
+export const Icon = styled.div`
   margin-right: 6px;
   display: inline-block;
 `;

diff --git a/...ebapp/src/views/Connector/ServiceForm/components/Controls/ConnectorServiceTypeControl.tsx b/...ebapp/src/views/Connector/ServiceForm/components/Controls/ConnectorServiceTypeControl.tsx
@@ -27,6 +27,11 @@ import {
   IProps as OptionProps,
   OptionView,
 } from "components/base/DropDown/components/Option";
+import {
+  IProps as SingleValueProps,
+  Icon as SingleValueIcon,
+  ItemView as SingleValueView,
+} from "components/base/DropDown/components/SingleValue";
 
 const BottomElement = styled.div`
   background: ${(props) => props.theme.greyColro0};
@@ -70,6 +75,15 @@ const Stage = styled.div`
   color: ${({ theme }) => theme.textColor};
 `;
 
+const SingleValueContent = styled(components.SingleValue)`
+  width: 100%;
+  padding-right: 38px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+`;
+
 type MenuWithRequestButtonProps = MenuListComponentProps<IDataItem, false>;
 
 const ConnectorList: React.FC<MenuWithRequestButtonProps> = ({
@@ -88,6 +102,18 @@ const ConnectorList: React.FC<MenuWithRequestButtonProps> = ({
   </>
 );
 
+const StageLabel: React.FC<{ releaseStage?: ReleaseStage }> = ({
+  releaseStage,
+}) =>
+  releaseStage && releaseStage !== ReleaseStage.GENERALLY_AVAILABLE ? (
+    <Stage>
+      <FormattedMessage
+        id={`connector.releaseStage.${releaseStage}`}
+        defaultMessage={releaseStage}
+      />
+    </Stage>
+  ) : null;
+
 const Option: React.FC<OptionProps> = (props) => {
   return (
     <components.Option {...props}>
@@ -100,20 +126,26 @@ const Option: React.FC<OptionProps> = (props) => {
           {props.data.img || null}
           <Label>{props.label}</Label>
         </Text>
-        {props.data.releaseStage &&
-        props.data.releaseStage !== ReleaseStage.GENERALLY_AVAILABLE ? (
-          <Stage>
-            <FormattedMessage
-              id={`connector.releaseStage.${props.data.releaseStage}`}
-              defaultMessage={props.data.releaseStage}
-            />
-          </Stage>
-        ) : null}
+        <StageLabel releaseStage={props.data.releaseStage} />
       </OptionView>
     </components.Option>
   );
 };
 
+const SingleValue: React.FC<SingleValueProps> = (props) => {
+  return (
+    <SingleValueView>
+      {props.data.img && <SingleValueIcon>{props.data.img}</SingleValueIcon>}
+      <div>
+        <SingleValueContent {...props}>
+          {props.data.label}
+          <StageLabel releaseStage={props.data.releaseStage} />
+        </SingleValueContent>
+      </div>
+    </SingleValueView>
+  );
+};
+
 const ConnectorServiceTypeControl: React.FC<{
   property: FormBaseItem;
   formType: "source" | "destination";
@@ -198,6 +230,7 @@ const ConnectorServiceTypeControl: React.FC<{
           components={{
             MenuList: ConnectorList,
             Option,
+            SingleValue,
           }}
           selectProps={{ onOpenRequestConnectorModal }}
           error={!!fieldMeta.error && fieldMeta.touched}