Skip to content

Commit

Permalink
✨ Add refresh button to document viewer (#1087)
Browse files Browse the repository at this point in the history
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>
  • Loading branch information
ibolton336 committed Jul 5, 2023
1 parent 54f156b commit 452cd57
Showing 1 changed file with 33 additions and 14 deletions.
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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";

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -128,6 +146,7 @@ export const SimpleDocumentViewer = <FetchType,>({
</div>
}
customControls={[
refreshControl,
<div
className={css(
editorStyles.codeEditorTab,
Expand Down

0 comments on commit 452cd57

Please sign in to comment.