Fixed reverted PR: Fix cancel button when it doesn't provide feedback to the user + UX improvements

airbyte-webapp/.eslintrc

@@ -15,6 +15,7 @@
     }
   },
   "rules": {
+    "curly": "error",
     "prettier/prettier": "error",
     "unused-imports/no-unused-imports": "error",
     "import/order": [

airbyte-webapp/src/components/ConfirmationModal/ConfirmationModal.tsx

@@ -2,9 +2,12 @@ import React from "react";
 import { FormattedMessage } from "react-intl";
 import styled from "styled-components";
 
+import { LoadingButton } from "components";
 import { Button } from "components/base/Button";
 import Modal from "components/Modal";
 
+import useLoadingState from "../../hooks/useLoadingState";
+
 const Content = styled.div`
   width: 585px;
   font-size: 14px;
@@ -30,6 +33,7 @@ export interface ConfirmationModalProps {
   submitButtonText: string;
   onSubmit: () => void;
   submitButtonDataId?: string;
+  cancelButtonText?: string;
 }
 
 export const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
@@ -39,18 +43,24 @@ export const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
   onSubmit,
   submitButtonText,
   submitButtonDataId,
-}) => (
-  <Modal onClose={onClose} title={<FormattedMessage id={title} />}>
-    <Content>
-      <FormattedMessage id={text} />
-      <ButtonContent>
-        <ButtonWithMargin onClick={onClose} type="button" secondary>
-          <FormattedMessage id="form.cancel" />
-        </ButtonWithMargin>
-        <Button type="button" danger onClick={onSubmit} data-id={submitButtonDataId}>
-          <FormattedMessage id={submitButtonText} />
-        </Button>
-      </ButtonContent>
-    </Content>
-  </Modal>
-);
+  cancelButtonText,
+}) => {
+  const { isLoading, startAction } = useLoadingState();
+  const onSubmitBtnClick = () => startAction({ action: () => onSubmit() });
+
+  return (
+    <Modal onClose={onClose} title={<FormattedMessage id={title} />}>
+      <Content>
+        <FormattedMessage id={text} />
+        <ButtonContent>
+          <ButtonWithMargin onClick={onClose} type="button" secondary disabled={isLoading}>
+            <FormattedMessage id={cancelButtonText ?? "form.cancel"} />
+          </ButtonWithMargin>
+          <LoadingButton danger onClick={onSubmitBtnClick} data-id={submitButtonDataId} isLoading={isLoading}>
+            <FormattedMessage id={submitButtonText} />
+          </LoadingButton>
+        </ButtonContent>
+      </Content>
+    </Modal>
+  );
+};

airbyte-webapp/src/components/JobItem/components/MainInfo.tsx

@@ -4,14 +4,15 @@ import React from "react";
 import { FormattedDateParts, FormattedMessage, FormattedTimeParts } from "react-intl";
 import styled from "styled-components";
 
-import { Button, StatusIcon } from "components";
+import { LoadingButton, StatusIcon } from "components";
 import { Cell, Row } from "components/SimpleTableComponents";
 
+import { AttemptRead, JobStatus } from "core/request/AirbyteClient";
 import { SynchronousJobReadWithStatus } from "core/request/LogsRequestError";
+import useLoadingState from "hooks/useLoadingState";
 import { JobsWithJobs } from "pages/ConnectionPage/pages/ConnectionItemPage/components/JobsList";
+import { useCancelJob } from "services/job/JobService";
 
-import { AttemptRead, JobStatus } from "../../../core/request/AirbyteClient";
-import { useCancelJob } from "../../../services/job/JobService";
 import { getJobId, getJobStatus } from "../JobItem";
 import AttemptDetails from "./AttemptDetails";
 
@@ -43,7 +44,7 @@ const AttemptCount = styled.div`
   color: ${({ theme }) => theme.dangerColor};
 `;
 
-const CancelButton = styled(Button)`
+const CancelButton = styled(LoadingButton)`
   margin-right: 10px;
   padding: 3px 7px;
   z-index: 1;
@@ -105,11 +106,13 @@ const MainInfo: React.FC<MainInfoProps> = ({
   shortInfo,
   isPartialSuccess,
 }) => {
+  const { isLoading, showFeedback, startAction } = useLoadingState();
   const cancelJob = useCancelJob();
 
-  const onCancelJob = async (event: React.SyntheticEvent) => {
+  const onCancelJob = (event: React.SyntheticEvent) => {
     event.stopPropagation();
-    return cancelJob(Number(getJobId(job)));
+    const jobId = Number(getJobId(job));
+    return startAction({ action: () => cancelJob(jobId) });
   };
 
   const jobStatus = getJobStatus(job);
@@ -152,8 +155,14 @@ const MainInfo: React.FC<MainInfoProps> = ({
       </InfoCell>
       <InfoCell>
         {!shortInfo && isNotCompleted && (
-          <CancelButton secondary onClick={onCancelJob}>
-            <FormattedMessage id="form.cancel" />
+          <CancelButton
+            secondary
+            disabled={isLoading}
+            isLoading={isLoading}
+            wasActive={showFeedback}
+            onClick={onCancelJob}
+          >
+            <FormattedMessage id={showFeedback ? "form.canceling" : "form.cancel"} />
           </CancelButton>
         )}
         <FormattedTimeParts value={getJobCreatedAt(job) * 1000} hour="numeric" minute="2-digit">

airbyte-webapp/src/components/SingletonCard/SingletonCard.tsx

@@ -30,6 +30,7 @@ const Singleton = styled.div<{ hasError?: boolean }>`
   bottom: 49px;
   left: 50%;
   transform: translate(-50%, 0);
+  z-index: 20;
 
   padding: 25px 25px 22px;
 

airbyte-webapp/src/components/ToolTip/ToolTip.tsx

@@ -5,13 +5,13 @@ type ToolTipProps = {
   control: React.ReactNode;
   className?: string;
   disabled?: boolean;
-  cursor?: "pointer" | "help";
+  cursor?: "pointer" | "help" | "not-allowed";
 };
 
-const Control = styled.div<{ $cursor?: "pointer" | "help" }>`
+const Control = styled.div<{ $cursor?: "pointer" | "help" | "not-allowed"; $showCursor?: boolean }>`
   display: inline-block;
   position: relative;
-  cursor: ${({ $cursor }) => $cursor ?? "pointer"};
+  cursor: ${({ $cursor, $showCursor = true }) => ($showCursor && $cursor) ?? "pointer"};
 `;
 
 const ToolTipView = styled.div<{ $disabled?: boolean }>`
@@ -39,7 +39,7 @@ const ToolTipView = styled.div<{ $disabled?: boolean }>`
 
 const ToolTip: React.FC<ToolTipProps> = ({ children, control, className, disabled, cursor }) => {
   return (
-    <Control $cursor={cursor}>
+    <Control $cursor={cursor} $showCursor={!disabled}>
       {control}
       <ToolTipView className={className} $disabled={disabled}>
         {children}

airbyte-webapp/src/components/base/Button/LoadingButton.tsx

@@ -21,28 +21,32 @@ const SymbolSpinner = styled(FontAwesomeIcon)<ButtonProps>`
   position: absolute;
   left: 50%;
   animation: ${SpinAnimation} 1.5s linear 0s infinite;
-  color: ${({ theme }) => theme.primaryColor};
+  color: ${({ theme, danger }) => (danger ? theme.dangerColor : theme.primaryColor)};
   margin: -1px 0 -3px -9px;
 `;
 
 const ButtonView = styled(Button)<ButtonProps>`
   pointer-events: none;
-  background: ${({ theme }) => theme.primaryColor25};
+  background: ${({ theme, danger }) => (danger ? theme.dangerColor25 : theme.primaryColor25)};
   border-color: transparent;
   position: relative;
 `;
 
 const Invisible = styled.div`
   color: rgba(255, 255, 255, 0);
 `;
-
+/*
+ * TODO: this component need to be refactored - we need to have
+ * the only one <Button/> component and set loading state via props
+ * issue: https://github.com/airbytehq/airbyte/issues/12705
+ * */
 const LoadingButton: React.FC<ButtonProps> = (props) => {
   if (props.isLoading) {
     return (
       <ButtonView {...props}>
         {props.isLoading ? (
           <>
-            <SymbolSpinner icon={faCircleNotch} />
+            <SymbolSpinner icon={faCircleNotch} danger={props.danger} />
             <Invisible>{props.children}</Invisible>
           </>
         ) : (

airbyte-webapp/src/hooks/services/ConfirmationModal/ConfirmationModalService.tsx

@@ -65,6 +65,7 @@ export const ConfirmationModalService = ({ children }: { children: React.ReactNo
           onSubmit={state.confirmationModal.onSubmit}
           submitButtonText={state.confirmationModal.submitButtonText}
           submitButtonDataId={state.confirmationModal.submitButtonDataId}
+          cancelButtonText={state.confirmationModal.cancelButtonText}
         />
       ) : null}
     </>

airbyte-webapp/src/hooks/useLoadingState.tsx

@@ -1,28 +1,48 @@
 import { useState } from "react";
+import { useIntl } from "react-intl";
+
+import { useNotificationService } from "./services/Notification";
 
 const useLoadingState = (): {
   isLoading: boolean;
   startAction: ({ action, feedbackAction }: { action: () => void; feedbackAction?: () => void }) => Promise<void>;
   showFeedback: boolean;
 } => {
+  const { formatMessage } = useIntl();
+  const { registerNotification } = useNotificationService();
   const [isLoading, setIsLoading] = useState(false);
   const [showFeedback, setShowFeedback] = useState(false);
 
+  const errorNotificationId = "error.somethingWentWrong";
+  const errorNotification = (message: string) => ({
+    isError: true,
+    title: formatMessage({ id: `notifications.${errorNotificationId}` }),
+    text: message,
+    id: errorNotificationId,
+  });
+
   const startAction = async ({ action, feedbackAction }: { action: () => void; feedbackAction?: () => void }) => {
-    setIsLoading(true);
-    setShowFeedback(false);
+    try {
+      setIsLoading(true);
+      setShowFeedback(false);
 
-    await action();
+      await action();
 
-    setIsLoading(false);
-    setShowFeedback(true);
+      setIsLoading(false);
+      setShowFeedback(true);
 
-    setTimeout(() => {
-      setShowFeedback(false);
-      if (feedbackAction) {
-        feedbackAction();
-      }
-    }, 2000);
+      setTimeout(() => {
+        setShowFeedback(false);
+        if (feedbackAction) {
+          feedbackAction();
+        }
+      }, 2000);
+    } catch (error) {
+      const message = error?.message || formatMessage({ id: "notifications.error.noMessage" });
+
+      setIsLoading(false);
+      registerNotification(errorNotification(message));
+    }
   };
 
   return { isLoading, showFeedback, startAction };

airbyte-webapp/src/locales/en.json

@@ -1,6 +1,8 @@
 {
   "webapp.cannotReachServer": "Cannot reach server. The server may still be starting up.",
   "notifications.error.health": "Cannot reach server",
+  "notifications.error.somethingWentWrong": "Something went wrong",
+  "notifications.error.noMessage": "No error message",
 
   "sidebar.sources": "Sources",
   "sidebar.destinations": "Destinations",
@@ -50,6 +52,7 @@
   "form.dataSync.readonly": "Activated streams",
   "form.dataSync.message": "Don’t worry! You’ll be able to change this later on.",
   "form.cancel": "Cancel",
+  "form.canceling": "Canceling",
   "form.submit": "Submit",
   "form.delete": "Delete",
   "form.change": "Change",

airbyte-webapp/src/packages/firebaseReact/sdk.tsx

@@ -13,11 +13,15 @@ type FirebaseSdks = Auth;
 
 function getSdkProvider<Sdk extends FirebaseSdks>(SdkContext: React.Context<Sdk | undefined>) {
   return function SdkProvider(props: React.PropsWithChildren<{ sdk: Sdk }>) {
-    if (!props.sdk) throw new Error("no sdk provided");
+    if (!props.sdk) {
+      throw new Error("no sdk provided");
+    }
 
     const contextualAppName = useFirebaseApp().name;
     const sdkAppName = props?.sdk?.app?.name;
-    if (sdkAppName !== contextualAppName) throw new Error("sdk was initialized with a different firebase app");
+    if (sdkAppName !== contextualAppName) {
+      throw new Error("sdk was initialized with a different firebase app");
+    }
 
     return <SdkContext.Provider value={props.sdk} {...props} />;
   };