🪟 🎨 Remove feedback modal from UI (#16548)

* remove feedback modal components and from FinalStep component

* create FirstSuccessfulSync component

* add FirstSuccessfulSync component to FinalStep

* remove sendFeedback functionality from useWorkspace hook

* remove sendFeedback functionality from Onboarding context

* move svg image closer to component where it's used

* update .completedSyncText text style

* add data-testid to FirstSuccessfulSync component

airbyte-webapp/src/core/analytics/types.ts

@@ -22,7 +22,6 @@ export const enum Action {
   DELETE = "Delete",
   REQUEST = "Request",
   SKIP = "Skip",
-  FEEDBACK = "Feedback",
   PREFERENCES = "Preferences",
   NO_MATCHING_CONNECTOR = "NoMatchingConnector",
   SELECTION_OPENED = "SelectionOpened",

airbyte-webapp/src/hooks/services/Onboarding/OnboardingService.tsx

@@ -5,8 +5,6 @@ import casesConfig from "config/casesConfig.json";
 import { useCurrentWorkspace } from "hooks/services/useWorkspace";
 
 interface Context {
-  feedbackPassed?: boolean;
-  passFeedback: () => void;
   visibleUseCases?: string[];
   useCaseLinks: Record<string, string>;
   skipCase: (skipId: string) => void;
@@ -16,22 +14,18 @@ export const OnboardingServiceContext = React.createContext<Context | null>(null
 
 export const OnboardingServiceProvider: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
   const workspace = useCurrentWorkspace();
-  const [feedbackPassed, setFeedbackPassed] = useLocalStorage<boolean>(`${workspace.workspaceId}/passFeedback`, false);
   const [skippedUseCases, setSkippedUseCases] = useLocalStorage<string[]>(
     `${workspace.workspaceId}/skippedUseCases`,
     []
   );
 
   const ctx = useMemo<Context>(
     () => ({
-      feedbackPassed,
-      passFeedback: () => setFeedbackPassed(true),
       visibleUseCases: Object.keys(casesConfig).filter((useCase) => !skippedUseCases?.includes(useCase)),
       useCaseLinks: casesConfig,
       skipCase: (skipId: string) => setSkippedUseCases([...(skippedUseCases ?? []), skipId]),
     }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [feedbackPassed, skippedUseCases]
+    [setSkippedUseCases, skippedUseCases]
   );
 
   return <OnboardingServiceContext.Provider value={ctx}>{children}</OnboardingServiceContext.Provider>;

airbyte-webapp/src/hooks/services/useWorkspace.tsx

@@ -2,7 +2,6 @@ import { useMutation } from "react-query";
 
 import { Action, Namespace } from "core/analytics";
 import { NotificationService } from "core/domain/notification/NotificationService";
-import { DestinationRead, SourceRead } from "core/request/AirbyteClient";
 import { useAnalyticsService } from "hooks/services/Analytics";
 import { useInitService } from "services/useInitService";
 import { useCurrentWorkspace, useUpdateWorkspace } from "services/workspaces/WorkspacesService";
@@ -45,25 +44,6 @@ const useWorkspace = () => {
     });
   };
 
-  const sendFeedback = async ({
-    feedback,
-    source,
-    destination,
-  }: {
-    feedback: string;
-    source: SourceRead;
-    destination: DestinationRead;
-  }) => {
-    analyticsService.track(Namespace.ONBOARDING, Action.FEEDBACK, {
-      actionDescription: "Onboarding Feedback",
-      feedback,
-      connector_source_definition: source?.sourceName,
-      connector_source_definition_id: source?.sourceDefinitionId,
-      connector_destination_definition: destination?.destinationName,
-      connector_destination_definition_id: destination?.destinationDefinitionId,
-    });
-  };
-
   const setInitialSetupConfig = async (data: {
     email: string;
     anonymousDataCollection: boolean;
@@ -139,7 +119,6 @@ const useWorkspace = () => {
     updatePreferences,
     updateWebhook,
     testWebhook: tryWebhookUrl.mutateAsync,
-    sendFeedback,
   };
 };
 

airbyte-webapp/src/pages/OnboardingPage/components/FinalStep.tsx

@@ -8,9 +8,8 @@ import { useConfig } from "config";
 import Status from "core/statuses";
 import { useOnboardingService } from "hooks/services/Onboarding/OnboardingService";
 import { useConnectionList, useGetConnection, useSyncConnection } from "hooks/services/useConnectionHook";
-import useWorkspace from "hooks/services/useWorkspace";
-import SyncCompletedModal from "views/Feedback/SyncCompletedModal";
 
+import { FirstSuccessfulSync } from "./FirstSuccessfulSync";
 import HighlightedText from "./HighlightedText";
 import ProgressBlock from "./ProgressBlock";
 import UseCaseBlock from "./UseCaseBlock";
@@ -33,35 +32,19 @@ const Videos = styled.div`
 
 const FinalStep: React.FC = () => {
   const config = useConfig();
-  const { sendFeedback } = useWorkspace();
-  const { feedbackPassed, passFeedback, visibleUseCases, useCaseLinks, skipCase } = useOnboardingService();
+  const { visibleUseCases, useCaseLinks, skipCase } = useOnboardingService();
   const { mutateAsync: syncConnection } = useSyncConnection();
   const { connections } = useConnectionList();
   const connection = useGetConnection(connections[0].connectionId, {
     refetchInterval: 2500,
   });
-  const [isOpen, setIsOpen] = useState(false);
+  const [isFirstSyncSuccessful, setIsFirstSyncSuccessful] = useState(false);
 
   useEffect(() => {
-    if (connection.latestSyncJobStatus === Status.SUCCEEDED && !feedbackPassed) {
-      setIsOpen(true);
+    if (connection.latestSyncJobStatus === Status.SUCCEEDED) {
+      setIsFirstSyncSuccessful(true);
     }
-  }, [connection.latestSyncJobStatus, feedbackPassed]);
-
-  const onSkipFeedback = () => {
-    passFeedback();
-    setIsOpen(false);
-  };
-
-  const onSendFeedback = (feedback: string) => {
-    sendFeedback({
-      feedback,
-      source: connection.source,
-      destination: connection.destination,
-    });
-    passFeedback();
-    setIsOpen(false);
-  };
+  }, [connection.latestSyncJobStatus]);
 
   const onSync = () => syncConnection(connections[0]);
 
@@ -81,8 +64,8 @@ const FinalStep: React.FC = () => {
           img="/videoCover.png"
         />
       </Videos>
-      {!feedbackPassed && <ProgressBlock connection={connection} onSync={onSync} />}
-
+      <ProgressBlock connection={connection} onSync={onSync} />
+      {isFirstSyncSuccessful && <FirstSuccessfulSync />}
       <Title bold>
         <FormattedMessage
           id="onboarding.useCases"
@@ -95,8 +78,6 @@ const FinalStep: React.FC = () => {
       {visibleUseCases?.map((item, key) => (
         <UseCaseBlock key={item} count={key + 1} href={useCaseLinks[item]} onSkip={skipCase} id={item} />
       ))}
-
-      {isOpen ? <SyncCompletedModal onClose={onSkipFeedback} onPassFeedback={onSendFeedback} /> : null}
     </>
   );
 };

airbyte-webapp/src/pages/OnboardingPage/components/FirstSuccessfulSync/FirstSuccessfulSync.module.scss

@@ -0,0 +1,23 @@
+@use "../../../../scss/colors";
+@use "../../../../scss/variables";
+
+.container {
+  width: 100%;
+  padding: 50px 78px 40px;
+  background: colors.$dark-blue-900 url("stars-background.svg");
+  border-radius: variables.$border-radius-md;
+  position: relative;
+}
+
+.rocket {
+  position: absolute;
+  width: 180px;
+  transform: matrix(0.99, 0.12, -0.12, 0.99, 0, 0) rotate(-4.78deg);
+  top: -54px;
+  left: calc(50% - 261px / 2 + 24px);
+  transition: 0.8s;
+}
+
+.completedSyncText {
+  color: colors.$white;
+}

airbyte-webapp/src/pages/OnboardingPage/components/FirstSuccessfulSync/FirstSuccessfulSync.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { FormattedMessage } from "react-intl";
+
+import { Text } from "components/base/Text";
+
+import styles from "./FirstSuccessfulSync.module.scss";
+
+export const FirstSuccessfulSync: React.FC = () => {
+  return (
+    <div className={styles.container} data-testid="firstSuccessfulSync">
+      <Text as="h3" size="md" centered className={styles.completedSyncText}>
+        <FormattedMessage id="onboarding.syncCompleted" />
+      </Text>
+      <img className={styles.rocket} src="/rocket.png" alt="" />
+    </div>
+  );
+};

airbyte-webapp/src/pages/OnboardingPage/components/FirstSuccessfulSync/index.ts

@@ -0,0 +1 @@
+export * from "./FirstSuccessfulSync";