Feat: Add refresh button to document viewer

Signed-off-by: ibolton336 <ibolton@redhat.com>
konveyor · Jul 3, 2023 · 5a456b1 · 5a456b1
1 parent cd9ecaf
commit 5a456b1
Showing 1 changed file with 75 additions and 54 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,47 +146,50 @@ export const SimpleDocumentViewer = <FetchType,>({
         </div>
       }
       customControls={[
-        <div
-          className={css(
-            editorStyles.codeEditorTab,
-            "language-toggle-group-container"
-          )}
-          key="code-language-toggle"
-        >
-          <ToggleGroup
-            aria-label="code content type selection"
-            className="language-toggle-group"
+        <>
+          {refreshControl}
+          <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"
+            >
+              <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>
+        </>,
       ]}
     />
   );