Merge pull request #347 from zenml-io/dev

Dev

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: '417px' }}>
+            <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)'}
@@ -44,7 +65,7 @@ export const NonEditableConfig: React.FC<{ details: any }> = ({ details }) => {
               />
             </Box>
           ) : (
-            <Box marginTop="lg" style={{ width: '417px' }}>
+            <Box marginTop="lg" style={{ width: '30vw' }}>
               <EditField
                 disabled
                 // onKeyDown={(e: any) => onPressEnter(e, 'string', elementName)}
@@ -75,7 +96,7 @@ export const NonEditableConfig: React.FC<{ details: any }> = ({ details }) => {
               <label htmlFor="key">{titleCase(elementName)}</label>
             </Paragraph>
           </Box>
-          <FlexBox marginTop="sm" style={{ width: '417px' }}>
+          <FlexBox marginTop="sm" style={{ width: '30vw' }}>
             <textarea
               disabled
               className={styles.textArea}
@@ -118,7 +139,7 @@ export const NonEditableConfig: React.FC<{ details: any }> = ({ details }) => {
     // }
     if (flavor?.config_schema?.properties[elementName]?.type === 'object') {
       return (
-        <Box marginTop="lg" style={{ width: '417px' }}>
+        <Box marginTop="lg" style={{ width: '30vw' }}>
           <Paragraph size="body" style={{ color: 'black' }}>
             <label htmlFor={elementName}>{titleCase(elementName)}</label>
           </Paragraph>
@@ -144,7 +165,10 @@ export const NonEditableConfig: React.FC<{ details: any }> = ({ details }) => {
               >
                 <FlexBox.Row>
                   <Box
-                    style={{ display: 'flex', alignItems: 'center' }}
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                    }}
                     marginTop="sm"
                   >
                     <div
@@ -228,7 +252,11 @@ export const NonEditableConfig: React.FC<{ details: any }> = ({ details }) => {
               {Object.entries(elementSchema).map(([key, value], index) => (
                 <FlexBox.Row>
                   <Box
-                    style={{ display: 'flex', alignItems: 'center' }}
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      width: '29.8vw',
+                    }}
                     marginTop="sm"
                   >
                     <div
@@ -342,7 +370,7 @@ export const NonEditableConfig: React.FC<{ details: any }> = ({ details }) => {
                         &#x27A4;
                       </div>
 
-                      <div className="form-group" style={{ width: '390px' }}>
+                      <div className="form-group" style={{ width: '28.3vw' }}>
                         <EditField
                           disabled
                           className={styles.field}
@@ -454,7 +482,7 @@ export const NonEditableConfig: React.FC<{ details: any }> = ({ details }) => {
     <FlexBox.Column marginTop="xl" fullWidth>
       <FlexBox.Row flexDirection="column">
         {/* <Container> */}
-        <Box style={{ width: '417px' }}>
+        <Box style={{ width: '30vw' }}>
           <EditField
             disabled
             onChangeText={() => console.log('')}

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/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/SideFooter/index.tsx

@@ -12,7 +12,7 @@ export const SideFooter: React.FC = () => {
         <Separator.LightNew />
       </Box>
 
-      <div style={{ marginBottom: '-11px' }}>
+      <div style={{ marginBottom: '-11px', marginLeft: '-3.5px' }}>
         {/* <MenuItemExternal
         id="documentation"
         Icon={() => <icons.docs color={iconColors.white} size={iconSizes.md} />}

src/ui/layouts/pipelines/Header/index.module.scss

@@ -6,14 +6,19 @@
   box-shadow: 0px 4px 20px -2px rgba(0, 0, 0, 0.03);
 }
 
-.iconStyle { 
-  background-color: #F4F4F4; 
+.header2 {
+  padding-bottom: 40px !important;
+  box-shadow: 0px 4px 20px -2px rgba(0, 0, 0, 0.03) !important;
+}
+
+.iconStyle {
+  background-color: #f4f4f4;
   text-align: center;
-  height: 35px; 
+  height: 35px;
   width: 40px;
   border-radius: 3px;
   cursor: pointer;
-} 
+}
 
 @media (max-width: $md-breakpoint) {
   .dynamicHeaderRight {

src/ui/layouts/pipelines/Header/index.tsx

@@ -57,9 +57,10 @@ const HeaderWithButtons: React.FC<{
   renderRight?: () => JSX.Element;
 }> = ({ breadcrumbs, renderRight, title }) => (
   <FlexBox
+    marginTop="xl"
     alignItems="center"
     justifyContent="space-between"
-    className={styles.header}
+    className={styles.header2}
   >
     <FlexBox className="d-none d-md-flex">
       <Paragraph

src/ui/layouts/runs/Header/index.module.scss

@@ -6,14 +6,14 @@
   box-shadow: 0px 4px 20px -2px rgba(0, 0, 0, 0.03);
 }
 
-.iconStyle { 
-  background-color: #F4F4F4; 
+.iconStyle {
+  background-color: #f4f4f4;
   text-align: center;
-  height: 35px; 
+  height: 35px;
   width: 40px;
   border-radius: 3px;
   cursor: pointer;
-} 
+}
 
 @media (max-width: $md-breakpoint) {
   .dynamicHeaderRight {

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));
@@ -259,7 +260,7 @@ export const Register: React.FC<Props> = (state: any) => {
           />
         </Box> */}
 
-        <Box style={{ width: '329px' }}>
+        <Box style={{ width: '30vw' }}>
           <FormTextField
             required={true}
             label={'Secret name'}
@@ -269,7 +270,7 @@ export const Register: React.FC<Props> = (state: any) => {
             onChange={(val: string) => setSecretName(val)}
           />
         </Box>
-        <Box marginTop="lg" style={{ width: '329px' }}>
+        <Box marginTop="lg" style={{ width: '30vw' }}>
           <FormDropdownField
             label={'Scope'}
             labelColor="rgba(66, 66, 64, 0.5)"

src/ui/layouts/secrets/SecretDetail/Configuration/index.tsx

@@ -74,7 +74,7 @@ export const Configuration: React.FC<{
 
   return (
     <FlexBox.Column marginLeft="xl">
-      <Box marginTop="lg" style={{ width: '417px' }}>
+      <Box marginTop="lg" style={{ width: '30vw' }}>
         <FormTextField
           label={'Secret name'}
           labelColor="rgba(66, 66, 64, 0.5)"
@@ -89,7 +89,7 @@ export const Configuration: React.FC<{
           }}
         />
       </Box>
-      <Box marginTop="lg" style={{ width: '417px' }}>
+      <Box marginTop="lg" style={{ width: '30vw' }}>
         <FormDropdownField
           label={'Scope'}
           labelColor="rgba(66, 66, 64, 0.5)"
@@ -109,7 +109,7 @@ export const Configuration: React.FC<{
       </Box>
 
       <Box marginTop="md">
-        <SelectorDisabled inputFields={secret.values} width="417px" />
+        <SelectorDisabled inputFields={secret.values} width="30vw" />
       </Box>
 
       <FlexBox