added secret as link

talhainvenxion · talhainvenxion · commit 1dc1b3e3ccda · 2023-04-30T02:29:45.000+05:00
diff --git a/src/ui/components/forms/index.tsx b/src/ui/components/forms/index.tsx
@@ -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 && (
diff --git a/src/ui/layouts/NonEditableConfig/index.tsx b/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)'}
diff --git a/src/ui/layouts/NonEditableConfig/useService.ts b/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
   }, []);
 
diff --git a/src/ui/layouts/stackComponents/StackDetail/Configuration/index.tsx b/src/ui/layouts/stackComponents/StackDetail/Configuration/index.tsx
@@ -21,6 +21,7 @@ import {
   useSelector,
 } from '../../../../hooks';
 import {
+  secretSelectors,
   sessionSelectors,
   userSelectors,
   workspaceSelectors,
@@ -46,6 +47,8 @@ export const Configuration: React.FC<{ stackId: TId; loading?: boolean }> = ({
   });
   const user = useSelector(userSelectors.myUser);
   const [fetching, setFetching] = useState(false);
+  const secrets = useSelector(secretSelectors.mySecrets);
+
   const authToken = useSelector(sessionSelectors.authenticationToken);
   const selectedWorkspace = useSelector(workspaceSelectors.selectedWorkspace);
   const dispatch = useDispatch();
@@ -55,7 +58,7 @@ export const Configuration: React.FC<{ stackId: TId; loading?: boolean }> = ({
     s.replace(/^_*(.)|_+(.)/g, (s: any, c: string, d: string) =>
       c ? c.toUpperCase() : ' ' + d.toUpperCase(),
     );
-
+  console.log(secrets, 'asdasd1232323cwwcwf');
   const onCallApi = (updateConfig: any) => {
     // ;
     const { id }: any = workspaces.find(
@@ -247,12 +250,28 @@ export const Configuration: React.FC<{ stackId: TId; loading?: boolean }> = ({
 
   const getFormElement: any = (elementName: any, elementSchema: any) => {
     if (flavor?.configSchema?.properties[elementName]?.type === 'string') {
+      const extracted = elementSchema.split(/\./)[0];
+      const secretName = extracted.replace(/{{|}}|\./g, '').trim();
+      const filteredSecret = secrets?.filter(
+        (item) => item.name === secretName,
+      );
+
+      // console.log(filteredSecret, 'asd123ffwwvweer');
       return (
         <>
           {flavor?.configSchema?.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)'}
diff --git a/src/ui/layouts/stackComponents/StackDetail/Configuration/useService.ts b/src/ui/layouts/stackComponents/StackDetail/Configuration/useService.ts
@@ -1,12 +1,14 @@
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import {
   flavorSelectors,
   stackComponentSelectors,
+  workspaceSelectors,
 } from '../../../../../redux/selectors';
 
 import YAML from 'json2yaml';
 import { useEffect, useState } from 'react';
 import { useLocationPath } from '../../../../hooks';
+import { secretsActions } from '../../../../../redux/actions';
 // import {
 //   flavorPagesActions,
 //   // flavorsActions,
@@ -23,13 +25,21 @@ export const useService = ({ stackId }: { stackId: TId }): ServiceInterface => {
   const stackComponent: TStack = useSelector(
     stackComponentSelectors.stackComponentForId(stackId),
   );
+  const selectedWorkspace = useSelector(workspaceSelectors.selectedWorkspace);
+
   const locationPath = useLocationPath();
   const [flavor, setFlavor] = useState();
   const flavors = useSelector(flavorSelectors.myFlavorsAll);
-
+  const dispatch = useDispatch();
   // const dispatch = useDispatch();
   useEffect(() => {
     setFlavor(flavors[0] as any);
+    dispatch(
+      secretsActions.getMy({
+        size: 1000,
+        workspace: selectedWorkspace,
+      }),
+    );
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [locationPath]);
