Fix showing success bunner on app install twice (#5298)

* Add loading and test

* Update test

* Add changeset

.changeset/flat-waves-sip.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+The double success banner no longer appears during app installation

src/apps/hooks/useActiveAppsInstallations.test.ts

@@ -0,0 +1,109 @@
+import { AppsInstallationsQuery } from "@dashboard/graphql";
+import useLocalStorage from "@dashboard/hooks/useLocalStorage";
+import { renderHook } from "@testing-library/react-hooks";
+
+import useActiveAppsInstallations from "./useActiveAppsInstallations";
+
+jest.mock("react-intl", () => ({
+  useIntl: jest.fn(() => ({
+    formatMessage: jest.fn(x => x.defaultMessage),
+  })),
+  defineMessages: jest.fn(x => x),
+}));
+
+jest.mock("@apollo/client", () => ({
+  gql: jest.fn(),
+  useApolloClient: jest.fn(),
+}));
+
+jest.mock("@dashboard/hooks/useLocalStorage");
+jest.mock("@dashboard/graphql", () => ({
+  useAppRetryInstallMutation: jest.fn(() => [jest.fn(), {}]),
+  useAppDeleteFailedInstallationMutation: jest.fn(() => [jest.fn(), {}]),
+}));
+
+jest.useFakeTimers();
+
+describe("useActiveAppsInstallations", () => {
+  it("install app notify should not be called when apps in progress data loading", () => {
+    // Arrange
+    const mockedActiveInstallations = [
+      {
+        id: "1",
+        name: "app1",
+      },
+    ];
+    const appInProgressLoading = true;
+    const appsInProgressData = {
+      appInstallations: [],
+    } as unknown as AppsInstallationsQuery;
+    const mockNotify = jest.fn();
+
+    (useLocalStorage as jest.Mock).mockReturnValue([mockedActiveInstallations, jest.fn()]);
+
+    renderHook(() =>
+      useActiveAppsInstallations({
+        appsInProgressData,
+        appsInProgressRefetch: jest.fn(),
+        appInProgressLoading,
+        appsRefetch: jest.fn(),
+        installedAppNotify: mockNotify,
+        removeInProgressAppNotify: jest.fn(),
+        onInstallSuccess: jest.fn(),
+        onInstallError: jest.fn(),
+        onRemoveInProgressAppSuccess: jest.fn(),
+      }),
+    );
+
+    expect(mockNotify).not.toHaveBeenCalled();
+  });
+
+  it("should call install app notify when apps in progress data loaded and no item found", () => {
+    // Arrange
+    const mockedActiveInstallations = [
+      {
+        id: "1",
+        name: "app1",
+      },
+    ];
+    const appsInProgressData = {
+      appsInstallations: [],
+    } as unknown as AppsInstallationsQuery;
+    const mockNotify = jest.fn();
+
+    jest.useFakeTimers();
+
+    (useLocalStorage as jest.Mock).mockReturnValue([mockedActiveInstallations, jest.fn()]);
+
+    const { rerender } = renderHook(
+      ({ appsInProgressData, appInProgressLoading }) =>
+        useActiveAppsInstallations({
+          appsInProgressData,
+          appsInProgressRefetch: jest.fn(),
+          appInProgressLoading,
+          appsRefetch: jest.fn(),
+          installedAppNotify: mockNotify,
+          removeInProgressAppNotify: jest.fn(),
+          onInstallSuccess: jest.fn(),
+          onInstallError: jest.fn(),
+          onRemoveInProgressAppSuccess: jest.fn(),
+        }),
+      {
+        initialProps: {
+          appsInProgressData: undefined,
+          appInProgressLoading: true,
+        } as {
+          appsInProgressData: AppsInstallationsQuery | undefined;
+          appInProgressLoading: boolean;
+        },
+      },
+    );
+
+    rerender({
+      appsInProgressData,
+      appInProgressLoading: false,
+    });
+
+    expect(mockNotify).toHaveBeenCalled();
+  });
+});

src/apps/hooks/useActiveAppsInstallations.ts

@@ -12,6 +12,7 @@ import { useEffect, useRef } from "react";
 
 interface UseActiveAppsInstallations {
   appsInProgressData: AppsInstallationsQuery | undefined;
+  appInProgressLoading: boolean;
   appsInProgressRefetch: () => void;
   appsRefetch: () => void;
   removeInProgressAppNotify: () => void;
@@ -24,6 +25,7 @@ interface UseActiveAppsInstallations {
 function useActiveAppsInstallations({
   appsInProgressData,
   appsInProgressRefetch,
+  appInProgressLoading,
   appsRefetch,
   installedAppNotify,
   removeInProgressAppNotify,
@@ -130,7 +132,7 @@ function useActiveAppsInstallations({
   useEffect(() => {
     const appsInProgress = appsInProgressData?.appsInstallations || [];
 
-    if (activeInstallations.length && !!appsInProgressData) {
+    if (activeInstallations.length && !appInProgressLoading) {
       let newAppInstalled = false;
 
       activeInstallations.forEach(installation => {
@@ -162,8 +164,14 @@ function useActiveAppsInstallations({
   return {
     handleAppInstallRetry,
     handleRemoveInProgress,
-    retryInstallAppOpts,
-    deleteInProgressAppOpts,
+    retryInstallAppOpts: {
+      status: retryInstallAppOpts.status,
+      loading: retryInstallAppOpts.loading,
+    },
+    deleteInProgressAppOpts: {
+      status: deleteInProgressAppOpts.status,
+      loading: deleteInProgressAppOpts.loading,
+    },
   };
 }
 export default useActiveAppsInstallations;

src/apps/views/AppListView/AppListView.tsx

@@ -69,7 +69,11 @@ export const AppListView: React.FC<Props> = ({ params }) => {
     installedAppsData?.apps?.pageInfo,
     paginationState,
   );
-  const { data: appsInProgressData, refetch: appsInProgressRefetch } = useAppsInstallationsQuery({
+  const {
+    data: appsInProgressData,
+    refetch: appsInProgressRefetch,
+    loading: appInProgressLoading,
+  } = useAppsInstallationsQuery({
     displayLoader: false,
     skip: !hasManagedAppsPermission,
   });
@@ -98,6 +102,7 @@ export const AppListView: React.FC<Props> = ({ params }) => {
   const { handleAppInstallRetry, handleRemoveInProgress, deleteInProgressAppOpts } =
     useActiveAppsInstallations({
       appsInProgressData,
+      appInProgressLoading,
       appsInProgressRefetch,
       appsRefetch,
       installedAppNotify,