design: widget form design updates (#16454)

Author: teallarson

airbyte-webapp/src/components/ui/Button/Button.module.scss

@@ -52,6 +52,12 @@ $clear-dark-background-color: transparent;
 $clear-dark-text-color-hover: colors.$grey-600;
 $clear-dark-text-color-active: colors.$grey-600;
 
+// Clear Danger
+$clear-danger-text-color: colors.$red-400;
+$clear-danger-text-color-hover: colors.$red-600;
+$clear-danger-text-color-active: colors.$red-600;
+$clear-danger-background-color: transparent;
+
 .button {
   display: inline-flex;
   align-items: center;
@@ -262,6 +268,20 @@ $clear-dark-text-color-active: colors.$grey-600;
     }
   }
 
+  &--clear-danger {
+    background-color: $clear-danger-background-color;
+    color: $clear-danger-text-color;
+    padding: 0;
+
+    &:hover {
+      color: $clear-danger-text-color-hover;
+    }
+
+    &:active {
+      color: $clear-danger-text-color-active;
+    }
+  }
+
   &--clear-dark {
     background-color: $clear-dark-background-color;
     color: $clear-dark-text-color;

airbyte-webapp/src/components/ui/Button/Button.tsx

@@ -31,6 +31,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, r
     [styles["button--size-xs"]]: size === "xs",
     [styles["button--danger"]]: variant === "danger",
     [styles["button--clear"]]: variant === "clear",
+    [styles["button--clear-danger"]]: variant === "clearDanger",
     [styles["button--magic"]]: variant === "magic",
     [styles["button--primary"]]: variant === "primary",
     [styles["button--secondary"]]: variant === "secondary",

airbyte-webapp/src/components/ui/Button/types.tsx

@@ -10,6 +10,7 @@ export type ButtonVariant =
   | "magic"
   | "clear"
   | "clearDark"
+  | "clearDanger"
   | "primaryDark"
   | "secondaryDark"
   | "link";

airbyte-webapp/src/locales/en.json

@@ -2484,16 +2484,18 @@
   "partialUserConfig.update.tab": "Saved integrations",
   "partialUserConfig.create.title": "Create integration",
   "partialUserConfig.update.title": "Update your integration",
-  "partialUserConfig.buttonText": "Save integration",
+  "partialUserConfig.buttonText": "Save",
   "partialUserConfig.create.success": "Source created successfully",
   "partialUserConfig.update.success": "Source updated successfully",
   "partialUserConfig.back": "Back",
   "partialUserConfig.backToIntegrations": "Back to integrations",
   "partialUserConfig.success.title": "Success!",
   "partialUserConfig.success.description": "You've connected your account.",
-  "partialUserConfig.delete.success": "Integration deleted successfully",
+  "partialUserConfig.delete.success": "{connectorName} has been deleted.",
   "partialUserConfig.delete.buttonText": "Delete integration",
   "partialUserConfig.delete.warning": "Are you sure you want to delete this integration?",
+  "partialUserConfig.delete.warning.confirm": "Yes, delete this integration",
+  "partialUserConfig.delete.warning.cancel": "No, nevermind",
   "partialUserConfig.delete.error": "There was an error deleting this integration. Please try again.",
   "embedded.onboardingCopy": "Welcome to Airbyte Embedded.",
   "embedded.envDescription": "Save a copy of the following environment variables in your application to begin integrating with Airbyte. See our Getting Started page for more information.",

airbyte-webapp/src/pages/embedded/EmbeddedSourceCreatePage/components/PartialUserConfigCreateForm.tsx

@@ -4,6 +4,7 @@ import { IsAirbyteEmbeddedContext } from "core/services/embedded";
 import { ConnectorFormValues } from "views/Connector/ConnectorForm";
 
 import { PartialUserConfigForm } from "./PartialUserConfigForm";
+import { PartialUserConfigSuccessView } from "./PartialUserConfigSuccessView";
 import { useEmbeddedSourceParams } from "../hooks/useEmbeddedSourceParams";
 
 export const PartialUserConfigCreateForm: React.FC = () => {
@@ -33,6 +34,16 @@ export const PartialUserConfigCreateForm: React.FC = () => {
     });
   };
 
+  if (isSuccess) {
+    return (
+      <PartialUserConfigSuccessView
+        successType="create"
+        connectorName={configTemplate.name}
+        icon={configTemplate.icon}
+      />
+    );
+  }
+
   return (
     <IsAirbyteEmbeddedContext.Provider value>
       <PartialUserConfigForm
@@ -41,7 +52,6 @@ export const PartialUserConfigCreateForm: React.FC = () => {
         icon={configTemplate.icon}
         onSubmit={onSubmit}
         sourceDefinitionSpecification={sourceDefinitionSpecification}
-        showSuccessView={isSuccess}
       />
     </IsAirbyteEmbeddedContext.Provider>
   );

airbyte-webapp/src/pages/embedded/EmbeddedSourceCreatePage/components/PartialUserConfigEditForm.tsx

@@ -1,28 +1,31 @@
 import React from "react";
-import { FormattedMessage, useIntl } from "react-intl";
+import { FormattedMessage } from "react-intl";
 
-import { Text } from "components/ui/Text";
+import { Button } from "components/ui/Button";
+import { FlexContainer } from "components/ui/Flex";
 
 import { useCurrentWorkspaceId } from "area/workspace/utils";
 import { useDeletePartialUserConfig, useGetPartialUserConfig, useUpdatePartialUserConfig } from "core/api";
 import { SourceDefinitionSpecification } from "core/api/types/AirbyteClient";
 import { IsAirbyteEmbeddedContext } from "core/services/embedded";
-import { useConfirmationModalService } from "hooks/services/ConfirmationModal";
-import { useNotificationService } from "hooks/services/Notification";
 import { ConnectorFormValues } from "views/Connector/ConnectorForm";
 
+import styles from "./PartialUserConfigEditForm.module.scss";
 import { PartialUserConfigForm } from "./PartialUserConfigForm";
-
+import { PartialUserConfigHeader } from "./PartialUserConfigHeader";
+import { PartialUserConfigSuccessView } from "./PartialUserConfigSuccessView";
 export const PartialUserConfigEditForm: React.FC<{ selectedPartialConfigId: string }> = ({
   selectedPartialConfigId,
 }) => {
   const workspaceId = useCurrentWorkspaceId();
-  const { mutate: updatePartialUserConfig, isSuccess } = useUpdatePartialUserConfig();
-  const { mutateAsync: deletePartialUserConfig, isSuccess: isDeleteSuccess } = useDeletePartialUserConfig();
-  const { openConfirmationModal, closeConfirmationModal } = useConfirmationModalService();
-  const { registerNotification } = useNotificationService();
-  const { formatMessage } = useIntl();
+  const { mutate: updatePartialUserConfig, isSuccess: isUpdateSuccess } = useUpdatePartialUserConfig();
+  const {
+    mutateAsync: deletePartialUserConfig,
+    isSuccess: isDeleteSuccess,
+    isLoading: isDeleting,
+  } = useDeletePartialUserConfig();
   const partialUserConfig = useGetPartialUserConfig(selectedPartialConfigId ?? "");
+  const [confirmDelete, setConfirmDelete] = React.useState(false);
 
   const sourceDefinitionSpecification: SourceDefinitionSpecification = {
     ...partialUserConfig.configTemplate.configTemplateSpec,
@@ -51,29 +54,61 @@ export const PartialUserConfigEditForm: React.FC<{ selectedPartialConfigId: stri
   };
 
   const onDeleteClick = () => {
-    openConfirmationModal({
-      title: <FormattedMessage id="partialUserConfig.delete.buttonText" />,
-      text: (
-        <Text>
-          <FormattedMessage id="partialUserConfig.delete.warning" />
-        </Text>
-      ),
-      onSubmit: async () => {
-        try {
-          await deletePartialUserConfig(selectedPartialConfigId);
-          closeConfirmationModal();
-        } catch (e) {
-          registerNotification({
-            type: "error",
-            id: `delete-integration-${selectedPartialConfigId}`,
-            text: <FormattedMessage id="partialUserConfig.delete.error" />,
-          });
-        }
-      },
-      submitButtonText: formatMessage({ id: "partialUserConfig.delete.buttonText" }),
-    });
+    setConfirmDelete(true);
+  };
+
+  const handleDelete = async () => {
+    await deletePartialUserConfig(selectedPartialConfigId);
+    setConfirmDelete(false);
   };
 
+  const handleCancelDelete = () => {
+    setConfirmDelete(false);
+  };
+
+  if (confirmDelete === true) {
+    return (
+      <FlexContainer direction="column" justifyContent="space-between" alignItems="center" className={styles.content}>
+        <FlexContainer direction="column" gap="xl" alignItems="center">
+          <PartialUserConfigHeader
+            icon={partialUserConfig.configTemplate.icon}
+            connectorName={partialUserConfig.configTemplate.name}
+          />
+
+          <FormattedMessage id="partialUserConfig.delete.warning" />
+        </FlexContainer>
+        <FlexContainer className={styles.buttonContainer} direction="column">
+          <Button full variant="danger" onClick={handleDelete} isLoading={isDeleting}>
+            <FormattedMessage id="partialUserConfig.delete.warning.confirm" />
+          </Button>
+          <Button full variant="clear" onClick={handleCancelDelete} disabled={isDeleting}>
+            <FormattedMessage id="partialUserConfig.delete.warning.cancel" />
+          </Button>
+        </FlexContainer>
+      </FlexContainer>
+    );
+  }
+
+  if (isDeleteSuccess) {
+    return (
+      <PartialUserConfigSuccessView
+        successType="delete"
+        connectorName={partialUserConfig.configTemplate.name}
+        icon={partialUserConfig.configTemplate.icon}
+      />
+    );
+  }
+
+  if (isUpdateSuccess) {
+    return (
+      <PartialUserConfigSuccessView
+        successType="update"
+        connectorName={partialUserConfig.configTemplate.name}
+        icon={partialUserConfig.configTemplate.icon}
+      />
+    );
+  }
+
   const initialValues: Partial<ConnectorFormValues> = {
     name: partialUserConfig.configTemplate.name,
     connectionConfiguration: partialUserConfig.connectionConfiguration,
@@ -88,9 +123,7 @@ export const PartialUserConfigEditForm: React.FC<{ selectedPartialConfigId: stri
         onSubmit={onSubmit}
         initialValues={initialValues}
         sourceDefinitionSpecification={sourceDefinitionSpecification}
-        showSuccessView={isSuccess}
         onDelete={onDeleteClick}
-        isDeleteSuccess={isDeleteSuccess}
       />
     </IsAirbyteEmbeddedContext.Provider>
   );

airbyte-webapp/src/pages/embedded/EmbeddedSourceCreatePage/components/PartialUserConfigForm.module.scss

@@ -1,14 +1,6 @@
 @use "scss/colors";
 @use "scss/variables";
 
-.iconContainer {
-  height: 56px;
-  width: 56px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 .connectorName {
   font-size: variables.$font-size-lg;
   font-weight: 500;

airbyte-webapp/src/pages/embedded/EmbeddedSourceCreatePage/components/PartialUserConfigForm.tsx

@@ -1,18 +1,12 @@
-import { FormattedMessage } from "react-intl";
-
-import { Button } from "components/ui/Button";
 import { FlexContainer } from "components/ui/Flex";
-import { Icon } from "components/ui/Icon";
-import { Text } from "components/ui/Text";
 
-import { SvgIcon } from "area/connector/utils";
 import { SourceDefinitionRead } from "core/api/types/AirbyteClient";
 import { SourceDefinitionSpecificationDraft } from "core/domain/connector";
 import { ConnectorForm, ConnectorFormValues } from "views/Connector/ConnectorForm";
 
 import styles from "./PartialUserConfigForm.module.scss";
 import { PartialUserConfigFormControls } from "./PartialUserConfigFormControls";
-import { useEmbeddedSourceParams } from "../hooks/useEmbeddedSourceParams";
+import { PartialUserConfigHeader } from "./PartialUserConfigHeader";
 
 interface PartialUserConfigFormProps {
   connectorName: string;
@@ -21,8 +15,6 @@ interface PartialUserConfigFormProps {
   initialValues?: Partial<ConnectorFormValues>;
   sourceDefinitionSpecification: SourceDefinitionSpecificationDraft;
   isEditMode: boolean;
-  showSuccessView: boolean;
-  isDeleteSuccess?: boolean;
   onDelete?: () => void;
 }
 
@@ -33,12 +25,8 @@ export const PartialUserConfigForm: React.FC<PartialUserConfigFormProps> = ({
   initialValues,
   sourceDefinitionSpecification,
   isEditMode,
-  showSuccessView,
-  isDeleteSuccess,
   onDelete,
 }) => {
-  const { clearSelectedConfig, clearSelectedTemplate } = useEmbeddedSourceParams();
-
   // The ConnectorForm needs a connector definition to get the connector name. We construct a dummy one here, since
   // Embedded users do not have access to APIs that return actual SourceDefinitionRead objects
   const sourceDefinition: SourceDefinitionRead = {
@@ -48,71 +36,24 @@ export const PartialUserConfigForm: React.FC<PartialUserConfigFormProps> = ({
     dockerImageTag: "not-set-for-embedded",
   };
 
-  const onClick = () => {
-    clearSelectedConfig();
-    clearSelectedTemplate();
-  };
   return (
-    <>
-      {!showSuccessView && !isDeleteSuccess ? (
-        <FlexContainer className={styles.content} direction="column">
-          <FlexContainer alignItems="center" gap="sm" justifyContent="center">
-            <FlexContainer className={styles.iconContainer} aria-hidden="true" alignItems="center">
-              <SvgIcon src={icon} />
-            </FlexContainer>
-            <p>{connectorName}</p>
-          </FlexContainer>
-
-          <ConnectorForm
-            trackDirtyChanges
-            isEditMode={isEditMode}
-            formType="source"
-            formValues={initialValues}
-            selectedConnectorDefinition={sourceDefinition}
-            selectedConnectorDefinitionSpecification={sourceDefinitionSpecification}
-            onSubmit={async (values: ConnectorFormValues) => {
-              try {
-                await Promise.resolve(onSubmit(values));
-              } catch (error) {
-                console.error(error);
-              }
-            }}
-            canEdit
-            renderFooter={({ isSubmitting }) => (
-              <PartialUserConfigFormControls onDelete={onDelete} isSubmitting={isSubmitting} />
-            )}
-          />
-        </FlexContainer>
-      ) : (
-        <FlexContainer className={styles.content} direction="column" justifyContent="space-between">
-          {!isDeleteSuccess && (
-            <FlexContainer alignItems="center" gap="sm" justifyContent="center">
-              <FlexContainer className={styles.iconContainer} aria-hidden="true" alignItems="center">
-                <SvgIcon src={icon} />
-              </FlexContainer>
-              <p>{connectorName}</p>
-            </FlexContainer>
-          )}
-          <FlexContainer direction="column" gap="lg" justifyContent="center" alignItems="center">
-            <Icon size="xl" type="checkCircle" color="disabled" />
-            <Text size="lg">
-              <FormattedMessage id="partialUserConfig.success.title" />
-            </Text>
-            <Text size="md">
-              {isDeleteSuccess ? (
-                <FormattedMessage id="partialUserConfig.delete.success" />
-              ) : (
-                <FormattedMessage id="partialUserConfig.success.description" />
-              )}
-            </Text>
-          </FlexContainer>
-          <div className={styles.buttonContainer}>
-            <Button full onClick={onClick}>
-              <FormattedMessage id="partialUserConfig.backToIntegrations" />
-            </Button>
-          </div>
-        </FlexContainer>
-      )}
-    </>
+    <FlexContainer className={styles.content} direction="column">
+      <PartialUserConfigHeader icon={icon} connectorName={connectorName} />
+      <ConnectorForm
+        trackDirtyChanges
+        isEditMode={isEditMode}
+        formType="source"
+        formValues={initialValues}
+        selectedConnectorDefinition={sourceDefinition}
+        selectedConnectorDefinitionSpecification={sourceDefinitionSpecification}
+        onSubmit={async (values: ConnectorFormValues) => {
+          await Promise.resolve(onSubmit(values));
+        }}
+        canEdit
+        renderFooter={({ isSubmitting }) => (
+          <PartialUserConfigFormControls onDelete={onDelete} isSubmitting={isSubmitting} />
+        )}
+      />
+    </FlexContainer>
   );
 };