Skip to content

Commit

Permalink
Feat: Add refresh button to document viewer
Browse files Browse the repository at this point in the history
Signed-off-by: ibolton336 <ibolton@redhat.com>
  • Loading branch information
ibolton336 committed Jul 3, 2023
1 parent cd9ecaf commit 5a456b1
Showing 1 changed file with 75 additions and 54 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,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>
</>,
]}
/>
);
Expand Down

0 comments on commit 5a456b1

Please sign in to comment.