✨ View files task attachments

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/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,55 @@
+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: (docId: string | number) => void;
+  documents: (Document & { isSelected: boolean })[];
+}> = ({ onSelect, documents }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const onToggle = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <div className="simple-task-viewer-attachment-toggle">
+      <Select
+        isOpen={isOpen}
+        onSelect={(_event, selectedId: string | number | undefined) => {
+          if (selectedId) {
+            onSelect(selectedId);
+          }
+          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

@@ -23,6 +23,7 @@
 .simple-task-viewer-container {
   display: flex;
   flex-direction: column;
+  height: 100%;
 }
 
 .simple-task-viewer-code {
@@ -53,6 +54,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 +72,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;
 }