Merge pull request #345 from zenml-io/QA-Fixes

Qa fixes

Author: danialraza03

src/ui/components/forms/index.tsx

@@ -282,7 +282,7 @@ export const MakeSecretField = (
                 borderRadius: '4px',
                 boxShadow: 'var(--cardShadow)',
                 width: '100%',
-                
+
                 height: '185px',
                 overflowY: 'auto',
                 overflowX: 'hidden',
@@ -348,12 +348,14 @@ export const MakeSecretField = (
 
 export const EditField = (
   props: {
+    filteredSecretId?: string;
     label: string;
     labelColor: any;
     placeholder: any;
     value: string;
     defaultValue?: string;
     optional: boolean;
+    viewSecretDetail?: any;
   } & any,
 ): JSX.Element => {
   return (
@@ -365,16 +367,48 @@ export const EditField = (
           optional={props.optional}
           labelColor={props.labelColor}
           InputComponent={
-            <TextInput
-              {...props}
-              style={{
-                backgroundColor: props.disabled && '#E9EAEC',
-                borderWidth: props.disabled && '0px',
-              }}
-              defaultValue={props?.defaultValue}
-              value={props.value}
-              placeholder={props.placeholder}
-            />
+            <>
+              {props.filteredSecretId ? (
+                <Box
+                  paddingLeft="md"
+                  style={{
+                    height: '40px',
+                    width: '30vw',
+                    backgroundColor: props.disabled && '#F6F7F7',
+                    borderWidth: props.disabled && '0px',
+                    borderRadius: '4px',
+                    justifyContent: 'flex-start',
+                    alignItems: 'center',
+                    display: 'flex',
+                  }}
+                >
+                  <Paragraph
+                    onClick={() => props.viewSecretDetail()}
+                    style={{
+                      cursor: 'pointer',
+                      textAlign: 'center',
+                      fontSize: '16px',
+                      color: '#22BBDD',
+                      textDecorationLine: 'underline',
+                    }}
+                  >
+                    {props.defaultValue}
+                  </Paragraph>
+                </Box>
+              ) : (
+                <TextInput
+                  {...props}
+                  style={{
+                    backgroundColor: props.disabled && '#E9EAEC',
+                    borderWidth: props.disabled && '0px',
+                  }}
+                  filteredSecretId={props.filteredSecretId}
+                  defaultValue={props?.defaultValue}
+                  value={props.value}
+                  placeholder={props.placeholder}
+                />
+              )}
+            </>
           }
         />
         {!props.disabled && (

src/ui/layouts/NonEditableConfig/index.tsx

@@ -9,8 +9,15 @@ import {
 import { ToggleField } from '../common/FormElement';
 import styles from './index.module.scss';
 import { useService } from './useService';
+import { routePaths } from '../../../routes/routePaths';
+import { useSelector } from 'react-redux';
+import { secretSelectors, workspaceSelectors } from '../../../redux/selectors';
+import { useHistory } from '../../hooks';
 
 export const NonEditableConfig: React.FC<{ details: any }> = ({ details }) => {
+  const secrets = useSelector(secretSelectors.mySecrets);
+  const selectedWorkspace = useSelector(workspaceSelectors.selectedWorkspace);
+  const history = useHistory();
   const { flavor } = useService({
     details,
   });
@@ -27,12 +34,26 @@ export const NonEditableConfig: React.FC<{ details: any }> = ({ details }) => {
 
   const getFormElement: any = (elementName: any, elementSchema: any) => {
     if (flavor?.config_schema?.properties[elementName]?.type === 'string') {
+      const extracted = elementSchema.split(/\./)[0];
+      const secretName = extracted.replace(/{{|}}|\./g, '').trim();
+      const filteredSecret = secrets?.filter(
+        (item) => item.name === secretName,
+      );
       return (
         <>
           {flavor?.config_schema?.properties[elementName].sensitive ? (
             <Box marginTop="lg" style={{ width: '30vw' }}>
               <EditField
                 disabled
+                viewSecretDetail={() => {
+                  history.push(
+                    routePaths.secret.configuration(
+                      filteredSecret[0]?.id,
+                      selectedWorkspace,
+                    ),
+                  );
+                }}
+                filteredSecretId={filteredSecret[0]?.id}
                 // onKeyDown={(e: any) => onPressEnter(e, 'string', elementName)}
                 // onChangeText={(e: any) => onPressEnter(e, 'string', elementName)}
                 label={titleCase(elementName) + ' (Secret)'}

src/ui/layouts/NonEditableConfig/useService.ts

@@ -1,10 +1,15 @@
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 // import { stackComponentSelectors } from '../../../redux/selectors';
 
 // import YAML from 'json2yaml';
 import { useEffect, useState } from 'react';
 // import { useLocationPath } from '../../hooks';
-import { flavorPagesActions, flavorsActions } from '../../../redux/actions';
+import {
+  flavorPagesActions,
+  flavorsActions,
+  secretsActions,
+} from '../../../redux/actions';
+import { workspaceSelectors } from '../../../redux/selectors';
 
 interface ServiceInterface {
   flavor: any;
@@ -13,7 +18,7 @@ interface ServiceInterface {
 export const useService = ({ details }: { details: any }): ServiceInterface => {
   // const locationPath = useLocationPath();
   const [flavor, setFlavor] = useState();
-  // debugger;
+  const selectedWorkspace = useSelector(workspaceSelectors.selectedWorkspace);
   const dispatch = useDispatch();
   useEffect(() => {
     setFetching(true);
@@ -28,6 +33,12 @@ export const useService = ({ details }: { details: any }): ServiceInterface => {
         onFailure: () => setFetching(false),
       }),
     );
+    dispatch(
+      secretsActions.getMy({
+        size: 1000,
+        workspace: selectedWorkspace,
+      }),
+    );
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

src/ui/layouts/secrets/RegisterSecret/Register/index.tsx

@@ -191,7 +191,7 @@ export const Register: React.FC<Props> = (state: any) => {
           updatedRouteState.state.inputData[
             state.state.secretKey
           ] = `{{ ${secretName}.${inputFields[0].key} }}`;
-
+          updatedRouteState.state.secretId = id;
           history.push(state.state.pathName, updatedRouteState);
         } else if (state?.state?.routeFromEditComponent) {
           const updatedRouteState = {
@@ -201,6 +201,7 @@ export const Register: React.FC<Props> = (state: any) => {
             state.state.secretKey
           ] = `{{ ${secretName}.${inputFields[0].key} }}`;
 
+          updatedRouteState.state.secretId = id;
           history.push(state.state.pathName, updatedRouteState);
         } else {
           history.push(routePaths.secret.configuration(id, selectedWorkspace));

src/ui/layouts/secrets/Selector/Selector.tsx

@@ -17,6 +17,7 @@ interface Props {
   onSetInputFields: any;
   routeState?: any;
   onSubmit?: any;
+  childStateRef?: any;
 }
 
 const Selector: React.FC<Props> = ({
@@ -25,14 +26,30 @@ const Selector: React.FC<Props> = ({
   values,
   routeState,
   onSubmit,
+  childStateRef,
 }) => {
   // const [key, setKey] = useState('');
   // const [value, setValue] = useState('');
   const [inputFields, setInputFields] = useState([]) as any;
+  useEffect(() => {
+    if (values?.length) {
+      childStateRef.current = inputFields;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [inputFields, childStateRef]);
   useEffect(() => {
     // ...values,
     // { key: '', value: '' },
     if (
+      (routeState?.state?.routeFromComponent ||
+        routeState?.state?.routeFromEditComponent) &&
+      routeState?.state?.secretId
+    ) {
+      setInputFields([...values]);
+      if (values?.length) {
+        childStateRef.current = values;
+      }
+    } else if (
       routeState?.state?.routeFromComponent ||
       routeState?.state?.routeFromEditComponent
     ) {
@@ -58,20 +75,21 @@ const Selector: React.FC<Props> = ({
         };
 
         setInputFields([...inputFields, secretKeyValuefromRoute]);
+      } else if (values?.length && !routeState?.state?.routeFromEditComponent) {
+        setInputFields([...values]);
+        childStateRef.current = values;
       }
-      // else if (values?.length && !routeState?.state?.routeFromEditComponent) {
-      //   setInputFields([...values]);
-      // }
     } else if (
       values?.length &&
       !routeState?.state?.routeFromComponent &&
       !routeState?.state?.routeFromEditComponent
     ) {
       setInputFields([...values]);
+      childStateRef.current = values;
     } else {
       setInputFields([{ key: '', value: '' }]);
     }
-
+    // debugger;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [routeState, setInputFields]);
   console.log(inputFields, routeState, 'inputFisdsdeldsinputFields');
@@ -107,6 +125,7 @@ const Selector: React.FC<Props> = ({
 
     setInputFields(values);
     onSetInputFields(values);
+
     // const keys = values.map((object) => object.key);
     // const value = values.map((object) => object.value);