Add div to ensure grid-display works correctly (#13394)

* Add div to ensure grid-display works correctly * Remove redundant showSpinnerTitle prop and add PageSpinner when entering uiEditor
Altinn · Aug 29, 2024 · bc4ee37 · bc4ee37
1 parent 79b2d03
commit bc4ee37
Show file tree

Hide file tree

Showing 14 changed files with 59 additions and 54 deletions.
diff --git a/frontend/app-development/features/dataModelling/DataModelling.tsx b/frontend/app-development/features/dataModelling/DataModelling.tsx
@@ -21,9 +21,7 @@ export function DataModelling({ createPathOption = false }: DataModellingProps):
 
   switch (mergeQueryStatuses(jsonStatus, xsdStatus)) {
     case 'pending':
-      return (
-        <StudioPageSpinner showSpinnerTitle={false} spinnerTitle={t('data_modelling.loading')} />
-      );
+      return <StudioPageSpinner spinnerTitle={t('data_modelling.loading')} />;
     case 'error':
       return (
         <StudioCenter>

diff --git a/...d/app-development/features/dataModelling/SchemaEditorWithToolbar/SelectedSchemaEditor.tsx b/...d/app-development/features/dataModelling/SchemaEditorWithToolbar/SelectedSchemaEditor.tsx
@@ -27,12 +27,7 @@ export const SelectedSchemaEditor = ({ modelPath }: SelectedSchemaEditorProps) =
 
   switch (status) {
     case 'pending':
-      return (
-        <StudioPageSpinner
-          showSpinnerTitle={false}
-          spinnerTitle={t('schema_editor.loading_page')}
-        />
-      );
+      return <StudioPageSpinner spinnerTitle={t('schema_editor.loading_page')} />;
 
     case 'error':
       return (

diff --git a/frontend/app-development/features/processEditor/ProcessEditor.tsx b/frontend/app-development/features/processEditor/ProcessEditor.tsx
@@ -113,7 +113,7 @@ export const ProcessEditor = (): React.ReactElement => {
   };
 
   if (appLibDataLoading || appMetadataPending) {
-    return <StudioPageSpinner spinnerTitle={t('process_editor.loading')} showSpinnerTitle />;
+    return <StudioPageSpinner spinnerTitle={t('process_editor.loading')} />;
   }
 
   // TODO: Handle error will be handled better after issue #10735 is resolved

diff --git a/frontend/app-development/features/textEditor/TextEditor.tsx b/frontend/app-development/features/textEditor/TextEditor.tsx
@@ -50,9 +50,7 @@ export const TextEditor = () => {
   const { mutate: upsertTextResource } = useUpsertTextResourceMutation(org, app);
 
   if (isInitialLoadingLang || !textResources) {
-    return (
-      <StudioPageSpinner showSpinnerTitle={false} spinnerTitle={t('text_editor.loading_page')} />
-    );
+    return <StudioPageSpinner spinnerTitle={t('text_editor.loading_page')} />;
   }
 
   return (

diff --git a/frontend/app-development/layout/PageLayout.tsx b/frontend/app-development/layout/PageLayout.tsx
@@ -35,7 +35,7 @@ export const PageLayout = (): React.ReactNode => {
   if (isRepoStatusPending || isUserPending) {
     return (
       <StudioCenter>
-        <StudioPageSpinner showSpinnerTitle={false} spinnerTitle={t('repo_status.loading')} />
+        <StudioPageSpinner spinnerTitle={t('repo_status.loading')} />
       </StudioCenter>
     );
   }

diff --git a/frontend/app-development/router/routes.test.tsx b/frontend/app-development/router/routes.test.tsx
@@ -11,6 +11,8 @@ import { app, org } from '@studio/testing/testids';
 import { SettingsModalContextProvider } from '../contexts/SettingsModalContext';
 import { PreviewContextProvider } from '../contexts/PreviewContext';
 import { AppDevelopmentContextProvider } from '../contexts/AppDevelopmentContext';
+import { textMock } from '@studio/testing/mocks/i18nMock';
+import type { QueryClient } from '@tanstack/react-query';
 
 // Mocks:
 jest.mock('@altinn/ux-editor-v3/SubApp', () => ({
@@ -35,24 +37,30 @@ describe('routes', () => {
     it.each(testCases)(
       'Renders the %s schema editor page when the app frontend version is %s',
       (expectedPackage, frontendVersion) => {
-        renderUiEditor(frontendVersion);
+        const appVersion: AppVersion = {
+          frontendVersion,
+          backendVersion: '7.0.0',
+        };
+        const queryClient = createQueryClientMock();
+        queryClient.setQueryData([QueryKey.AppVersion, org, app], appVersion);
+        renderUiEditor(queryClient);
         expect(screen.getByTestId(expectedPackage)).toBeInTheDocument();
       },
     );
 
-    const renderUiEditor = (frontendVersion: string | null) =>
-      renderSubapp(RoutePaths.UIEditor, frontendVersion);
+    it('renders a loading spinner while fetching frontend version', () => {
+      renderUiEditor();
+      expect(screen.getByText(textMock('ux_editor.loading_page'))).toBeInTheDocument();
+    });
+
+    const renderUiEditor = (queryClient: QueryClient = createQueryClientMock()) =>
+      renderSubapp(RoutePaths.UIEditor, queryClient);
   });
 });
 
-const renderSubapp = (path: RoutePaths, frontendVersion: string = null) => {
+const renderSubapp = (path: RoutePaths, queryClient: QueryClient) => {
   const Subapp = routerRoutes.find((route) => route.path === path)!.subapp;
-  const appVersion: AppVersion = {
-    frontendVersion,
-    backendVersion: '7.0.0',
-  };
-  const queryClient = createQueryClientMock();
-  queryClient.setQueryData([QueryKey.AppVersion, org, app], appVersion);
+
   return render(
     <ServicesContextProvider {...queriesMock} client={queryClient}>
       <SettingsModalContextProvider>

diff --git a/frontend/app-development/router/routes.tsx b/frontend/app-development/router/routes.tsx
@@ -12,6 +12,8 @@ import { useAppVersionQuery } from 'app-shared/hooks/queries';
 import React from 'react';
 import { usePreviewContext } from '../contexts/PreviewContext';
 import { useLayoutContext } from '../contexts/LayoutContext';
+import { StudioPageSpinner } from '@studio/components';
+import { useTranslation } from 'react-i18next';
 
 interface IRouteProps {
   headerTextKey?: string;
@@ -38,10 +40,15 @@ const isLatestFrontendVersion = (version: AppVersion): boolean =>
 
 const UiEditor = () => {
   const { org, app } = useStudioEnvironmentParams();
-  const { data: version } = useAppVersionQuery(org, app);
+  const { t } = useTranslation();
+  const { data: version, isPending: fetchingVersionIsPending } = useAppVersionQuery(org, app);
   const { shouldReloadPreview, previewHasLoaded } = usePreviewContext();
   const { setSelectedLayoutSetName } = useLayoutContext();
 
+  if (fetchingVersionIsPending) {
+    return <StudioPageSpinner spinnerTitle={t('ux_editor.loading_page')} />;
+  }
+
   if (!version) return null;
 
   return isLatestFrontendVersion(version) ? (

diff --git a/frontend/dashboard/app/App.tsx b/frontend/dashboard/app/App.tsx
@@ -79,7 +79,7 @@ export const App = (): JSX.Element => {
 
   return (
     <div className={classes.appDashboardSpinner}>
-      <StudioPageSpinner showSpinnerTitle={false} spinnerTitle={t('dashboard.loading')} />
+      <StudioPageSpinner spinnerTitle={t('dashboard.loading')} />
     </div>
   );
 };
diff --git a/frontend/libs/studio-components/src/components/StudioPageSpinner/StudioPageSpinner.test.tsx b/frontend/libs/studio-components/src/components/StudioPageSpinner/StudioPageSpinner.test.tsx
@@ -14,7 +14,7 @@ describe('StudioPageSpinner', () => {
   afterEach(jest.clearAllMocks);
 
   it('should render default loading message as accessibility title when spinnerText is not provided', () => {
-    render(<StudioPageSpinner spinnerTitle={mockSpinnerText} showSpinnerTitle={false} />);
+    render(<StudioPageSpinner spinnerTitle={mockSpinnerText} />);
 
     expect(screen.getByTitle(mockSpinnerText));
 

diff --git a/frontend/packages/ux-editor-v3/src/App.tsx b/frontend/packages/ux-editor-v3/src/App.tsx
@@ -87,5 +87,5 @@ export function App() {
       </FormItemContextProvider>
     );
   }
-  return <StudioPageSpinner showSpinnerTitle={false} spinnerTitle={t('ux_editor.loading_page')} />;
+  return <StudioPageSpinner spinnerTitle={t('ux_editor.loading_page')} />;
 }
diff --git a/frontend/packages/ux-editor-v3/src/containers/FormDesigner.tsx b/frontend/packages/ux-editor-v3/src/containers/FormDesigner.tsx
@@ -156,7 +156,5 @@ export const FormDesigner = ({
       </DragAndDropTree.Provider>
     );
   }
-  return (
-    <StudioPageSpinner showSpinnerTitle={false} spinnerTitle={t('ux_editor.loading_form_layout')} />
-  );
+  return <StudioPageSpinner spinnerTitle={t('ux_editor.loading_form_layout')} />;
 };
diff --git a/frontend/packages/ux-editor/src/App.tsx b/frontend/packages/ux-editor/src/App.tsx
@@ -47,31 +47,36 @@ export function App() {
   const t = useText();
   const { org, app } = useStudioEnvironmentParams();
   const { selectedFormLayoutSetName } = useAppContext();
-  const { isSuccess: areWidgetsFetched, isError: widgetFetchedError } = useWidgetsQuery(org, app);
-  const { isSuccess: areLayoutSetsFetched, isError: layoutSetsFetchedError } = useLayoutSetsQuery(
+  const { status: widgetsStatus, isError: widgetFetchedError } = useWidgetsQuery(org, app);
+  const { status: layoutSetsStatus, isError: layoutSetsFetchedError } = useLayoutSetsQuery(
     org,
     app,
   );
-  const { isSuccess: isDataModelFetched, isError: dataModelFetchedError } =
-    useDataModelMetadataQuery({
-      org,
-      app,
-      layoutSetName: selectedFormLayoutSetName,
-      hideDefault: true,
-    });
-  const { isSuccess: areTextResourcesFetched, data: textResources } = useTextResourcesQuery(
+  const { status: dataModelStatus, isError: dataModelFetchedError } = useDataModelMetadataQuery({
     org,
     app,
-  );
+    layoutSetName: selectedFormLayoutSetName,
+    hideDefault: true,
+  });
+  const { status: textsStatus, data: textResources } = useTextResourcesQuery(org, app);
 
   const { doReloadPreview } = usePreviewContext();
   useEffect(() => {
     doReloadPreview();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [textResources]);
 
-  const componentIsReady = areWidgetsFetched && isDataModelFetched && areTextResourcesFetched;
-  const componentHasError = dataModelFetchedError || widgetFetchedError;
+  const componentIsPending =
+    widgetsStatus === 'pending' ||
+    layoutSetsStatus === 'pending' ||
+    dataModelStatus === 'pending' ||
+    textsStatus === 'pending';
+  const componentIsReady =
+    widgetsStatus === 'success' &&
+    layoutSetsStatus === 'success' &&
+    dataModelStatus === 'success' &&
+    textsStatus === 'success';
+  const componentHasError = widgetsStatus === 'error' || dataModelStatus === 'error';
 
   const errors: ErrorKinds = {
     layoutSetsError: layoutSetsFetchedError,
@@ -86,10 +91,10 @@ export function App() {
     return <StudioPageError title={mappedError.title} message={mappedError.message} />;
   }
 
-  if (areLayoutSetsFetched) {
+  if (!componentIsPending) {
     // If layoutSets are successfully fetched, show layoutSetsSelector and app
     return (
-      <>
+      <div>
         <FormDesignerToolbar />
         {componentHasError && (
           <StudioPageError title={mappedError.title} message={mappedError.message} />
@@ -99,10 +104,9 @@ export function App() {
             <FormDesigner />
           </FormItemContextProvider>
         )}
-      </>
+      </div>
     );
   }
 
-  // If any requests are loading show spinner on whole page
-  return <StudioPageSpinner showSpinnerTitle={false} spinnerTitle={t('ux_editor.loading_page')} />;
+  return <StudioPageSpinner spinnerTitle={t('ux_editor.loading_page')} />;
 }
diff --git a/frontend/packages/ux-editor/src/containers/FormDesigner.tsx b/frontend/packages/ux-editor/src/containers/FormDesigner.tsx
@@ -198,7 +198,5 @@ export const FormDesigner = (): JSX.Element => {
       </DragAndDropTree.Provider>
     );
   }
-  return (
-    <StudioPageSpinner showSpinnerTitle={false} spinnerTitle={t('ux_editor.loading_form_layout')} />
-  );
+  return <StudioPageSpinner spinnerTitle={t('ux_editor.loading_form_layout')} />;
 };
diff --git a/frontend/packages/ux-editor/src/hooks/queries/useDataModelMetadataQuery.ts b/frontend/packages/ux-editor/src/hooks/queries/useDataModelMetadataQuery.ts
@@ -1,5 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import type { MutationMeta, UseQueryResult } from '@tanstack/react-query';
+import type { UseQueryResult } from '@tanstack/react-query';
 import type { DataModelFieldElement } from 'app-shared/types/DataModelFieldElement';
 import { useServicesContext } from 'app-shared/contexts/ServicesContext';
 import { QueryKey } from 'app-shared/types/QueryKey';
@@ -19,7 +19,6 @@ type QueryOptions = {
 export const useDataModelMetadataQuery = (
   { org, app, layoutSetName, dataModelName, hideDefault }: UseDataModelMetadataQuery,
   options: QueryOptions = {},
-  meta?: MutationMeta,
 ): UseQueryResult<DataModelFieldElement[]> => {
   const { getDataModelMetadata } = useServicesContext();