ZKUI-403 // Federetate Certificate Button

Fix import and use of isPlatformAdmin function
scality · Nov 20, 2023 · a6b047c · a6b047c
1 parent 664a0d0
commit a6b047c
Show file tree

Hide file tree

Showing 6 changed files with 153 additions and 113 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -76,7 +76,7 @@
     "@hookform/resolvers": "^2.8.8",
     "@js-temporal/polyfill": "^0.4.3",
     "@monaco-editor/react": "^4.4.5",
-    "@scality/core-ui": "github:scality/core-ui#0.102.0",
+    "@scality/core-ui": "github:scality/core-ui#0.104.0",
     "@scality/module-federation": "github:scality/module-federation#1.1.0",
     "@types/react-table": "^7.7.10",
     "@types/react-virtualized": "^9.21.20",

diff --git a/src/react/next-architecture/ui/CertificateDownloadButton.tsx b/src/react/next-architecture/ui/CertificateDownloadButton.tsx
@@ -0,0 +1,34 @@
+import { FederatedComponent } from '@scality/module-federation';
+import { useConfigRetriever, useDeployedApps } from './ConfigProvider';
+
+export const CertificateDownloadButton = () => {
+  const deployedApps = useDeployedApps();
+  const artescaUI = deployedApps.find(
+    (app: { kind: string }) => app.kind === 'artesca-base-ui',
+  );
+  const { retrieveConfiguration } = useConfigRetriever();
+
+  if (artescaUI) {
+    const url =
+      artescaUI.url +
+      retrieveConfiguration({
+        configType: 'build',
+        name: artescaUI.name,
+      }).spec.remoteEntryPath;
+
+    return (
+      <FederatedComponent
+        module={'./certificates/DownloadButton'}
+        scope={'artesca'}
+        url={url}
+        app={artescaUI}
+        props={{
+          filename: 'artesca-ca.pem',
+          variant: 'outline',
+        }}
+      ></FederatedComponent>
+    );
+  }
+
+  return <></>;
+};
diff --git a/src/react/next-architecture/ui/ConfigProvider.tsx b/src/react/next-architecture/ui/ConfigProvider.tsx
@@ -37,6 +37,10 @@ export function useDeployedMetalk8sInstances(): SolutionUI[] {
   });
 }
 
+export function useConfigRetriever() {
+  return configGlobal.hooks.useConfigRetriever();
+}
+
 export function useGrafanaURL() {
   const { retrieveConfiguration } = configGlobal.hooks.useConfigRetriever();
   const instances = useDeployedMetalk8sInstances();
@@ -74,11 +78,7 @@ function ErrorFallback() {
   return <ErrorPage500 data-cy="sc-error-page500" locale={'en'} />;
 }
 
-export function ConfigProvider({
-  children,
-}: {
-  children: React.ReactNode;
-}): React.ReactNode {
+export function ConfigProvider({ children }: { children: React.ReactNode }) {
   return (
     <ErrorBoundary FallbackComponent={ErrorFallback}>
       <ComponentWithFederatedImports

diff --git a/src/react/ui-elements/Veeam/VeeamSummary.tsx b/src/react/ui-elements/Veeam/VeeamSummary.tsx
@@ -3,15 +3,25 @@ import { Button, CopyButton } from '@scality/core-ui/dist/next';
 import { Stack } from '@scality/core-ui/dist/spacing';
 import { spacing } from '@scality/core-ui/dist/style/theme';
 import { useHistory } from 'react-router-dom';
+import { useTheme } from 'styled-components';
+import { CertificateDownloadButton } from '../../next-architecture/ui/CertificateDownloadButton';
+import { useAuthGroups } from '../../utils/hooks';
 import { Clipboard } from '../Clipboard';
 import { HideCredential } from '../Hide';
-import { ModalBody } from '../Modal';
 import Table, * as T from '../TableKeyValue';
 
 type VeeamSummaryProps = Record<string, never>;
 
+const TEMP_SERVICE_POINT = 'https://s3.pod-choco.local';
+const TEMP_REGION = 'us-east-1';
+const TEMP_BUCKET_NAME = 'veeam-bucket';
+const TEMP_ACCESS_KEY_ID = 'JLVWC9DX45XLY0K9PVEX';
+const TEMP_ACCESS_KEY_SECRET = 'EPJGOdLwTK';
+
 export const VeeamSummary = (_: VeeamSummaryProps) => {
   const history = useHistory();
+  const theme = useTheme();
+  const { isPlatformAdmin } = useAuthGroups();
 
   return (
     <Form
@@ -27,118 +37,100 @@ export const VeeamSummary = (_: VeeamSummaryProps) => {
             variant="primary"
             label={'Continue'}
             onClick={() => {
-              history.push('/');
+              //TODO: Redirect to the veeam bucket
+              history.push('/accounts/Veeam12/buckets/veeam-bucket');
             }}
           />
         </Stack>
       }
+      style={{
+        height: 'calc(100vh - 100px)',
+      }}
     >
-      <ModalBody>
-        <Text isEmphazed>
-          The following configuration has been applied in order to make ARTESCA
-          ready for Veeam. <br />
-          You can now use this information to set up the Veeam Server.
-        </Text>{' '}
-        <CopyButton
-          textToCopy={`Username\tveeam\nAccess key ID\tJLVWC9DX45XLY0K9PVEX\nSecret Access key\tEPJGOdLwTK`}
-          label="all"
-          variant="outline"
-          tooltip={{
-            overlay:
-              'Copy all the information below and paste it in a safe place. You will not be able to retrieve the Secret Access key afterwards.',
-            placement: 'right',
-          }}
-          size="inline"
-        />
-        <br />
-        <Table style={{ marginTop: spacing.sp16 }}>
-          <T.Body>
-            <T.Row>
-              <T.Key> Account name </T.Key>
-              <T.Value> veeam </T.Value>
-            </T.Row>
-            <T.Row>
-              <T.Key> Certificate </T.Key>
-              <T.Value>
-                <Button
-                  label="Artesca-CA Root"
-                  variant="outline"
-                  size="inline"
-                  icon={<Icon name="Download" />}
-                  tooltip={{
-                    overlay:
-                      'Download the Artesca-CA root certificate and add it to your Veeam Server.',
-                    placement: 'right',
-                  }}
-                ></Button>{' '}
-              </T.Value>
-            </T.Row>
-            <T.Row>
-              <T.Key> Service point </T.Key>
-              <T.Value> https://s3.pod-choco.local </T.Value>
-              <T.ExtraCell>
-                {' '}
-                <Clipboard text={'https://s3.pod-choco.local'} />{' '}
-              </T.ExtraCell>
-            </T.Row>
-            <T.Row>
-              <T.Key> Region </T.Key>
-              <T.Value> us-east-1 </T.Value>
-              <T.ExtraCell>
-                {' '}
-                <Clipboard text={'us-east-1'} />{' '}
-              </T.ExtraCell>
-            </T.Row>
-          </T.Body>
-        </Table>
-        <br />
-        <b>Credentials</b>
-        <br />
+      <div
+        style={{
+          backgroundColor: theme.brand.backgroundLevel3,
+          padding: spacing.sp16,
+        }}
+      >
+        <Stack gap="r16">
+          <Text isEmphazed>
+            ARTESCA is now ready for Veeam. You can use this data to set up your
+            Veeam application.
+          </Text>
+          <CopyButton
+            textToCopy={`Username\tveeam\nAccess key ID\t${TEMP_ACCESS_KEY_ID}\nSecret Access key\t${TEMP_ACCESS_KEY_SECRET}`}
+            label="all"
+            variant="outline"
+            tooltip={{
+              overlay:
+                'Copy all the information below and paste it in a safe place. You will not be able to retrieve the Secret Access key afterwards.',
+              placement: 'right',
+            }}
+            size="inline"
+          />
+        </Stack>
         <br />
-        <Banner icon={<Icon name="Exclamation-triangle" />} variant="warning">
-          The Secret Access key cannot be retrieved afterwards, so make sure to
-          keep and secure it now. <br />
-          You will be able to create new Access keys at any time.
-        </Banner>
-        <Table
-          style={{
-            marginTop: spacing.sp16,
-          }}
-        >
-          <T.Body>
-            <T.Row>
-              <T.Key> Access key ID </T.Key>
-              <T.Value>JLVWC9DX45XLY0K9PVEX</T.Value>
-              <T.ExtraCell>
-                {' '}
-                <Clipboard text={'JLVWC9DX45XLY0K9PVEX'} />{' '}
-              </T.ExtraCell>
-            </T.Row>
-            <T.Row>
-              <T.Key> Secret Access key </T.Key>
-              <T.Value>
-                {' '}
-                <HideCredential credentials={'EPJGOdLwTK'} />{' '}
-              </T.Value>
-              <T.ExtraCell>
-                {' '}
-                <Clipboard text={'EPJGOdLwTK'} />{' '}
-              </T.ExtraCell>
-            </T.Row>
-          </T.Body>
-        </Table>
         <br />
-        <b>Bucket</b>
+        <Stack direction="vertical" gap="r16">
+          <b>Information for Veeam Account</b>
+          <Table>
+            <T.Body>
+              <T.Row>
+                <T.Key> Service point </T.Key>
+                <T.Value> {TEMP_SERVICE_POINT}</T.Value>
+                <T.ExtraCell>
+                  <Clipboard text={TEMP_SERVICE_POINT} />
+                </T.ExtraCell>
+              </T.Row>
+              <T.Row>
+                <T.Key> Region </T.Key>
+                <T.Value>{TEMP_REGION}</T.Value>
+                <T.ExtraCell>
+                  <Clipboard text={TEMP_REGION} />
+                </T.ExtraCell>
+              </T.Row>
+            </T.Body>
+          </Table>
+        </Stack>
         <br />
+        <Stack direction="vertical" gap="r16">
+          <b>Credentials</b>
+          <Banner icon={<Icon name="Exclamation-triangle" />} variant="warning">
+            The Secret Access key cannot be retrieved afterwards, so make sure
+            to keep and secure it now. <br />
+            You will be able to create new Access keys at any time.
+          </Banner>
+          <Table>
+            <T.Body>
+              <T.Row>
+                <T.Key> Access key ID </T.Key>
+                <T.Value>{TEMP_ACCESS_KEY_ID}</T.Value>
+                <T.ExtraCell>
+                  <Clipboard text={TEMP_ACCESS_KEY_ID} />
+                </T.ExtraCell>
+              </T.Row>
+              <T.Row>
+                <T.Key> Secret Access key </T.Key>
+                <T.Value>
+                  <HideCredential credentials={TEMP_ACCESS_KEY_SECRET} />
+                </T.Value>
+                <T.ExtraCell>
+                  <Clipboard text={TEMP_ACCESS_KEY_SECRET} />
+                </T.ExtraCell>
+              </T.Row>
+            </T.Body>
+          </Table>
+        </Stack>
         <br />
-        <Table>
+        <Table style={{ marginTop: spacing.sp16 }}>
+          <b>Bucket</b>
           <T.Body>
             <T.Row>
               <T.Key> Name </T.Key>
-              <T.Value> veeam-bucket </T.Value>
+              <T.Value>{TEMP_BUCKET_NAME}</T.Value>
               <T.ExtraCell>
-                {' '}
-                <Clipboard text={'veeam-repository'} />{' '}
+                <Clipboard text={TEMP_BUCKET_NAME} />
               </T.ExtraCell>
             </T.Row>
             <T.Row>
@@ -154,7 +146,20 @@ export const VeeamSummary = (_: VeeamSummaryProps) => {
             </T.Row>
           </T.Body>
         </Table>
-      </ModalBody>
+        <br />
+        {isPlatformAdmin ? (
+          <Stack direction="vertical" gap="r16">
+            <b>Certificate</b>
+            <Text color="textSecondary">
+              Trust the ARTESCA CA Root on your Veeam server to maintain
+              uninterrupted service.
+            </Text>
+            <CertificateDownloadButton />
+          </Stack>
+        ) : (
+          <></>
+        )}
+      </div>
     </Form>
   );
 };
diff --git a/src/react/utils/hooks.ts b/src/react/utils/hooks.ts
@@ -267,8 +267,9 @@ export const useAuthGroups = () => {
   const userGroups = user.userData?.groups || [];
 
   const isStorageManager = userGroups.includes('StorageManager');
+  const isPlatformAdmin = userGroups.includes('PlatformAdmin');
 
-  return { isStorageManager };
+  return { isStorageManager, isPlatformAdmin };
 };
 
 export const usePrevious = <T>(value: T): T | undefined => {