View files task attachments

Resolves: #1929

Functional changes:
1. document to be viewed is selected from the list (first action above
   the editor) or via URL
2. display language toggle based on languages supported by the document.
   For attachments the list consists of plain text and optionally a
   second language discovered based on file extension (YAML or JSON).
3. replace "merged" checkbox with an option in the select

Related refactorings:
1. split getTaskById() query into specialized queries:
   a) getTaskById() returning Promise<Task> for working with the object
   b) getTaskByIdAndFormat() returning Promise<string> for displaying
      the task as a formatted text
2. configure AnalysisDetails component to respond to 2 routes: existing
   details route and newly added /applications/:applicationId/analysis-details/:taskId/attachments/:attachmentId

Signed-off-by: Radoslaw Szwajkowski <[email protected]>

Author: rszwajko

client/public/locales/en/translation.json

@@ -285,6 +285,7 @@
     "assessmentQuestionnaires": "Assessment questionnaires",
     "assessmentNotes": "Assessment notes",
     "assessmentSummary": "Assessment summary",
+    "attachments": "Attachments",
     "autoTagging": "Automated Tagging",
     "binary": "Binary",
     "branch": "Branch",

client/src/app/Paths.ts

@@ -3,6 +3,8 @@ export const DevPaths = {
   applications: "/applications",
   applicationsAnalysisDetails:
     "/applications/:applicationId/analysis-details/:taskId",
+  applicationsAnalysisDetailsAttachment:
+    "/applications/:applicationId/analysis-details/:taskId/attachments/:attachmentId",
   applicationsAnalysisTab: "/applications/analysis-tab",
   applicationsAssessmentTab: "/applications/assessment-tab",
   applicationsImports: "/applications/application-imports",
@@ -93,3 +95,9 @@ export interface AnalysisDetailsRoute {
   applicationId: string;
   taskId: string;
 }
+
+export interface AnalysisDetailsAttachmentRoute {
+  applicationId: string;
+  taskId: string;
+  attachmentId: string;
+}

client/src/app/Routes.tsx

@@ -79,6 +79,11 @@ export const devRoutes: IRoute<DevPathValues>[] = [
   {
     path: Paths.applicationsAnalysisDetails,
     comp: AnalysisDetails,
+    exact: true,
+  },
+  {
+    path: Paths.applicationsAnalysisDetailsAttachment,
+    comp: AnalysisDetails,
     exact: false,
   },
   {

client/src/app/api/models.ts

@@ -319,6 +319,11 @@ export interface Task {
   state?: TaskState;
   job?: string;
   report?: TaskReport;
+  attached?: TaskAttachment[];
+}
+
+interface TaskAttachment extends Ref {
+  activity?: number;
 }
 
 export interface TaskData {

client/src/app/api/rest.ts

@@ -319,13 +319,25 @@ export const getApplicationImports = (
     .get(`${APP_IMPORT}?importSummary.id=${importSummaryID}&isValid=${isValid}`)
     .then((response) => response.data);
 
-export function getTaskById(
+export function getTaskById(id: number): Promise<Task> {
+  return axios
+    .get(`${TASKS}/${id}`, {
+      headers: { ...jsonHeaders },
+      responseType: "json",
+    })
+    .then((response) => {
+      return response.data;
+    });
+}
+
+export function getTaskByIdAndFormat(
   id: number,
   format: string,
   merged: boolean = false
-): Promise<Task | string> {
-  const headers = format === "yaml" ? { ...yamlHeaders } : { ...jsonHeaders };
-  const responseType = format === "yaml" ? "text" : "json";
+): Promise<string> {
+  const isYaml = format === "yaml";
+  const headers = isYaml ? { ...yamlHeaders } : { ...jsonHeaders };
+  const responseType = isYaml ? "text" : "json";
 
   let url = `${TASKS}/${id}`;
   if (merged) {
@@ -338,7 +350,9 @@ export function getTaskById(
       responseType: responseType,
     })
     .then((response) => {
-      return response.data;
+      return isYaml
+        ? String(response.data ?? "")
+        : JSON.stringify(response.data, undefined, 2);
     });
 }
 
@@ -439,6 +453,11 @@ export const createFile = ({
       return response.data;
     });
 
+export const getTextFile = (id: number): Promise<string> =>
+  axios
+    .get(`${FILES}/${id}`, { headers: { Accept: "text/plain" } })
+    .then((response) => response.data);
+
 export const getSettingById = <K extends keyof SettingTypes>(
   id: K
 ): Promise<SettingTypes[K]> =>

client/src/app/components/simple-document-viewer/AttachmentToggle.tsx

@@ -0,0 +1,56 @@
+import React, { FC, useState } from "react";
+
+import {
+  Select,
+  SelectOption,
+  SelectList,
+  MenuToggleElement,
+  MenuToggle,
+} from "@patternfly/react-core";
+import { Document } from "./SimpleDocumentViewer";
+import "./SimpleDocumentViewer.css";
+
+export const AttachmentToggle: FC<{
+  onSelect: (doc: Document) => void;
+  documents: Document[];
+}> = ({ onSelect, documents }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const onToggle = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <div className="simple-task-viewer-attachment-toggle">
+      <Select
+        isOpen={isOpen}
+        onSelect={(_event, value: string | number | undefined) => {
+          const selected = documents.find((it) => it.id === value);
+          if (selected) {
+            onSelect(selected);
+          }
+          onToggle();
+        }}
+        onOpenChange={(isOpen) => setIsOpen(isOpen)}
+        toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+          <MenuToggle ref={toggleRef} onClick={onToggle} isExpanded={isOpen}>
+            {documents.find(({ isSelected }) => isSelected)?.name}
+          </MenuToggle>
+        )}
+        shouldFocusToggleOnSelect
+      >
+        <SelectList>
+          {documents.map(({ id, name, isSelected, description }) => (
+            <SelectOption
+              isSelected={isSelected}
+              key={id}
+              value={id}
+              description={description}
+            >
+              {name}
+            </SelectOption>
+          ))}
+        </SelectList>
+      </Select>
+    </div>
+  );
+};

client/src/app/components/simple-document-viewer/LanguageToggle.tsx

@@ -7,49 +7,47 @@ import CodeIcon from "@patternfly/react-icons/dist/esm/icons/code-icon";
 import "./SimpleDocumentViewer.css";
 
 export const LanguageToggle: React.FC<{
-  currentLanguage: Language.yaml | Language.json;
+  currentLanguage: Language;
   code?: string;
-  setCurrentLanguage: (lang: Language.yaml | Language.json) => void;
-}> = ({ currentLanguage, code, setCurrentLanguage }) => (
-  <div
-    className={css(
-      editorStyles.codeEditorTab,
-      "language-toggle-group-container"
-    )}
-    key="code-language-toggle"
-  >
-    <ToggleGroup
-      aria-label="code content type selection"
-      className="language-toggle-group"
+  supportedLanguages: Language[];
+  setCurrentLanguage: (lang: Language) => void;
+}> = ({ currentLanguage, code, setCurrentLanguage, supportedLanguages }) => {
+  if (supportedLanguages.length <= 1) {
+    return <></>;
+  }
+
+  return (
+    <div
+      className={css(
+        editorStyles.codeEditorTab,
+        "language-toggle-group-container"
+      )}
+      key="code-language-toggle"
     >
-      <ToggleGroupItem
-        text={
-          <>
-            <span className={editorStyles.codeEditorTabIcon}>
-              <CodeIcon />
-            </span>
-            <span className={editorStyles.codeEditorTabText}>JSON</span>
-          </>
-        }
-        buttonId="code-language-select-json"
-        isSelected={currentLanguage === "json"}
-        isDisabled={!code && currentLanguage !== "json"}
-        onChange={() => setCurrentLanguage(Language.json)}
-      />
-      <ToggleGroupItem
-        text={
-          <>
-            <span className={editorStyles.codeEditorTabIcon}>
-              <CodeIcon />
-            </span>
-            <span className={editorStyles.codeEditorTabText}>YAML</span>
-          </>
-        }
-        buttonId="code-language-select-yaml"
-        isSelected={currentLanguage === "yaml"}
-        isDisabled={!code && currentLanguage !== "yaml"}
-        onChange={() => setCurrentLanguage(Language.yaml)}
-      />
-    </ToggleGroup>
-  </div>
-);
+      <ToggleGroup
+        aria-label="code content type selection"
+        className="language-toggle-group"
+      >
+        {supportedLanguages.map((lang) => (
+          <ToggleGroupItem
+            key={lang}
+            text={
+              <>
+                <span className={editorStyles.codeEditorTabIcon}>
+                  <CodeIcon />
+                </span>
+                <span className={editorStyles.codeEditorTabText}>
+                  {lang === Language.plaintext ? "Text" : lang.toUpperCase()}
+                </span>
+              </>
+            }
+            buttonId={`code-language-select-${lang}`}
+            isSelected={currentLanguage === lang}
+            isDisabled={!code && currentLanguage !== lang}
+            onChange={() => setCurrentLanguage(lang)}
+          />
+        ))}
+      </ToggleGroup>
+    </div>
+  );
+};

client/src/app/components/simple-document-viewer/SimpleDocumentViewer.css

@@ -53,6 +53,10 @@
   flex-grow: 1;
 }
 
+.simple-task-viewer-code .pf-v5-c-code-editor__controls > * {
+  display: flex;
+}
+
 .simple-task-viewer-code .pf-v5-c-code-editor__header-main {
   display: none;
 }
@@ -67,6 +71,6 @@
   --pf-v5-c-toggle-group__button--FontSize: var(--pf-v5-global--FontSize--md);
 }
 
-.merged-checkbox {
-  margin: auto 0.5rem;
+.simple-task-viewer-attachment-toggle {
+  order: -1;
 }