🐛 Always show analysis details in drawer (#1103)

- It was reported (no bz) that the analysis details should always be
accessible from the side drawer. This PR removes the spinner for
in-progress analysis status & replaces it with a link to the code viewer
modal. Resolves #1013
- Also, this PR hides the facts tab when no facts are present. Resolves
#1100

Signed-off-by: ibolton336 <ibolton@redhat.com>

client/src/app/pages/applications/components/application-detail-drawer/application-detail-drawer-analysis.tsx

@@ -25,6 +25,7 @@ import { useFetchFacts } from "@app/queries/facts";
 import { ApplicationFacts } from "./application-facts";
 import { SimpleDocumentViewerModal } from "@app/shared/components/simple-task-viewer";
 import { getApplicationAnalysis, getTaskById } from "@app/api/rest";
+import { COLOR_NAMES_BY_HEX_VALUE } from "@app/Constants";
 
 export interface IApplicationDetailDrawerAnalysisProps
   extends Pick<
@@ -110,20 +111,16 @@ export const ApplicationDetailDrawerAnalysis: React.FC<
                   View analysis
                 </Button>
               </Tooltip>
-              <SimpleDocumentViewerModal<string>
-                title={`Analysis for ${application?.name}`}
-                fetch={getApplicationAnalysis}
-                documentId={appAnalysisToView}
-                onClose={() => setAppAnalysisToView(undefined)}
-              />
             </>
           ) : task?.state === "Failed" ? (
             task ? (
               <>
                 <Button
                   icon={
                     <span className={spacing.mrXs}>
-                      <ExclamationCircleIcon color="#c9190b"></ExclamationCircleIcon>
+                      <ExclamationCircleIcon
+                        color={COLOR_NAMES_BY_HEX_VALUE.red}
+                      ></ExclamationCircleIcon>
                     </span>
                   }
                   type="button"
@@ -134,25 +131,50 @@ export const ApplicationDetailDrawerAnalysis: React.FC<
                 >
                   Analysis details
                 </Button>
-                <SimpleDocumentViewerModal<Task | string>
-                  title={`Analysis details for ${application?.name}`}
-                  fetch={getTaskById}
-                  documentId={taskIdToView}
-                  onClose={() => setTaskIdToView(undefined)}
-                />
               </>
             ) : (
               <span className={spacing.mlSm}>
-                <ExclamationCircleIcon color="#c9190b"></ExclamationCircleIcon>
+                <ExclamationCircleIcon
+                  color={COLOR_NAMES_BY_HEX_VALUE.red}
+                ></ExclamationCircleIcon>
                 Failed
               </span>
             )
           ) : (
-            notAvailable
+            <>
+              {task ? (
+                <Button
+                  icon={
+                    <span className={spacing.mrXs}>
+                      <ExclamationCircleIcon
+                        color={COLOR_NAMES_BY_HEX_VALUE.blue}
+                      ></ExclamationCircleIcon>
+                    </span>
+                  }
+                  type="button"
+                  variant="link"
+                  onClick={() => setTaskIdToView(task?.id)}
+                  className={spacing.ml_0}
+                  style={{ margin: "0", padding: "0" }}
+                >
+                  Analysis details
+                </Button>
+              ) : (
+                notAvailable
+              )}
+            </>
           )}
+          <SimpleDocumentViewerModal<Task | string>
+            title={`Analysis details for ${application?.name}`}
+            fetch={getTaskById}
+            documentId={taskIdToView}
+            onClose={() => setTaskIdToView(undefined)}
+          />
         </TextContent>
       }
-      factsTabContent={!isFetching && <ApplicationFacts facts={facts} />}
+      factsTabContent={
+        !isFetching && !!facts.length && <ApplicationFacts facts={facts} />
+      }
     />
   );
 };

client/src/app/pages/applications/components/application-detail-drawer/application-detail-drawer.tsx

@@ -105,18 +105,12 @@ export const ApplicationDetailDrawer: React.FC<
             application && <ApplicationTags application={application} />
           )}
         </Tab>
-        {reportsTabContent && (
+        {reportsTabContent && task && (
           <Tab
             eventKey={TabKey.Reports}
             title={<TabTitleText>Reports</TabTitleText>}
           >
-            {task?.state === "Running" ? (
-              <Bullseye className={spacing.mtLg}>
-                <Spinner size="xl">Loading...</Spinner>
-              </Bullseye>
-            ) : (
-              reportsTabContent
-            )}
+            {reportsTabContent}
           </Tab>
         )}
         {factsTabContent && (