✨ Add refresh button to document viewer (#1087)

Adds a refresh button for the custom code editor. This will allow the refresh of analysis details without refreshing the browser or relying on polling. <img width="1164" alt="Screenshot 2023-07-03 at 4 27 42 PM" src="https://github.com/konveyor/tackle2-ui/assets/11218376/b8f205c0-5238-4e9d-8888-623f44a97c35"> Closes #1086 Signed-off-by: ibolton336 <ibolton@redhat.com>
konveyor · Jul 5, 2023 · 452cd57 · 452cd57
1 parent 54f156b
commit 452cd57
Showing 1 changed file with 33 additions and 14 deletions.
diff --git a/client/src/app/shared/components/simple-task-viewer/simple-document-viewer.tsx b/client/src/app/shared/components/simple-task-viewer/simple-document-viewer.tsx
@@ -1,5 +1,9 @@
 import * as React from "react";
-import { CodeEditor, Language } from "@patternfly/react-code-editor";
+import {
+  CodeEditor,
+  CodeEditorControl,
+  Language,
+} from "@patternfly/react-code-editor";
 import {
   Button,
   EmptyState,
@@ -15,6 +19,7 @@ import {
 import { css } from "@patternfly/react-styles";
 import editorStyles from "@patternfly/react-styles/css/components/CodeEditor/code-editor";
 import CodeIcon from "@patternfly/react-icons/dist/esm/icons/code-icon";
+import UndoIcon from "@patternfly/react-icons/dist/esm/icons/undo-icon";
 
 import "./viewer.css";
 
@@ -75,27 +80,40 @@ export const SimpleDocumentViewer = <FetchType,>({
 
   React.useEffect(() => {
     setCode(undefined);
-    if (documentId) {
-      if (currentLanguage === Language.yaml) {
-        fetch(documentId, currentLanguage).then((yaml) => {
-          setCode(yaml.toString());
-          focusAndHomePosition();
-        });
-      } else {
-        fetch(documentId, currentLanguage).then((json) => {
-          setCode(JSON.stringify(json, undefined, 2));
-          focusAndHomePosition();
-        });
-      }
-    }
+    documentId && fetchDocument(documentId);
   }, [documentId, currentLanguage]);
 
+  const fetchDocument = (documentId: number) => {
+    if (currentLanguage === Language.yaml) {
+      fetch(documentId, currentLanguage).then((yaml) => {
+        setCode(yaml.toString());
+        focusAndHomePosition();
+      });
+    } else {
+      fetch(documentId, currentLanguage).then((json) => {
+        setCode(JSON.stringify(json, undefined, 2));
+        focusAndHomePosition();
+      });
+    }
+  };
+
   const focusAndHomePosition = () => {
     if (editorRef.current) {
       editorRef.current.focus();
       editorRef.current.setPosition({ column: 0, lineNumber: 1 });
     }
   };
+  const refreshControl = (
+    <CodeEditorControl
+      icon={<UndoIcon />}
+      aria-label="refresh-task"
+      tooltipProps={{ content: "Refresh" }}
+      onClick={() => {
+        documentId && fetchDocument(documentId);
+      }}
+      isVisible={code !== ""}
+    />
+  );
 
   return (
     <CodeEditor
@@ -128,6 +146,7 @@ export const SimpleDocumentViewer = <FetchType,>({
         </div>
       }
       customControls={[
+        refreshControl,
         <div
           className={css(
             editorStyles.codeEditorTab,