🪟 🎉 Remove advanced mode (#21914)

* Remove advanced mode

* Add Suspense boundary

* Remove tests

Co-authored-by: Joey Marshment-Howell <[email protected]>

Author: Tim Roes

airbyte-webapp/src/hooks/services/useAdvancedModeSetting.test.ts

@@ -113,11 +113,9 @@
   "form.url.error": "field must be a valid URL",
   "form.setupGuide": "Setup Guide",
   "form.wait": "Please wait a little bit more…",
-  "form.advancedMode.label": "Advanced mode",
-  "form.advancedMode.switchLabel": "Enable advanced mode",
-  "form.advancedMode.tooltip": "When Advanced Mode is enabled, certain views will display additional technical information.",
   "form.optional": "Optional",
 
+  "connectionForm.settings.advancedButton": "Advanced",
   "connectionForm.validation.error": "The form is invalid. Please make sure that all fields are correct.",
   "connectionForm.normalization.title": "Normalization",
   "connectionForm.operations.notSupported": "Normalization and Transformation operations are not supported for this connection.",

airbyte-webapp/src/hooks/services/useAdvancedModeSetting.ts

@@ -108,9 +108,6 @@
   "settings.generalSettings.changeWorkspace": "Change Workspace",
   "settings.generalSettings.form.name.label": "Workspace name",
   "settings.generalSettings.form.name.placeholder": "Workspace name",
-  "settings.generalSettings.form.advancedMode.label": "Advanced mode",
-  "settings.generalSettings.form.advancedMode.switchLabel": "Enable advanced mode",
-  "settings.generalSettings.form.advancedMode.tooltip": "When Advanced Mode is enabled, certain views will display additional technical information.",
   "settings.generalSettings.deleteLabel": "Delete your workspace",
   "settings.generalSettings.deleteText": "Delete",
   "settings.accessManagementSettings": "Access Management",

airbyte-webapp/src/locales/en.json

@@ -4,12 +4,10 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import * as yup from "yup";
 
-import { Label, LabeledInput, LabeledSwitch } from "components";
+import { LabeledInput } from "components";
 import { Button } from "components/ui/Button";
-import { InfoTooltip } from "components/ui/Tooltip";
 
 import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";
-import { useAdvancedModeSetting } from "hooks/services/useAdvancedModeSetting";
 import { useCurrentWorkspace } from "hooks/services/useWorkspace";
 import {
   useRemoveCloudWorkspace,
@@ -20,15 +18,6 @@ import { useInvalidateWorkspace, useWorkspaceService } from "services/workspaces
 
 import styles from "./WorkspaceSettingsView.module.scss";
 
-const AdvancedModeSwitchLabel = () => (
-  <>
-    <FormattedMessage id="settings.generalSettings.form.advancedMode.switchLabel" />
-    <InfoTooltip>
-      <FormattedMessage id="settings.generalSettings.form.advancedMode.tooltip" />
-    </InfoTooltip>
-  </>
-);
-
 const ValidationSchema = yup.object().shape({
   name: yup.string().required("form.empty.error"),
 });
@@ -41,7 +30,6 @@ export const WorkspaceSettingsView: React.FC = () => {
   const { mutateAsync: removeCloudWorkspace, isLoading: isRemovingCloudWorkspace } = useRemoveCloudWorkspace();
   const { mutateAsync: updateCloudWorkspace } = useUpdateCloudWorkspace();
   const invalidateWorkspace = useInvalidateWorkspace(workspace.workspaceId);
-  const [isAdvancedMode, setAdvancedMode] = useAdvancedModeSetting();
 
   return (
     <>
@@ -58,11 +46,9 @@ export const WorkspaceSettingsView: React.FC = () => {
         <Formik
           initialValues={{
             name: workspace.name,
-            advancedMode: isAdvancedMode,
           }}
           onSubmit={async (payload) => {
             const { workspaceId } = workspace;
-            setAdvancedMode(payload.advancedMode);
             await updateCloudWorkspace({
               workspaceId,
               name: payload.name,
@@ -72,7 +58,7 @@ export const WorkspaceSettingsView: React.FC = () => {
           enableReinitialize
           validationSchema={ValidationSchema}
         >
-          {({ dirty, isSubmitting, resetForm, isValid, setFieldValue }) => (
+          {({ dirty, isSubmitting, resetForm, isValid }) => (
             <Form>
               <Content>
                 <Field name="name">
@@ -89,18 +75,6 @@ export const WorkspaceSettingsView: React.FC = () => {
                     />
                   )}
                 </Field>
-                <Label className={styles.formItem}>
-                  <FormattedMessage id="settings.generalSettings.form.advancedMode.label" />
-                </Label>
-                <Field name="advancedMode">
-                  {({ field }: FieldProps<boolean>) => (
-                    <LabeledSwitch
-                      label={<AdvancedModeSwitchLabel />}
-                      checked={field.value}
-                      onChange={() => setFieldValue(field.name, !field.value)}
-                    />
-                  )}
-                </Field>
 
                 <div className={classNames(styles.formItem, styles.buttonGroup)}>
                   <Button type="button" variant="secondary" disabled={!dirty} onClick={() => resetForm()}>

airbyte-webapp/src/packages/cloud/locales/en.json

@@ -4,12 +4,9 @@ import { FormattedMessage, useIntl } from "react-intl";
 import styled from "styled-components";
 import * as yup from "yup";
 
-import { Label, LabeledInput, LabeledSwitch } from "components";
+import { LabeledInput } from "components";
 import { Row, Cell } from "components/SimpleTableComponents";
 import { Button } from "components/ui/Button";
-import { InfoTooltip } from "components/ui/Tooltip";
-
-import { useAdvancedModeSetting } from "hooks/services/useAdvancedModeSetting";
 
 import styles from "./AccountForm.module.scss";
 
@@ -36,15 +33,6 @@ const Success = styled.div`
   color: ${({ theme }) => theme.successColor};
 `;
 
-const AdvancedModeSwitchLabel = () => (
-  <>
-    <FormattedMessage id="form.advancedMode.switchLabel" />
-    <InfoTooltip>
-      <FormattedMessage id="form.advancedMode.tooltip" />
-    </InfoTooltip>
-  </>
-);
-
 const accountValidationSchema = yup.object().shape({
   email: yup.string().email("form.email.error").required("form.empty.error"),
 });
@@ -58,21 +46,19 @@ interface AccountFormProps {
 
 const AccountForm: React.FC<AccountFormProps> = ({ email, onSubmit, successMessage, errorMessage }) => {
   const { formatMessage } = useIntl();
-  const [isAdvancedMode, setAdvancedMode] = useAdvancedModeSetting();
 
   return (
     <Formik
-      initialValues={{ email, advancedMode: isAdvancedMode }}
+      initialValues={{ email }}
       validateOnBlur
       validateOnChange={false}
       validationSchema={accountValidationSchema}
       enableReinitialize
       onSubmit={(data) => {
         onSubmit(data);
-        setAdvancedMode(data.advancedMode);
       }}
     >
-      {({ isSubmitting, dirty, values, setFieldValue }) => (
+      {({ isSubmitting, dirty, values }) => (
         <EmailForm>
           <InputRow className={styles.formItem}>
             <Cell flex={3}>
@@ -91,20 +77,6 @@ const AccountForm: React.FC<AccountFormProps> = ({ email, onSubmit, successMessa
               </Field>
             </Cell>
           </InputRow>
-          <div className={styles.formItem}>
-            <Label>
-              <FormattedMessage id="form.advancedMode.label" />
-            </Label>
-            <Field name="advancedMode">
-              {({ field }: FieldProps<boolean>) => (
-                <LabeledSwitch
-                  label={<AdvancedModeSwitchLabel />}
-                  checked={field.value}
-                  onChange={() => setFieldValue(field.name, !field.value)}
-                />
-              )}
-            </Field>
-          </div>
           <div className={styles.submit}>
             <Button isLoading={isSubmitting} type="submit" disabled={!dirty || !values.email}>
               <FormattedMessage id="form.saveChanges" />

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

@@ -5,3 +5,11 @@
   margin: 0 auto;
   padding-bottom: variables.$spacing-md;
 }
+
+.advancedButton {
+  margin-top: variables.$spacing-md;
+}
+
+.advancedPanel {
+  margin-top: variables.$spacing-sm;
+}

airbyte-webapp/src/pages/SettingsPage/pages/AccountPage/components/AccountForm.tsx

@@ -1,14 +1,19 @@
+import { faChevronDown, faChevronRight } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Disclosure } from "@headlessui/react";
 import React from "react";
+import { FormattedMessage } from "react-intl";
 import { Navigate } from "react-router-dom";
 
 import { DeleteBlock } from "components/common/DeleteBlock";
 import { UpdateConnectionDataResidency } from "components/connection/UpdateConnectionDataResidency";
+import { Button } from "components/ui/Button";
+import { Spinner } from "components/ui/Spinner";
 
 import { ConnectionStatus } from "core/request/AirbyteClient";
 import { PageTrackingCodes, useTrackPage } from "hooks/services/Analytics";
 import { useConnectionEditService } from "hooks/services/ConnectionEdit/ConnectionEditService";
 import { FeatureItem, useFeature } from "hooks/services/Feature";
-import { useAdvancedModeSetting } from "hooks/services/useAdvancedModeSetting";
 import { useDeleteConnection } from "hooks/services/useConnectionHook";
 
 import styles from "./ConnectionSettingsPage.module.scss";
@@ -22,16 +27,33 @@ export const ConnectionSettingsPageInner: React.FC = () => {
   // TODO: Disabled until feature is implemented in backend
   const canSendSchemaUpdateNotifications = false; // useFeature(FeatureItem.AllowAutoDetectSchema);
 
-  const [isAdvancedMode] = useAdvancedModeSetting();
   useTrackPage(PageTrackingCodes.CONNECTIONS_ITEM_SETTINGS);
   const onDelete = () => deleteConnection(connection);
 
   return (
     <div className={styles.container}>
       {canSendSchemaUpdateNotifications && <SchemaUpdateNotifications />}
       {canUpdateDataResidency && <UpdateConnectionDataResidency />}
-      {isAdvancedMode && <StateBlock connectionId={connection.connectionId} />}
       <DeleteBlock type="connection" onDelete={onDelete} />
+      <Disclosure>
+        {({ open }) => (
+          <>
+            <Disclosure.Button
+              as={Button}
+              variant="clear"
+              icon={<FontAwesomeIcon icon={open ? faChevronDown : faChevronRight} />}
+              className={styles.advancedButton}
+            >
+              <FormattedMessage id="connectionForm.settings.advancedButton" />
+            </Disclosure.Button>
+            <Disclosure.Panel className={styles.advancedPanel}>
+              <React.Suspense fallback={<Spinner />}>
+                <StateBlock connectionId={connection.connectionId} />
+              </React.Suspense>
+            </Disclosure.Panel>
+          </>
+        )}
+      </Disclosure>
     </div>
   );
 };