ISPN-14098 JIRA Review configuration in JSON, XML and YAML #401

added contentType to convertConfigFormat, so that we can convert from any format instead of using json added contentType state to help conersion from any config type added feature to review configuration in JSON XML and YAML format Toggle Radios for JSON XML and YAML configurations added contentType for format conversion api call
infinispan · Oct 8, 2023 · 5864cc3 · 5864cc3
1 parent 5dc4e2d
commit 5864cc3
Show file tree

Hide file tree

Showing 8 changed files with 406 additions and 308 deletions.
diff --git a/src/app/CacheManagers/CounterTableDisplay.tsx b/src/app/CacheManagers/CounterTableDisplay.tsx
@@ -30,7 +30,10 @@ import {
   ToolbarToggleGroup,
   ToolbarFilter,
   ToolbarItem,
-  ToolbarItemVariant, EmptyStateHeader, EmptyStateActions, EmptyStateFooter
+  ToolbarItemVariant,
+  EmptyStateHeader,
+  EmptyStateActions,
+  EmptyStateFooter
 } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td, IAction, ActionsColumn } from '@patternfly/react-table';
 import { DeleteCounter } from '@app/Counters/DeleteCounter';
@@ -418,9 +421,7 @@ const CounterTableDisplay = (props: { setCountersCount: (number) => void; isVisi
         headingLevel="h4"
       />
       <EmptyStateBody>{t('cache-managers.counters.no-counters-body')}</EmptyStateBody>
-      <EmptyStateFooter>
-        {createCounterButtonHelper(true)}
-      </EmptyStateFooter>
+      <EmptyStateFooter>{createCounterButtonHelper(true)}</EmptyStateFooter>
     </EmptyState>
   );
 

diff --git a/src/app/Caches/Create/CreateCacheWizard.tsx b/src/app/Caches/Create/CreateCacheWizard.tsx
@@ -56,6 +56,7 @@ const CreateCacheWizard = (props: { cacheManager: CacheManager; create: boolean
   const [reviewConfig, setReviewConfig] = useState<string>('');
   const [isDownloadModalOpen, setIsDownloadModalOpen] = useState(false);
   const canCreateCache = ConsoleServices.security().hasConsoleACL(ConsoleACL.CREATE, connectedUser);
+  const [contentType, setContentType] = useState<'json' | 'yaml' | 'xml'>('json');
 
   const history = useHistory();
 
@@ -164,7 +165,9 @@ const CreateCacheWizard = (props: { cacheManager: CacheManager; create: boolean
   const stepReview = {
     id: 6,
     name: t('caches.create.review.nav-title'),
-    component: <ReviewCacheConfig setReviewConfig={setReviewConfig} />,
+    component: (
+      <ReviewCacheConfig setReviewConfig={setReviewConfig} setContentType={setContentType} contentType={contentType} />
+    ),
     canJumpTo: validFeatures(configuration)
   };
 
@@ -333,6 +336,7 @@ const CreateCacheWizard = (props: { cacheManager: CacheManager; create: boolean
         configuration={reviewConfig}
         isModalOpen={isDownloadModalOpen}
         closeModal={() => setIsDownloadModalOpen(false)}
+        contentType={contentType}
       />
     </PageSection>
   );

diff --git a/src/app/Caches/Create/DownloadCacheModal.tsx b/src/app/Caches/Create/DownloadCacheModal.tsx
@@ -27,6 +27,7 @@ const DownloadCacheModal = (props: {
   configuration: string;
   isModalOpen: boolean;
   closeModal: () => void;
+  contentType: 'json' | 'yaml' | 'xml';
 }) => {
   const { t } = useTranslation();
 
@@ -55,12 +56,13 @@ const DownloadCacheModal = (props: {
       // Convert the config to all formats
       // Also to check if the config is valid
       ConsoleServices.caches()
-        .convertToAllFormat(props.cacheName, props.configuration)
+        .convertToAllFormat(props.cacheName, props.configuration, props.contentType)
         .then((r) => {
           if (r.isRight()) {
             setYamlConfig(r.value.yaml);
             setJsonConfig(r.value.json);
             setXmlConfig(r.value.xml);
+            setError('');
           } else {
             setError(r.value.message);
           }

diff --git a/src/app/Caches/Create/LanguageToggleRadios.tsx b/src/app/Caches/Create/LanguageToggleRadios.tsx
@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import { FormGroup, Radio } from '@patternfly/react-core';
+import { ConfigDownloadType } from '@services/infinispanRefData';
+import { useTranslation } from 'react-i18next';
+const LanguageToggleRadios = (props: {
+  language: ConfigDownloadType;
+  setLanguage: (ConfigDownloadType) => void;
+  setContentType: (string) => void;
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <FormGroup hasNoPaddingTop isInline label="Code language" fieldId="code-language-radio-field">
+      <Radio
+        name="language-radio"
+        id="JSON"
+        onChange={() => {
+          props.setLanguage(ConfigDownloadType.JSON);
+          props.setContentType(ConfigDownloadType.JSON.toLowerCase());
+        }}
+        isChecked={(props.language as ConfigDownloadType) == ConfigDownloadType.JSON}
+        label={t('caches.create.review.json')}
+      />
+      <Radio
+        name="language-radio"
+        id="XML"
+        onChange={() => {
+          props.setLanguage(ConfigDownloadType.XML);
+          props.setContentType(ConfigDownloadType.XML.toLowerCase());
+        }}
+        isChecked={(props.language as ConfigDownloadType) == ConfigDownloadType.XML}
+        label={t('caches.create.review.xml')}
+      />
+      <Radio
+        name="language-radio"
+        id="YAML"
+        onChange={() => {
+          props.setLanguage(ConfigDownloadType.YAML);
+          props.setContentType(ConfigDownloadType.YAML.toLowerCase());
+        }}
+        isChecked={(props.language as ConfigDownloadType) == ConfigDownloadType.YAML}
+        label={t('caches.create.review.yaml')}
+      />
+    </FormGroup>
+  );
+};
+
+export default LanguageToggleRadios;
diff --git a/src/app/Caches/Create/ReviewCacheConfig.tsx b/src/app/Caches/Create/ReviewCacheConfig.tsx
@@ -1,29 +1,70 @@
 import React, { useEffect, useState } from 'react';
-import { Flex, Form, FormGroup, Text, TextContent, TextVariants } from '@patternfly/react-core';
+import { Alert, AlertVariant, Flex, Form, FormGroup, Text, TextContent, TextVariants } from '@patternfly/react-core';
 import { CodeEditor } from '@patternfly/react-code-editor';
 import { useTranslation } from 'react-i18next';
 import { CacheConfigUtils } from '@services/cacheConfigUtils';
 import { useCreateCache } from '@app/services/createCacheHook';
+import LanguageToggleRadios from './LanguageToggleRadios';
+import { ConfigDownloadType } from '@services/infinispanRefData';
+import { ConsoleServices } from '@services/ConsoleServices';
 
-const ReviewCacheConfig = (props: { setReviewConfig: (string) => void }) => {
+const ReviewCacheConfig = (props: {
+  setReviewConfig: (string) => void;
+  setContentType: (string) => void;
+  contentType: 'json' | 'yaml' | 'xml';
+}) => {
   const { configuration } = useCreateCache();
   const { t } = useTranslation();
   const [config, setConfig] = useState(CacheConfigUtils.createCacheConfigFromData(configuration));
 
+  const [language, setLanguage] = useState(ConfigDownloadType.JSON);
+  const [jsonConfig, setJsonConfig] = useState(CacheConfigUtils.createCacheConfigFromData(configuration));
+  const [yamlConfig, setYamlConfig] = useState('');
+  const [xmlConfig, setXmlConfig] = useState('');
+  const [error, setError] = useState('');
+
   useEffect(() => {
-    const jsonFormatConfig = CacheConfigUtils.createCacheConfigFromData(configuration);
-    setConfig(jsonFormatConfig);
-    props.setReviewConfig(jsonFormatConfig);
-  }, []);
+    props.setReviewConfig(config);
+
+    if (configuration && config) {
+      // Convert the config to all formats
+      // Also to check if the config is valid
+      ConsoleServices.caches()
+        .convertToAllFormat(configuration.start.cacheName, config, props.contentType)
+        .then((r) => {
+          if (r.isRight()) {
+            setYamlConfig(r.value.yaml);
+            setJsonConfig(r.value.json);
+            setXmlConfig(r.value.xml);
+            setError('');
+          } else {
+            setError(r.value.message);
+          }
+        });
+    }
+  }, [config, configuration]);
+
+  useEffect(() => {
+    language === ConfigDownloadType.JSON
+      ? setConfig(jsonConfig)
+      : language === ConfigDownloadType.YAML
+      ? setConfig(yamlConfig)
+      : setConfig(xmlConfig);
+  }, [jsonConfig, yamlConfig, xmlConfig, language]);
 
   const onChangeConfig = (editedConfig) => {
     props.setReviewConfig(editedConfig);
-    setConfig(config);
+    setConfig(editedConfig);
   };
 
   const displayCacheConfigEditor = () => {
     return (
       <FormGroup fieldId="cache-config">
+        {error !== '' && (
+          <Alert style={{ marginBottom: '1rem' }} title="Invalid configuration" variant={AlertVariant.danger}>
+            {error}
+          </Alert>
+        )}
         <CodeEditor
           onChange={onChangeConfig}
           isLineNumbersVisible
@@ -53,7 +94,7 @@ const ReviewCacheConfig = (props: { setReviewConfig: (string) => void }) => {
           <Text component={TextVariants.h4}>{configuration.start.cacheName}</Text>
         </Flex>
       </TextContent>
-
+      <LanguageToggleRadios language={language} setLanguage={setLanguage} setContentType={props.setContentType} />
       {displayCacheConfigEditor()}
     </Form>
   );