Merge branch 'improvement/ARTESCA-16333-truststore-polishing' into q/4.1

Author: bert-e

package-lock.json

@@ -70,7 +70,7 @@
     "@hookform/resolvers": "^2.8.8",
     "@monaco-editor/react": "^4.4.5",
     "@scality/certchain": "1.4.0",
-    "@scality/core-ui": "0.178.0",
+    "@scality/core-ui": "0.184.0",
     "@scality/module-federation": "^1.4.1",
     "@types/react-table": "^7.7.10",
     "@types/react-virtualized": "^9.21.20",

package.json

@@ -6,6 +6,7 @@ import {
 } from '@scality/core-ui/dist/components/form/Form.component';
 import { Checkbox } from '@scality/core-ui/dist/components/checkbox/Checkbox.component';
 import { Input } from '@scality/core-ui/dist/components/inputv2/inputv2';
+import { LOCATION_EDITOR_FORCED_LABEL_WIDTH } from '../LocationEditor';
 
 type State = {
   serverSideEncryption: boolean;
@@ -64,7 +65,7 @@ export default class LocationDetailsAws extends React.Component<
   render() {
     return (
       <>
-        <FormSection>
+        <FormSection forceLabelWidth={LOCATION_EDITOR_FORCED_LABEL_WIDTH}>
           <FormGroup
             label="AWS Access Key"
             id="accessKey"
@@ -122,7 +123,7 @@ export default class LocationDetailsAws extends React.Component<
             }
           />
         </FormSection>
-        <FormSection>
+        <FormSection forceLabelWidth={LOCATION_EDITOR_FORCED_LABEL_WIDTH}>
           <FormGroup
             label=""
             id="bucketMatch"

src/react/locations/LocationDetails/LocationDetailsAws.tsx

@@ -24,7 +24,9 @@ import {
 } from '../../../types/config';
 import { useConfig } from '../../next-architecture/ui/ConfigProvider';
 import { checkIsRingS3Reseller } from '../utils';
-import { Icon, Link, Stack, Text } from '@scality/core-ui';
+import { InfoMessage, Text } from '@scality/core-ui';
+import { Box } from '@scality/core-ui/dist/next';
+import { LOCATION_EDITOR_FORCED_LABEL_WIDTH } from '../LocationEditor';
 
 const computeInitialEndpoint = (locationType: LocationTypeKey) => {
   if (locationType === JAGUAR_S3_LOCATION_KEY) {
@@ -93,7 +95,7 @@ export default function LocationDetailsAwsCustom({
 
   return (
     <>
-      <FormSection forceLabelWidth={180}>
+      <FormSection forceLabelWidth={LOCATION_EDITOR_FORCED_LABEL_WIDTH}>
         <FormGroup
           id="accessKey"
           content={
@@ -173,25 +175,29 @@ export default function LocationDetailsAwsCustom({
         buckets will have a path-style access."
               helpErrorPosition="bottom"
             />
-
-            <Stack
-              direction="vertical"
-              style={{ width: 'calc(20.5rem + 2rem + 180px)' }}
-            >
-              <Text color="textPrimary">
-                When using an HTTPS endpoint, you must add the certificate
-                provided by its TLS provider to the truststore. You can check if
-                the certificate is already present in the truststore by clicking
-                the button below, and add it if it is missing.
-              </Text>
-              <Link
-                href="/data/truststore"
-                target="_blank"
-                style={{ alignSelf: 'flex-end' }}
+            {formState.endpoint.startsWith('https') && (
+              <Box
+                style={{
+                  // Label width + padding + Input width
+                  width: `calc(20.5rem + 2rem + ${LOCATION_EDITOR_FORCED_LABEL_WIDTH}px)`,
+                }}
               >
-                Open trust store <Icon name="External-link" />
-              </Link>
-            </Stack>
+                <InfoMessage
+                  title="Certificate for HTTPS Endpoint"
+                  content={
+                    <Text>
+                      When using an HTTPS endpoint, you must add the endpoint's
+                      SSL/TLS certificate to the truststore for secure
+                      communication. You can check the certificates already
+                      present by opening the truststore, and import the
+                      endpoint's certificate if it is missing.
+                    </Text>
+                  }
+                  link={'/data/truststore'}
+                  linkText="Open truststore"
+                />
+              </Box>
+            )}
           </>
         ) : (
           <></>

src/react/locations/LocationDetails/LocationDetailsAwsCustom.tsx

@@ -8,6 +8,7 @@ import {
   LocationAzureSharedAccessSignature,
   LocationAzureSharedKey,
 } from '../../../js/managementClient/api';
+import { LOCATION_EDITOR_FORCED_LABEL_WIDTH } from '../LocationEditor';
 type State = {
   bucketMatch: boolean;
   accessKey?: string;
@@ -137,7 +138,7 @@ export default class LocationDetailsAzure extends React.Component<
 
   render() {
     return (
-      <FormSection forceLabelWidth={220}>
+      <FormSection forceLabelWidth={LOCATION_EDITOR_FORCED_LABEL_WIDTH}>
         <FormGroup
           label="Blob endpoint"
           id="endpoint"

src/react/locations/LocationDetails/LocationDetailsAzure.tsx

@@ -15,6 +15,7 @@ import {
   LocationAzureAuth,
 } from '../../../js/managementClient/api';
 import { ColdStorageIconLabel } from '../../ui-elements/ColdStorageIcon';
+import { LOCATION_EDITOR_FORCED_LABEL_WIDTH } from '../LocationEditor';
 
 type State = {
   endpoint: string;
@@ -193,7 +194,7 @@ const LocationDetailsAzureArchive = ({
 
   return (
     <>
-      <FormSection forceLabelWidth={210}>
+      <FormSection forceLabelWidth={LOCATION_EDITOR_FORCED_LABEL_WIDTH}>
         <FormGroup
           id="temperature"
           label="Temperature"
@@ -235,7 +236,10 @@ const LocationDetailsAzureArchive = ({
           }
         />
       </FormSection>
-      <FormSection title={{ name: 'Queue' }} forceLabelWidth={210}>
+      <FormSection
+        title={{ name: 'Queue' }}
+        forceLabelWidth={LOCATION_EDITOR_FORCED_LABEL_WIDTH}
+      >
         <FormGroup
           id="queue.type"
           label="Queue type"
@@ -410,7 +414,10 @@ const LocationDetailsAzureArchive = ({
           <></>
         )}
       </FormSection>
-      <FormSection title={{ name: 'Authentication' }} forceLabelWidth={210}>
+      <FormSection
+        title={{ name: 'Authentication' }}
+        forceLabelWidth={LOCATION_EDITOR_FORCED_LABEL_WIDTH}
+      >
         <FormGroup
           id="auth"
           label="Authentication type"

src/react/locations/LocationDetails/LocationDetailsAzureArchive.tsx

@@ -2,6 +2,7 @@ import { FormGroup, FormSection } from '@scality/core-ui';
 import { Input } from '@scality/core-ui/dist/components/inputv2/inputv2';
 import React, { useState } from 'react';
 import { LocationDetailsFormProps } from '.';
+import { LOCATION_EDITOR_FORCED_LABEL_WIDTH } from '../LocationEditor';
 
 type FieldNames = 'endpoint' | 'stsEndpoint' | 'accessKey' | 'secretKey';
 
@@ -203,7 +204,7 @@ function LocationDetailsCRR({
   };
 
   return (
-    <FormSection forceLabelWidth={143}>
+    <FormSection forceLabelWidth={LOCATION_EDITOR_FORCED_LABEL_WIDTH}>
       {fieldConfigs.map((field) => (
         <FormGroup
           key={field.name}

src/react/locations/LocationDetails/LocationDetailsCRR.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { LocationDetailsFormProps } from '.';
 import { FormGroup, FormSection } from '@scality/core-ui';
 import { Input } from '@scality/core-ui/dist/components/inputv2/inputv2';
+import { LOCATION_EDITOR_FORCED_LABEL_WIDTH } from '../LocationEditor';
 type State = {
   bucketMatch: boolean;
   accessKey: string;
@@ -58,7 +59,7 @@ export default class LocationDetailsDOSpaces extends React.Component<
 
   render() {
     return (
-      <FormSection>
+      <FormSection forceLabelWidth={LOCATION_EDITOR_FORCED_LABEL_WIDTH}>
         <FormGroup
           id="accessKey"
           label="Spaces Access Key"

src/react/locations/LocationDetails/LocationDetailsDOSpaces.tsx

@@ -2,6 +2,7 @@ import { FormGroup, FormSection } from '@scality/core-ui';
 import { Input } from '@scality/core-ui/dist/components/inputv2/inputv2';
 import React from 'react';
 import { LocationDetailsFormProps } from '.';
+import { LOCATION_EDITOR_FORCED_LABEL_WIDTH } from '../LocationEditor';
 
 type State = {
   bucketMatch: boolean;
@@ -58,7 +59,7 @@ export default class LocationDetailsGcp extends React.Component<
 
   render() {
     return (
-      <FormSection>
+      <FormSection forceLabelWidth={LOCATION_EDITOR_FORCED_LABEL_WIDTH}>
         <FormGroup
           id="accessKey"
           label="GCP Access Key"
@@ -117,7 +118,7 @@ export default class LocationDetailsGcp extends React.Component<
 
         <FormGroup
           id="mpuBucketName"
-          label="Target Bucket for Multi-part Uploads"
+          label="Target Bucket for Multi&#8209;part Uploads"
           required
           labelHelpTooltip="A secondary Google Cloud Storage bucket required for handling
             multi-part uploads on GCP using AWS MPU initiate/complete/abort

src/react/locations/LocationDetails/LocationDetailsGcp.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { LocationDetailsFormProps } from '.';
 import InputList from '../../ui-elements/InputList';
 import { FormSection } from '@scality/core-ui';
+import { LOCATION_EDITOR_FORCED_LABEL_WIDTH } from '../LocationEditor';
 
 type State = {
   bootstrapList: Array<string>;
@@ -42,7 +43,7 @@ export default class LocationDetailsHyperdriveV2 extends React.Component<
 
   render() {
     return (
-      <FormSection>
+      <FormSection forceLabelWidth={LOCATION_EDITOR_FORCED_LABEL_WIDTH}>
         <InputList
           id="bootstrapList"
           required