fix(deps): update dependency @tanstack/react-query to v5 (#11511)

* fix(deps): update dependency @tanstack/react-query to v5 --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: LAPTOP-S0QU96IH\david <[email protected]>
Altinn · Nov 30, 2023 · 1b9dee3 · 1b9dee3
1 parent 7e50f22
commit 1b9dee3
Show file tree

Hide file tree

Showing 118 changed files with 793 additions and 629 deletions.
diff --git a/frontend/app-development/App.test.tsx b/frontend/app-development/App.test.tsx
@@ -11,6 +11,8 @@ import { queriesMock } from 'app-shared/mocks/queriesMock';
 jest.mock('../language/src/nb.json', jest.fn());
 jest.mock('../language/src/en.json', jest.fn());
 
+// Mocking console.error due to Tanstack Query removing custom logger between V4 and v5 see issue: #11692
+const realConsole = console;
 const render = async (remainingMinutes: number = 40) => {
   renderWithProviders(<App />, {
     startUrl: `${APP_DEVELOPMENT_BASENAME}/my-org/my-app`,
@@ -25,7 +27,16 @@ const render = async (remainingMinutes: number = 40) => {
   });
 };
 describe('App', () => {
-  afterEach(() => jest.clearAllMocks());
+  beforeEach(() => {
+    global.console = {
+      ...console,
+      error: jest.fn(),
+    };
+  });
+  afterEach(() => {
+    global.console = realConsole;
+    jest.clearAllMocks();
+  });
 
   it('should present popover with options to log out or stay logged in when session about to expire ', async () => {
     render(6);

diff --git a/frontend/app-development/features/administration/components/Administration.test.tsx b/frontend/app-development/features/administration/components/Administration.test.tsx
@@ -11,7 +11,20 @@ const org = 'org';
 const app = 'app';
 const title = 'test';
 
+// Mocking console.error due to Tanstack Query removing custom logger between V4 and v5 see issue: #11692
+const realConsole = console;
+
 describe('Administration', () => {
+  beforeEach(() => {
+    global.console = {
+      ...console,
+      error: jest.fn(),
+    };
+  });
+  afterEach(() => {
+    global.console = realConsole;
+    jest.clearAllMocks();
+  });
   it('renders component', async () => {
     render({
       getEnvironments: jest.fn().mockImplementation(() => Promise.resolve([])),
@@ -34,8 +47,8 @@ describe('Administration', () => {
 
   it('should display error message if fetching goes wrong', async () => {
     render({
-      getOrgList: jest.fn().mockImplementation(() => Promise.reject()),
-      getAppConfig: jest.fn().mockImplementation(() => Promise.reject()),
+      getAppConfig: () => Promise.reject(),
+      getOrgList: () => Promise.reject(),
     });
     expect(await screen.findByText(textMock('administration.fetch_title_error_message')));
   });

diff --git a/frontend/app-development/features/administration/components/Administration.tsx b/frontend/app-development/features/administration/components/Administration.tsx
@@ -17,26 +17,26 @@ import { PageContainer } from 'app-shared/components/PageContainer/PageContainer
 export const Administration = () => {
   const { org, app } = useStudioUrlParams();
   const {
-    data: orgs = { orgs: {} },
-    isLoading: isLoadingOrgs,
+    data: orgs,
+    isPending: isPendingOrgs,
     isError: isOrgsError,
   } = useOrgListQuery({ hideDefaultError: true });
 
-  const selectedOrg = orgs.orgs[org];
+  const selectedOrg = orgs?.orgs[org];
   const hasEnvironments = selectedOrg?.environments?.length > 0;
 
   const {
     data: appConfigData,
     isError: isAppConfigError,
-    isLoading: isLoadingAppConfig,
+    isPending: isPendingAppConfig,
   } = useAppConfigQuery(org, app, { hideDefaultError: true });
   const { t } = useTranslation();
 
   if (isAppConfigError || isOrgsError) {
     toast.error(t('administration.fetch_title_error_message'));
   }
 
-  if (isLoadingAppConfig || isLoadingOrgs) {
+  if (isPendingAppConfig || isPendingOrgs) {
     return (
       <Center>
         <AltinnSpinner spinnerText={t('general.loading')} className={classes.spinner} />

diff --git a/frontend/app-development/features/administration/components/AppEnvironments.tsx b/frontend/app-development/features/administration/components/AppEnvironments.tsx
@@ -16,16 +16,16 @@ export const AppEnvironments = () => {
 
   const {
     data: environmentList = [],
-    isLoading: envIsLoading,
+    isPending: envIsPending,
     isError: envIsError,
   } = useEnvironmentsQuery({ hideDefaultError: true });
   const {
     data: orgs = { orgs: {} },
-    isLoading: orgsIsLoading,
+    isPending: orgsIsPending,
     isError: orgsIsError,
   } = useOrgListQuery({ hideDefaultError: true });
 
-  if (envIsLoading || orgsIsLoading) return <AltinnSpinner />;
+  if (envIsPending || orgsIsPending) return <AltinnSpinner />;
 
   if (envIsError || orgsIsError)
     return <Alert severity='danger'>{t('administration.app_environments_error')}</Alert>;

diff --git a/frontend/app-development/features/administration/components/AppLogs.tsx b/frontend/app-development/features/administration/components/AppLogs.tsx
@@ -16,17 +16,17 @@ export const AppLogs = () => {
 
   const {
     data: appDeployments = [],
-    isLoading: isLoadingDeploys,
+    isPending: isPendingDeploys,
     isError: deploysHasError,
   } = useAppDeploymentsQuery(org, app, { hideDefaultError: true });
 
   const {
     data: environmentList = [],
-    isLoading: envIsLoading,
+    isPending: envIsPending,
     isError: envIsError,
   } = useEnvironmentsQuery({ hideDefaultError: true });
 
-  if (isLoadingDeploys || envIsLoading) return <AltinnSpinner />;
+  if (isPendingDeploys || envIsPending) return <AltinnSpinner />;
 
   if (deploysHasError || envIsError)
     return <Alert severity='danger'>{t('administration.app_logs_error')}</Alert>;

diff --git a/frontend/app-development/features/administration/components/AppStatus.tsx b/frontend/app-development/features/administration/components/AppStatus.tsx
@@ -22,7 +22,7 @@ export const AppStatus = ({ envName, envType }: AppStatusProps) => {
 
   const {
     data: appDeployments = [],
-    isLoading: deploysAreLoading,
+    isPending: isPendingDeploys,
     isError: deploysAreError,
   } = useAppDeploymentsQuery(org, app, { hideDefaultError: true });
 
@@ -63,7 +63,7 @@ export const AppStatus = ({ envName, envType }: AppStatusProps) => {
     });
   };
 
-  if (deploysAreLoading) return <AltinnSpinner />;
+  if (isPendingDeploys) return <AltinnSpinner />;
 
   if (deploysAreError)
     return (

diff --git a/frontend/app-development/features/administration/components/News.tsx b/frontend/app-development/features/administration/components/News.tsx
@@ -6,10 +6,10 @@ import { useTranslation } from 'react-i18next';
 import classes from './News.module.css';
 
 export const News = () => {
-  const { data: newsList, isLoading, isError } = useNewsListQuery();
+  const { data: newsList, isPending, isError } = useNewsListQuery();
   const { t } = useTranslation();
 
-  if (isLoading) {
+  if (isPending) {
     return (
       <NewsTemplate>
         <AltinnSpinner spinnerText={t('administration.fetch_news_loading_message')} />

diff --git a/frontend/app-development/features/administration/components/ResetRepoModal.tsx b/frontend/app-development/features/administration/components/ResetRepoModal.tsx
@@ -90,8 +90,8 @@ export function ResetRepoModal(props: IResetRepoModalProps) {
             autoFocus
             onKeyUp={handleOnKeypressEnter}
           />
-          {repoResetMutation.isLoading && <AltinnSpinner />}
-          {!repoResetMutation.isLoading && (
+          {repoResetMutation.isPending && <AltinnSpinner />}
+          {!repoResetMutation.isPending && (
             <div className={classes.buttonContainer}>
               <Button
                 color='danger'

diff --git a/frontend/app-development/features/appPublish/containers/deployContainer.tsx b/frontend/app-development/features/appPublish/containers/deployContainer.tsx
@@ -22,17 +22,23 @@ import { useStudioUrlParams } from 'app-shared/hooks/useStudioUrlParams';
 export const DeployContainerComponent = () => {
   const { org, app } = useStudioUrlParams();
   const createAppDeploymentErrors: any = useAppSelector(
-    (state) => state.appDeployments.createAppDeploymentErrors
+    (state) => state.appDeployments.createAppDeploymentErrors,
   );
 
-  const { data: appDeployments = [], isLoading: deploysAreLoading } = useAppDeploymentsQuery(org, app);
-  const { data: environmentList = [], isLoading: envIsLoading } = useEnvironmentsQuery();
-  const { data: releases = [], isLoading: releasesIsLoading } = useAppReleasesQuery(org, app);
-  const { data: orgs = { orgs: {} }, isLoading: orgsIsLoading } = useOrgListQuery();
-  const { data: permissions, isLoading: permissionsIsLoading } = useDeployPermissionsQuery(org, app);
+  const { data: appDeployments = [], isPending: isDeploysPending } = useAppDeploymentsQuery(
+    org,
+    app,
+  );
+  const { data: environmentList = [], isPending: isEnvPending } = useEnvironmentsQuery();
+  const { data: releases = [], isPending: isReleasesPending } = useAppReleasesQuery(org, app);
+  const { data: orgs = { orgs: {} }, isPending: isOrgsPending } = useOrgListQuery();
+  const { data: permissions, isPending: isPermissionsPending } = useDeployPermissionsQuery(
+    org,
+    app,
+  );
 
-  const isLoading = () =>
-    releasesIsLoading || orgsIsLoading || permissionsIsLoading || envIsLoading || deploysAreLoading;
+  const isPending =
+    isReleasesPending || isOrgsPending || isPermissionsPending || isEnvPending || isDeploysPending;
 
   const orgName: string = useMemo(() => {
     let name = '';
@@ -46,10 +52,10 @@ export const DeployContainerComponent = () => {
     () =>
       orgs?.orgs[org]?.environments
         .map((envName: string) =>
-          environmentList.find((env: DeployEnvironment) => env.name === envName)
+          environmentList.find((env: DeployEnvironment) => env.name === envName),
         )
         .filter((element: any) => element != null),
-    [orgs, org, environmentList]
+    [orgs, org, environmentList],
   );
 
   const imageOptions: ImageOption[] = useMemo(
@@ -60,10 +66,10 @@ export const DeployContainerComponent = () => {
           value: image.tagName,
           label: `Version ${image.tagName} (${formatDateTime(image.created)})`,
         })),
-    [releases]
+    [releases],
   );
 
-  if (isLoading()) {
+  if (isPending) {
     return (
       <div className={classes.deployContainer}>
         <AltinnContentLoader width={900} height={320}>
@@ -79,7 +85,7 @@ export const DeployContainerComponent = () => {
     <div className={classes.deployContainer}>
       {deployEnvironments.map((env: DeployEnvironment, index: number) => {
         const deploymentsInEnv: IDeployment[] = appDeployments.filter(
-          (x) => x.envName === env.name
+          (x) => x.envName === env.name,
         );
         return (
           <AppDeploymentComponent

diff --git a/frontend/app-development/features/appPublish/containers/releaseContainer.tsx b/frontend/app-development/features/appPublish/containers/releaseContainer.tsx
@@ -25,8 +25,8 @@ export function ReleaseContainer() {
   const [popoverOpenHover, setPopoverOpenHover] = useState<boolean>(false);
 
   const { data: releases = [] } = useAppReleasesQuery(org, app);
-  const { data: repoStatus, isLoading: repoStatusIsLoading } = useRepoStatusQuery(org, app);
-  const { data: masterBranchStatus, isLoading: masterBranchStatusIsLoading } = useBranchStatusQuery(
+  const { data: repoStatus, isPending: isRepoStatusPending } = useRepoStatusQuery(org, app);
+  const { data: masterBranchStatus, isPending: masterBranchStatusIsPending } = useBranchStatusQuery(
     org,
     app,
     'master',
@@ -47,7 +47,9 @@ export function ReleaseContainer() {
     const interval = setInterval(async () => {
       const index = releases.findIndex((release) => release.build.status !== BuildStatus.completed);
       if (index > -1) {
-        await queryClient.invalidateQueries([QueryKey.AppReleases, org, app]);
+        await queryClient.invalidateQueries({
+          queryKey: [QueryKey.AppReleases, org, app],
+        });
       }
     }, 7777);
     return () => clearInterval(interval);
@@ -58,7 +60,7 @@ export function ReleaseContainer() {
   const handlePopoverClose = () => setPopoverOpenHover(false);
 
   function renderCreateRelease() {
-    if (repoStatusIsLoading || masterBranchStatusIsLoading) {
+    if (isRepoStatusPending || masterBranchStatusIsPending) {
       return (
         <div style={{ padding: '2rem' }}>
           <div>

diff --git a/frontend/app-development/features/appPublish/pages/deployPage.tsx b/frontend/app-development/features/appPublish/pages/deployPage.tsx
@@ -12,10 +12,13 @@ import { useStudioUrlParams } from 'app-shared/hooks/useStudioUrlParams';
 export function DeployPage() {
   const { org, app } = useStudioUrlParams();
   const { t } = useTranslation();
-  const { data: orgs = { orgs: {} }, isLoading: isLoadingOrgs } = useOrgListQuery();
-  const { data: permissions, isLoading: permissionsIsLoading } = useDeployPermissionsQuery(org, app);
+  const { data: orgs = { orgs: {} }, isPending: isOrgsPending } = useOrgListQuery();
+  const { data: permissions, isPending: isPermissionsPending } = useDeployPermissionsQuery(
+    org,
+    app,
+  );
   useInvalidator();
-  if (isLoadingOrgs || permissionsIsLoading) {
+  if (isOrgsPending || isPermissionsPending) {
     return (
       <div style={{ height: 'calc(100% - 111px)' }}>
         <AltinnContentLoader width={1200} height={600}>
@@ -48,9 +51,7 @@ export function DeployPage() {
   if (!permissions || !permissions.length) {
     return (
       <InfoCard headerText={t('app_publish.no_team')} shadow={true}>
-        <div style={{ paddingTop: '2.4rem' }}>
-          {t('app_publish.no_team_info')}
-        </div>
+        <div style={{ paddingTop: '2.4rem' }}>{t('app_publish.no_team_info')}</div>
       </InfoCard>
     );
   }

diff --git a/frontend/app-development/features/dataModelling/DataModelling.tsx b/frontend/app-development/features/dataModelling/DataModelling.tsx
@@ -13,16 +13,14 @@ interface DataModellingProps {
   createPathOption?: boolean;
 }
 
-export function DataModelling({
-  createPathOption = false,
-}: DataModellingProps): ReactNode {
+export function DataModelling({ createPathOption = false }: DataModellingProps): ReactNode {
   const { t } = useTranslation();
   const { org, app } = useParams<{ org: string; app: string }>();
   const { status: jsonStatus, error: jsonError, data: jsonData } = useDatamodelsJsonQuery(org, app);
   const { status: xsdStatus, error: xsdError, data: xsdData } = useDatamodelsXsdQuery(org, app);
 
   switch (mergeQueryStatuses(jsonStatus, xsdStatus)) {
-    case 'loading':
+    case 'pending':
       return <PageSpinner />;
     case 'error':
       return (
@@ -37,12 +35,7 @@ export function DataModelling({
       );
     case 'success': {
       const data = mergeJsonAndXsdData(jsonData, xsdData);
-      return (
-        <SchemaEditorWithToolbar
-          createPathOption={createPathOption}
-          datamodels={data}
-        />
-      );
+      return <SchemaEditorWithToolbar createPathOption={createPathOption} datamodels={data} />;
     }
   }
 }
diff --git a/...d/app-development/features/dataModelling/SchemaEditorWithToolbar/SelectedSchemaEditor.tsx b/...d/app-development/features/dataModelling/SchemaEditorWithToolbar/SelectedSchemaEditor.tsx
@@ -26,7 +26,7 @@ export const SelectedSchemaEditor = ({
 
   const render = () => {
     switch (status) {
-      case 'loading':
+      case 'pending':
         return <PageSpinner />;
 
       case 'error':
@@ -44,7 +44,7 @@ export const SelectedSchemaEditor = ({
         return <SchemaEditor modelName={modelName} />;
     }
   };
-  
+
   return (
     <SchemaEditorApp datamodels={datamodels} jsonSchema={data} save={mutate} modelPath={modelPath}>
       {render()}

diff --git a/...opment/features/dataModelling/SchemaEditorWithToolbar/TopToolbar/GenerateModelsButton.tsx b/...opment/features/dataModelling/SchemaEditorWithToolbar/TopToolbar/GenerateModelsButton.tsx
@@ -12,7 +12,7 @@ export interface GenerateModelsButtonProps {
 
 export const GenerateModelsButton = ({ modelPath }: GenerateModelsButtonProps) => {
   const { data } = useSchemaQuery(modelPath);
-  const { mutate, isLoading } = useGenerateModelsMutation(modelPath);
+  const { mutate, isPending } = useGenerateModelsMutation(modelPath);
   const { t } = useTranslation();
 
   const handleGenerateButtonClick = () => {
@@ -25,7 +25,7 @@ export const GenerateModelsButton = ({ modelPath }: GenerateModelsButtonProps) =
 
   return (
     <>
-      {isLoading ? (
+      {isPending ? (
         <Spinner title={t('general.saving')} />
       ) : (
         <Button