ISPN-14917 Configuration tab

infinispan · Jul 4, 2023 · 1e5a65d · 1e5a65d
1 parent fc0310c
commit 1e5a65d
Showing 1 changed file with 30 additions and 17 deletions.
diff --git a/src/app/Caches/Configuration/CacheConfiguration.tsx b/src/app/Caches/Configuration/CacheConfiguration.tsx
@@ -11,12 +11,14 @@ import {
  Spinner,
  Tabs,
  Tab,
- TabTitleText
+ TabTitleText,
+ TabContent,
+ TabContentBody
 } from '@patternfly/react-core';
-import SyntaxHighlighter from 'react-syntax-highlighter';
-import { githubGist } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 import { useTranslation } from 'react-i18next';
 import { useFetchConfigurationYAML, useFetchConfigurationXML } from '@app/services/configHook';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import { githubGist } from 'react-syntax-highlighter/dist/esm/styles/hljs';
 
 const CacheConfiguration = (props: { cacheName: string; editable: boolean; config: string }) => {
  const { t } = useTranslation();
@@ -25,6 +27,10 @@ const CacheConfiguration = (props: { cacheName: string; editable: boolean; confi
  const yamlConfig = useFetchConfigurationYAML(props.cacheName);
  const xmlConfig = useFetchConfigurationXML(props.cacheName);
 
+ const contentRef1 = React.createRef<HTMLElement>();
+ const contentRef2 = React.createRef<HTMLElement>();
+ const contentRef3 = React.createRef<HTMLElement>();
+
  if (!props.config) {
  return <Spinner size={'md'} />;
  }
@@ -59,29 +65,36 @@ const CacheConfiguration = (props: { cacheName: string; editable: boolean; confi
  <Card>
  {displayHeaderAlert()}
  <CardBody>
- <SyntaxHighlighter wrapLines={false} style={githubGist} useInlineStyles={true} showLineNumbers={true}>
- {config}
- </SyntaxHighlighter>
  <ClipboardCopy isReadOnly isCode variant={ClipboardCopyVariant.inline}>
  {config}
  </ClipboardCopy>
+ <SyntaxHighlighter wrapLines={false} style={githubGist} useInlineStyles={true} showLineNumbers={true}>
+ {config}
+ </SyntaxHighlighter>
  </CardBody>
  </Card>
  );
  };
 
  return (
- <Tabs defaultActiveKey={0} style={{ backgroundColor: 'white' }}>
- <Tab eventKey={0} title={<TabTitleText>JSON</TabTitleText>}>
- {displayConfig(props.config)}
- </Tab>
- <Tab eventKey={1} title={<TabTitleText>XML</TabTitleText>}>
- {xmlConfig && displayConfig(xmlConfig.configuration)}
- </Tab>
- <Tab eventKey={2} title={<TabTitleText>YAML</TabTitleText>}>
- {yamlConfig && displayConfig(yamlConfig.configuration)}
- </Tab>
- </Tabs>
+ <React.Fragment>
+ <Tabs defaultActiveKey={0} style={{ backgroundColor: 'white' }}>
+ <Tab eventKey={0} title={<TabTitleText>JSON</TabTitleText>} tabContentId="tab1" tabContentRef={contentRef1} />
+ <Tab eventKey={1} title={<TabTitleText>XML</TabTitleText>} tabContentId="tab2" tabContentRef={contentRef2} />
+ <Tab eventKey={2} title={<TabTitleText>YAML</TabTitleText>} tabContentId="tab3" tabContentRef={contentRef3} />
+ </Tabs>
+ <div>
+ <TabContent eventKey={0} id="tab1" ref={contentRef1}>
+ <TabContentBody> {displayConfig(props.config)} </TabContentBody>
+ </TabContent>
+ <TabContent eventKey={1} id="tab2" ref={contentRef2} hidden>
+ <TabContentBody> {xmlConfig && displayConfig(xmlConfig.configuration)} </TabContentBody>
+ </TabContent>
+ <TabContent eventKey={2} id="tab3" ref={contentRef3} hidden>
+ <TabContentBody> {yamlConfig && displayConfig(yamlConfig.configuration)} </TabContentBody>
+ </TabContent>
+ </div>
+ </React.Fragment>
  );
 };