fix(admin): infinite loading when production is missing (#18313)

Author: mlqn

src/Designer/frontend/admin/features/apps/pages/apps/components/AppsTable.test.tsx

@@ -41,13 +41,17 @@ jest.mock('axios', () => ({
 jest.mock('admin/features/apps/hooks/useQueryParamState');
 
 const mockSetRange = jest.fn();
+const mockSetEnvironment = jest.fn();
 
 describe('AppsTable', () => {
   beforeEach(() => {
     jest.mocked(useQueryParamState).mockImplementation((key, defaultValue) => {
       if (key === 'range') {
         return [1440, mockSetRange];
       }
+      if (key === 'environment') {
+        return [defaultValue, mockSetEnvironment];
+      }
       return [defaultValue, jest.fn()];
     });
   });
@@ -169,6 +173,29 @@ describe('AppsTable', () => {
     });
   });
 
+  describe('environment fallback', () => {
+    beforeEach(() => {
+      jest.mocked(useQueryParamState).mockImplementation((key, defaultValue) => {
+        if (key === 'range') return [1440, mockSetRange];
+        if (key === 'environment') return ['production', mockSetEnvironment];
+        return [defaultValue, jest.fn()];
+      });
+    });
+
+    it('should render the first available environment and update selectedEnvironment when it is not available', () => {
+      const queryClient = createQueryClientMock();
+      queryClient.setQueryData([QueryKey.PublishedApps, org], {
+        tt02: [{ app, env: 'tt02', org, version: '1' }],
+      });
+
+      renderAppsTable(queryClient);
+
+      expect(screen.getByRole('tab', { name: /tt02/i })).toBeInTheDocument();
+      expect(screen.queryByLabelText(textMock('general.loading'))).not.toBeInTheDocument();
+      expect(mockSetEnvironment).toHaveBeenCalledWith('tt02');
+    });
+  });
+
   it('should change range when selecting a new range', async () => {
     const user = userEvent.setup();
 

src/Designer/frontend/admin/features/apps/pages/apps/components/AppsTable.tsx

@@ -10,7 +10,7 @@ import {
   StudioTabs,
   StudioAlert,
 } from '@studio/components';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { useQueryParamState } from 'admin/features/apps/hooks/useQueryParamState';
@@ -63,19 +63,25 @@ const AppsTableWithData = ({ org, runningApps }: AppsTableWithDataProps) => {
 
   const availableEnvironments = Object.keys(runningApps).toSorted(sortEnvironments);
 
+  const activeEnvironment =
+    selectedEnvironment && availableEnvironments.includes(selectedEnvironment)
+      ? selectedEnvironment
+      : availableEnvironments[0];
+
+  useEffect(() => {
+    if (activeEnvironment && activeEnvironment !== selectedEnvironment) {
+      setSelectedEnvironment(activeEnvironment);
+    }
+  }, [activeEnvironment, selectedEnvironment, setSelectedEnvironment]);
+
   if (!availableEnvironments.length) {
     return (
       <StudioAlert data-color='info'>{t('admin.environment.no_results', { orgName })}</StudioAlert>
     );
   }
 
-  if (!selectedEnvironment || !availableEnvironments.includes(selectedEnvironment)) {
-    setSelectedEnvironment(availableEnvironments[0]);
-    return <StudioSpinner aria-label={t('general.loading')} />;
-  }
-
   return (
-    <StudioTabs value={selectedEnvironment} onChange={setSelectedEnvironment}>
+    <StudioTabs value={activeEnvironment} onChange={setSelectedEnvironment}>
       <StudioTabs.List>
         {availableEnvironments.map((environment) => (
           <StudioTabs.Tab key={environment} value={environment}>