Adjust Tags tab on Application Details Drawer when a Task is running

When an analysis task is running, and the application drawer is open, show both loading text and spinner and the existing tags. Once the analysis is complete, the loading text/spinner will be removed and any new tags will be shown. Bug-Url: https://issues.redhat.com/browse/MTA-465 Signed-off-by: Scott J Dickerson <[email protected]>
konveyor · Jul 21, 2023 · f0274e3 · f0274e3
1 parent ba2f5ac
commit f0274e3
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 16 deletions.
diff --git a/client/public/locales/en/translation.json b/client/public/locales/en/translation.json
@@ -156,6 +156,7 @@
     "savingSelection": "Saving selection",
     "selectOwnerFromStakeholdersList": "Select owner from list of stakeholders",
     "suggestedAdoptionPlanHelpText": "The suggested approach to migration based on effort, priority, and dependencies.",
+    "taskInProgressForTags": "A new analysis is in-progress.  Tags may be updated upon completion.",
     "toTagApplication": "Either no tags exist yet or you may not have permission to view any. If you have permission, try creating a new custom tag."
   },
   "proposedActions": {
@@ -236,13 +237,15 @@
     "decision": "Decision",
     "dependencies": "Dependencies",
     "description": "Description",
+    "details": "Details",
     "displayName": "Display name",
     "effort": "Effort",
     "effortEstimate": "Effort estimate",
     "email": "Email",
     "error": "Error",
     "errorReport": "Error report",
     "exportToIssue": "Export to Issue Manager",
+    "facts": "Facts",
     "failed": "Failed",
     "filename": "File name",
     "filter": "Filter...",

diff --git a/...app/pages/applications/components/application-detail-drawer/application-detail-drawer.tsx b/...app/pages/applications/components/application-detail-drawer/application-detail-drawer.tsx
@@ -1,8 +1,10 @@
 import * as React from "react";
 import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 import {
   TextContent,
   Text,
+  TextVariants,
   Title,
   Tabs,
   Tab,
@@ -48,10 +50,13 @@ export const ApplicationDetailDrawer: React.FC<
   reportsTabContent = null,
   factsTabContent = null,
 }) => {
+  const { t } = useTranslation();
   const [activeTabKey, setActiveTabKey] = React.useState<TabKey>(
     TabKey.Details
   );
 
+  const isTaskRunning = task?.state === "Running";
+
   return (
     <PageDrawerContent
       isExpanded={!!application}
@@ -61,7 +66,7 @@ export const ApplicationDetailDrawer: React.FC<
     >
       <TextContent>
         <Text component="small" className={spacing.mb_0}>
-          Name
+          {t("terms.name")}
         </Text>
         <Title headingLevel="h2" size="lg" className={spacing.mtXs}>
           {application?.name}
@@ -74,7 +79,7 @@ export const ApplicationDetailDrawer: React.FC<
       >
         <Tab
           eventKey={TabKey.Details}
-          title={<TabTitleText>Details</TabTitleText>}
+          title={<TabTitleText>{t("terms.details")}</TabTitleText>}
         >
           <TextContent className={`${spacing.mtMd} ${spacing.mbMd}`}>
             <Text component="small">{application?.description}</Text>
@@ -84,43 +89,54 @@ export const ApplicationDetailDrawer: React.FC<
               </Link>
             ) : null}
             <Title headingLevel="h3" size="md">
-              Business service
+              {t("terms.businessService")}
             </Title>
             <Text component="small">
-              {application?.businessService && (
+              {application?.businessService ? (
                 <ApplicationBusinessService
                   id={application.businessService.id}
                 />
-              )}
+              ) : null}
             </Text>
           </TextContent>
           {detailsTabMainContent}
         </Tab>
+
         <Tab eventKey={TabKey.Tags} title={<TabTitleText>Tags</TabTitleText>}>
-          {application && task?.state === "Running" ? (
+          {application && isTaskRunning ? (
             <Bullseye className={spacing.mtLg}>
-              <Spinner size="xl">Loading...</Spinner>
+              <TextContent>
+                <Text component={TextVariants.h3}>
+                  {t("message.taskInProgressForTags")}
+                  <Spinner
+                    isInline
+                    aria-label="spinner when a new analysis is running"
+                  />
+                </Text>
+              </TextContent>
             </Bullseye>
-          ) : (
-            application && <ApplicationTags application={application} />
-          )}
+          ) : null}
+
+          {application ? <ApplicationTags application={application} /> : null}
         </Tab>
-        {reportsTabContent && task && (
+
+        {reportsTabContent && task ? (
           <Tab
             eventKey={TabKey.Reports}
-            title={<TabTitleText>Reports</TabTitleText>}
+            title={<TabTitleText>{t("terms.reports")}</TabTitleText>}
           >
             {reportsTabContent}
           </Tab>
-        )}
-        {factsTabContent && (
+        ) : null}
+
+        {factsTabContent ? (
           <Tab
             eventKey={TabKey.Facts}
-            title={<TabTitleText>Facts</TabTitleText>}
+            title={<TabTitleText>{t("terms.facts")}</TabTitleText>}
           >
             {factsTabContent}
           </Tab>
-        )}
+        ) : null}
       </Tabs>
     </PageDrawerContent>
   );