Merge pull request #264 from galasa-dev/JamesC-fix-3270-bugs

# Why?
James - fix some 3270 tab bugs with refreshing and css styling.

Author: James-Cocker

galasa-ui/src/components/test-runs/test-run-details/3270Tab/TabFor3270.tsx

@@ -19,14 +19,17 @@ export default function TabFor3270({
   zos3270TerminalData,
   is3270CurrentlySelected,
   handleNavigateTo3270,
+  isLoading,
+  setIsLoading,
 }: {
   runId: string;
   zos3270TerminalData: TreeNodeData[];
   is3270CurrentlySelected: boolean;
   handleNavigateTo3270: (highlightedRowId: string) => void;
+  isLoading: boolean;
+  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
 }) {
   const [isError, setIsError] = useState(false);
-  const [isLoading, setIsLoading] = useState(true);
   const [imageData, setImageData] = useState<TerminalImage>();
   const [moveImageSelection, setMoveImageSelection] = useState<number>(0);
   const [cannotSwitchToPreviousImage, setCannotSwitchToPreviousImage] = useState<boolean>(true);
@@ -44,17 +47,6 @@ export default function TabFor3270({
     // eslint-disable-next-line
   }, [highlightedRowId, is3270CurrentlySelected]);
 
-  // Get the 'terminalScreen' parameter
-  useEffect(() => {
-    if (is3270CurrentlySelected && highlightedRowId === '') {
-      const url = new URL(window.location.href);
-      setHighlightedRowId(url.searchParams.get('terminalScreen') || '');
-    }
-
-    // If you're adding extra state to this hook, make sure to review the dependency array due to the warning suppression:
-    // eslint-disable-next-line
-  }, [is3270CurrentlySelected]);
-
   if (isError) {
     return <ErrorPage />;
   }

galasa-ui/src/components/test-runs/test-run-details/3270Tab/TableOfScreenshots.tsx

@@ -78,7 +78,6 @@ export default function TableOfScreenshots({
   const [searchTerm, setSearchTerm] = useState('');
   const [selectedTerminal, setSelectedTerminal] = useState<DropdownOption | null>(null);
   const [allImageData, setAllImageData] = useState<TerminalImage[]>([]);
-  const [initialHighlightedRowSet, setInitialHighlightedRowSet] = useState<boolean>(false);
 
   const screenshotsCollected = useRef<boolean | null>(false);
 
@@ -116,12 +115,16 @@ export default function TableOfScreenshots({
   useEffect(() => {
     // Highlight and display first element when the page loads, unless already set.
     const highlightFirstRowOnPageLoad = () => {
-      if (!initialHighlightedRowSet && filteredRows[0]) {
-        setInitialHighlightedRowSet(true);
+      if (!highlightedRowId && filteredRows[0]) {
+        const url = new URL(window.location.href);
+        const terminalScreen = url.searchParams.get('terminalScreen');
+
         if (
-          highlightedRowId === '' ||
-          !filteredRows.find((filteredRow) => filteredRow.id === highlightedRowId)
+          terminalScreen &&
+          filteredRows.find((filteredRow) => filteredRow.id === terminalScreen)
         ) {
+          setHighlightedRowId(terminalScreen);
+        } else {
           setHighlightedRowId(filteredRows[0].id);
         }
       }
@@ -147,7 +150,6 @@ export default function TableOfScreenshots({
     // Ensure screenshots are only collected once.
     if (!screenshotsCollected.current?.valueOf() && flattenedZos3270TerminalData.length === 0) {
       screenshotsCollected.current = true;
-      setIsLoading(true);
       const fetchData = async () => {
         try {
           setFlattenedZos3270TerminalData([]);
@@ -285,7 +287,7 @@ export default function TableOfScreenshots({
           getRowProps: (options: any) => TableRowProps;
           getTableProps: () => TableBodyProps;
         }) => (
-          <Table stickyHeader {...getTableProps()} className={styles.innerScreenshotTable}>
+          <Table stickyHeader {...getTableProps()} id={styles.innerScreenshotTable}>
             <TableHead>
               <TableRow>
                 {headers.map((header) => (

galasa-ui/src/components/test-runs/test-run-details/LogTab.tsx

@@ -536,7 +536,7 @@ export default function LogTab({ logs, initialLine, runId }: LogTabProps) {
         lineElement.scrollIntoView({ behavior: ANIMATION_BEHAVIOUR, block: 'start' });
       }
     }
-  }, [initialLine, processedLines]);
+  }, [ANIMATION_BEHAVIOUR, initialLine, processedLines]);
 
   // Scroll to current match
   useEffect(() => {
@@ -549,7 +549,7 @@ export default function LogTab({ logs, initialLine, runId }: LogTabProps) {
         });
       }
     }
-  }, [currentMatchIndex]);
+  }, [ANIMATION_BEHAVIOUR, currentMatchIndex]);
 
   useEffect(() => {
     const matchCount = searchMatches.length;

galasa-ui/src/components/test-runs/test-run-details/OverviewTab.tsx

@@ -16,21 +16,26 @@ import useHistoryBreadCrumbs from '@/hooks/useHistoryBreadCrumbs';
 import { TEST_RUNS_QUERY_PARAMS } from '@/utils/constants/common';
 import { TIME_TO_WAIT_BEFORE_CLOSING_TAG_EDIT_MODAL_MS } from '@/utils/constants/common';
 import RenderTags from '@/components/test-runs/test-run-details/RenderTags';
-import { updateRunTags, getExistingTagObjects } from '@/actions/runsAction';
+import { updateRunTags } from '@/actions/runsAction';
 
 type DisplayedTagType = {
   id: string;
   label: string;
 };
 
-const OverviewTab = ({ metadata }: { metadata: RunMetadata }) => {
+const OverviewTab = ({
+  metadata,
+  existingTagObjectNames,
+}: {
+  metadata: RunMetadata;
+  existingTagObjectNames: string[];
+}) => {
   const translations = useTranslations('OverviewTab');
   const { pushBreadCrumb } = useHistoryBreadCrumbs();
 
   const [weekBefore, setWeekBefore] = useState<string | null>(null);
 
   const [tags, setTags] = useState<string[]>(metadata?.tags || []);
-  const [existingTagObjectNames, setExistingTagObjectNames] = useState<string[]>([]);
 
   const [isTagsEditModalOpen, setIsTagsEditModalOpen] = useState<boolean>(false);
   const [filterInput, setFilterInput] = useState<string>('');
@@ -46,22 +51,6 @@ const OverviewTab = ({ metadata }: { metadata: RunMetadata }) => {
   const OTHER_RECENT_RUNS = `/test-runs?${TEST_RUNS_QUERY_PARAMS.TEST_NAME}=${fullTestName}&${TEST_RUNS_QUERY_PARAMS.BUNDLE}=${metadata?.bundle}&${TEST_RUNS_QUERY_PARAMS.PACKAGE}=${metadata?.package}&${TEST_RUNS_QUERY_PARAMS.DURATION}=60,0,0&${TEST_RUNS_QUERY_PARAMS.TAB}=results&${TEST_RUNS_QUERY_PARAMS.QUERY_NAME}=Recent runs of test ${metadata?.testName}`;
   const RETRIES_FOR_THIS_TEST_RUN = `/test-runs?${TEST_RUNS_QUERY_PARAMS.SUBMISSION_ID}=${metadata?.submissionId}&${TEST_RUNS_QUERY_PARAMS.FROM}=${weekBefore}&${TEST_RUNS_QUERY_PARAMS.TAB}=results&${TEST_RUNS_QUERY_PARAMS.QUERY_NAME}=All attempts of test run ${metadata?.runName}`;
 
-  useEffect(() => {
-    const fetchExistingTags = async () => {
-      try {
-        const result = await getExistingTagObjects();
-        setExistingTagObjectNames(result.tags || []);
-
-        if (!result.success) {
-          console.error('Failed to fetch existing tags:', result.error);
-        }
-      } catch (error) {
-        console.error('Error fetching existing tags:', error);
-      }
-    };
-    fetchExistingTags();
-  }, []);
-
   useEffect(() => {
     const validateTime = () => {
       const validatedTime = getAWeekBeforeSubmittedTime(metadata?.rawSubmittedAt!);

galasa-ui/src/components/test-runs/test-run-details/TestRunDetails.tsx

@@ -45,6 +45,7 @@ import { NotificationType } from '@/utils/types/common';
 import { TreeNodeData } from '@/utils/functions/artifacts';
 import { TEST_RUNS } from '@/utils/constants/breadcrumb';
 import TestRunsSearch from '../TestRunsSearch';
+import { getExistingTagObjects } from '@/actions/runsAction';
 
 interface TestRunDetailsProps {
   runId: string;
@@ -74,9 +75,11 @@ const TestRunDetails = ({
   const [isError, setIsError] = useState(false);
   const [isDownloading, setIsDownloading] = useState(false);
   const [notification, setNotification] = useState<NotificationType | null>(null);
+  const [existingTagObjectNames, setExistingTagObjectNames] = useState<string[]>([]);
   const { formatDate } = useDateTimeFormat();
 
   const indexOf3270Tab = TEST_RUN_PAGE_TABS.indexOf('3270');
+  const [is3270TabLoading, setIs3270TabLoading] = useState(true);
   const [is3270TabSelectedInURL, setIs3270TabSelectedInURL] = useState<boolean>(false);
   const [zos3270TerminalFolderExists, setZos3270TerminalFolderExists] = useState<Boolean>(false);
   const [zos3270TerminalData, setZos3270TerminalData] = useState<TreeNodeData[]>([]);
@@ -100,12 +103,16 @@ const TestRunDetails = ({
 
   const handleZos3270TerminalFolderCheck = (newZos3270TerminalFolderExists: boolean) => {
     setZos3270TerminalFolderExists(newZos3270TerminalFolderExists);
+  };
 
+  useEffect(() => {
     // If 3270 tab has been selected in the URL, move them to the 3270 pannel from the overview page redirection
-    if (is3270TabSelectedInURL && newZos3270TerminalFolderExists) {
+    if (is3270TabSelectedInURL && zos3270TerminalFolderExists && !is3270TabLoading) {
       setSelectedTabIndex(indexOf3270Tab);
     }
-  };
+    // Ignore missing dependecies as they will be finalised by the time is3270TabLoading switches to false
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [is3270TabLoading]);
 
   const handleSetZos3270TerminalData = (newZos3270TerminalData: TreeNodeData[]) => {
     setZos3270TerminalData(newZos3270TerminalData);
@@ -182,6 +189,23 @@ const TestRunDetails = ({
     loadRunDetails();
   }, [run, runDetailsPromise, runArtifactsPromise, runLogPromise, extractRunDetails]);
 
+  // Fetch existing tags once on component mount (persists across tab changes)
+  useEffect(() => {
+    const fetchExistingTags = async () => {
+      try {
+        const result = await getExistingTagObjects();
+        if (result.success) {
+          setExistingTagObjectNames(result.tags || []);
+        } else {
+          console.error('Failed to fetch existing tags:', result.error);
+        }
+      } catch (error) {
+        console.error('Error fetching existing tags:', error);
+      }
+    };
+    fetchExistingTags();
+  }, []);
+
   useEffect(() => {
     // If the 'Test Runs' breadcrumb is already in the items, skip.
     if (breadCrumbItems.length > 1) return;
@@ -383,7 +407,7 @@ const TestRunDetails = ({
             </TabList>
             <TabPanels>
               <TabPanel>
-                <OverviewTab metadata={run!} />
+                <OverviewTab metadata={run!} existingTagObjectNames={existingTagObjectNames} />
               </TabPanel>
               <TabPanel>
                 <MethodsTab methods={methods} onMethodClick={handleNavigateToLog} />
@@ -407,6 +431,8 @@ const TestRunDetails = ({
                     zos3270TerminalData={zos3270TerminalData}
                     is3270CurrentlySelected={indexOf3270Tab === selectedTabIndex}
                     handleNavigateTo3270={handleNavigateTo3270}
+                    isLoading={is3270TabLoading}
+                    setIsLoading={setIs3270TabLoading}
                   />
                 </TabPanel>
               )}

galasa-ui/src/styles/test-runs/test-run-details/Tab3270.module.css

@@ -5,14 +5,14 @@
  */
 
 .tab3270Container {
-  height: min(calc(100vh - 400px), 550px);
+  height: min(calc(100vh - 400px), 600px);
 }
 
 .clickableRow {
   cursor: pointer;
 }
 
-.innerScreenshotTable {
+#innerScreenshotTable {
   max-height: min(calc(100vh - 450px), 550px);
   overflow-y: auto;
   /* Stops sticky header overlapping table elements when scrollToTop() is called. */