Merge pull request #64 from scale8/ingest-wizard-ui-fixes

Fixed ui issues for actions and macros

Author: cwbeck

ui/src/components/atoms/InputTypes/TextInputWithMacros.tsx

@@ -99,8 +99,18 @@ const TextInputWithMacros: FC<TextInputWithMacrosProps> = (props: TextInputWithM
                     horizontal: 'right',
                 }}
             >
-                <Box width={250} height={330} p={1} display="flex" flexDirection="column">
-                    <Box flex={1}>
+                <Box width={250} height={400} p={1} display="flex" flexDirection="column">
+                    <Box
+                        flex={1}
+                        sx={{
+                            display: 'flex',
+                            flexDirection: 'column',
+                            '& .DrawerFormField': {
+                                width: '100%',
+                                margin: (theme) => theme.spacing(0, 0, 3),
+                            },
+                        }}
+                    >
                         <PlatformValueEdit
                             availableDataContainers={getAvailableDataContainers(
                                 appPlatformRevisions,

ui/src/components/atoms/PlatformValueEdit.tsx

@@ -40,7 +40,17 @@ const PlatformValueEdit: FC<PlatformValueEditProps> = (props: PlatformValueEditP
     const match = value.match(/^{{([^}]+)}}$/);
     const path = match === null ? '' : match[1];
 
-    const [initialDataContainerId, initialDataElement, initialObjectKey] = splitTwice(path, '.');
+    const [initialDataContainerPersistingId, initialDataElement, initialObjectKey] = splitTwice(
+        path,
+        '.',
+    );
+
+    const initialDataContainer = availableDataContainers.find(
+        (dataContainer) => dataContainer.persisting_id === initialDataContainerPersistingId,
+    );
+
+    const initialDataContainerId = initialDataContainer?.id ?? '';
+
     const [useCustom, setUseCustom] = useState(false);
 
     const [values, setValues] = useState({
@@ -49,10 +59,14 @@ const PlatformValueEdit: FC<PlatformValueEditProps> = (props: PlatformValueEditP
         objectKey: initialObjectKey ?? '',
     });
 
+    const currentDataContainer = availableDataContainers.find(
+        (dataContainer) => dataContainer.id === values.dataContainerId,
+    );
+
     useEffect(() => {
-        if (values.dataElement !== '') {
+        if (values.dataElement !== '' && currentDataContainer) {
             setValue(
-                `{{${values.dataContainerId}.${values.dataElement}${
+                `{{${currentDataContainer.persisting_id}.${values.dataElement}${
                     values.objectKey === '' ? '' : '.'
                 }${values.objectKey}}}`,
             );
@@ -61,10 +75,6 @@ const PlatformValueEdit: FC<PlatformValueEditProps> = (props: PlatformValueEditP
         }
     }, [values]);
 
-    const currentDataContainer = availableDataContainers.find(
-        (dataContainer) => dataContainer.id === values.dataContainerId,
-    );
-
     const noContainers = availableDataContainers.length < 1;
 
     const notAvailable =
@@ -130,7 +140,7 @@ const PlatformValueEdit: FC<PlatformValueEditProps> = (props: PlatformValueEditP
     }, [currentDataContainer]);
 
     const currentDataElement = (currentDataContainer?.platform_data_maps ?? []).find(
-        (_) => _.id === values.dataElement,
+        (_) => _.key === values.dataElement,
     );
 
     const isDataElementObject =
@@ -213,6 +223,7 @@ const PlatformValueEdit: FC<PlatformValueEditProps> = (props: PlatformValueEditP
                         name="dataElement"
                         values={platformDataMapsToSelectValues(
                             currentDataContainer.platform_data_maps,
+                            true,
                         )}
                         formProps={formProps}
                         required

ui/src/components/molecules/IngestEndpointPayloadInputType.tsx

@@ -11,6 +11,7 @@ import { Box } from '@mui/material';
 import { SelectValueWithSub } from '../../hooks/form/useFormValidation';
 import FormWarning from '../atoms/FormWarning';
 import { AlertWarning } from '../atoms/AlertWarning';
+import CopyBlock from '../atoms/CopyBlock';
 
 type SelectIngestEndpointProps = {
     ingestEndpointId: string;
@@ -207,6 +208,16 @@ const IngestEndpointPayloadInputType: FC<IngestEndpointPayloadInputTypeProps> =
                 ingestEndpoints={ingestEndpoints}
                 disabled={props.disabled}
             />
+            {ingestEndpointEnvironment !== undefined && (
+                <>
+                    <AlertWarning>
+                        Any changes to the Data Manager Endpoint environment will not be
+                        automatically updated here. You will need to update the revision and
+                        redeploy manually.
+                    </AlertWarning>
+                    <Box mt={2} />
+                </>
+            )}
             <SelectIngestEndpointEnvironment
                 ingestEndpointId={ingestEndpointId}
                 environmentId={environmentId}
@@ -217,12 +228,10 @@ const IngestEndpointPayloadInputType: FC<IngestEndpointPayloadInputTypeProps> =
             {ingestEndpointEnvironment !== undefined && (
                 <>
                     <small>Endpoint</small>
-                    <Box sx={{ color: '#777777', fontWeight: 'bold' }}>{endpoint}</Box>
+                    <Box fontSize={12}>
+                        <CopyBlock text={endpoint} language="html" flat />
+                    </Box>
                     <Box mt={2} />
-                    <AlertWarning>
-                        Any changes to the endpoint environment will not be automatically updated
-                        here. You will need to update the revision and redeploy manually.
-                    </AlertWarning>
                     <DataMapsPayloadBuilder
                         appPlatformRevisions={appPlatformRevisions}
                         initialPayload={initialPayload}

ui/src/utils/DataContainersUtils.tsx

@@ -41,19 +41,20 @@ export const buildDataContainersSelectValues = (
 
 export const platformDataMapsToSelectValues = (
     platformDataMaps: PlatformDataMap[],
+    useKeys = false,
 ): SelectValueWithSub[] => {
     return platformDataMapsToSubAndDeeper(platformDataMaps).map((subAndDeeper) => {
         const MainIcon = getDataMapsIcon(subAndDeeper.icon);
 
         return {
-            key: subAndDeeper.id,
+            key: useKeys ? subAndDeeper.keys.join('.') : subAndDeeper.id,
             text: subAndDeeper.keys.join('.'),
             iconType: subAndDeeper.sub === undefined ? subAndDeeper.icon ?? undefined : undefined,
             icon: subAndDeeper.sub === undefined ? <MainIcon /> : undefined,
             sub: subAndDeeper.sub?.map((sub) => {
                 const SubIcon = getDataMapsIcon(sub.icon);
                 return {
-                    key: sub.id,
+                    key: useKeys ? sub.key : sub.id,
                     text: sub.key,
                     iconType: sub.icon ?? undefined,
                     icon: <SubIcon />,