Merge pull request #538 from zenml-io/UAT

zenml-io · Jan 8, 2024 · 700944d · 700944d
2 parents 9b0f0c8 + 7b7cae7
commit 700944d
Show file tree

Hide file tree

Showing 8 changed files with 191 additions and 133 deletions.
diff --git a/appserverSchema.d.ts b/appserverSchema.d.ts
diff --git a/src/api/types.ts b/src/api/types.ts
@@ -18,7 +18,7 @@ export type ServiceConnector = components['schemas']['ServiceConnectorResponse']
 export type ServiceConnectorTypes = components['schemas']['ServiceConnectorTypeModel'];
 
 //secrets
-export type Secret = components['schemas']['SecretResponseModel'];
+export type Secret = components['schemas']['SecretResponse'];
 
 //runs
 export type Run = components['schemas']['PipelineRunResponse'];

diff --git a/src/ui/layouts/secrets/SecretDetail/Configuration/index.tsx b/src/ui/layouts/secrets/SecretDetail/Configuration/index.tsx
@@ -15,13 +15,14 @@ import { useService } from './useService';
 import { routePaths } from '../../../../../routes/routePaths';
 import { useHistory, useSelector } from '../../../../hooks';
 import { workspaceSelectors } from '../../../../../redux/selectors';
+import { Secret } from '../../../../../api/types';
 
 export const Configuration: React.FC<{
   secretId: TId;
   tiles?: any;
   fetching?: boolean;
 }> = ({ secretId, fetching }) => {
-  const { secret } = useService({ secretId });
+  const { secret }: { secret: Secret } = useService({ secretId });
   const history = useHistory();
 
   const selectedWorkspace = useSelector(workspaceSelectors.selectedWorkspace);
@@ -52,7 +53,7 @@ export const Configuration: React.FC<{
           label={'Scope'}
           labelColor="rgba(66, 66, 64, 0.5)"
           placeholder={'Choose a scope'}
-          value={secret?.scope}
+          value={secret?.body?.scope || ''}
           onChange={() => {}}
           disabled
           options={[] as any}
@@ -67,7 +68,7 @@ export const Configuration: React.FC<{
       </Box>
 
       <Box marginTop="md">
-        <SelectorDisabled inputFields={secret.values} width="30vw" />
+        <SelectorDisabled inputFields={secret.body?.values} width="30vw" />
       </Box>
 
       <FlexBox

diff --git a/src/ui/layouts/secrets/SecretDetail/getHeaderCols.tsx b/src/ui/layouts/secrets/SecretDetail/getHeaderCols.tsx
@@ -89,14 +89,14 @@ export const GetHeaderCols = ({
       width: '15%',
       renderRow: (secret: Secret) => (
         <>
-          {secret.scope && (
+          {secret.body?.scope && (
             <FlexBox alignItems="center">
-              <div data-tip data-for={secret.scope}>
+              <div data-tip data-for={secret.body?.scope}>
                 <Paragraph size="small" color="black">
-                  {secret.scope}
+                  {secret.body?.scope}
                 </Paragraph>
               </div>
-              <Tooltip id={secret.scope} text={secret.scope} />
+              <Tooltip id={secret.body?.scope} text={secret.body?.scope} />
             </FlexBox>
           )}
         </>
@@ -110,24 +110,29 @@ export const GetHeaderCols = ({
         </Paragraph>
       ),
       width: '15%',
-      renderRow: (secret: any) => {
-        const initials = getInitialsFromEmail(secret?.user?.name as string);
+      renderRow: (secret: Secret) => {
+        const initials = getInitialsFromEmail(
+          secret?.body?.user?.name as string,
+        );
         return (
           <FlexBox alignItems="center">
-            <div data-tip data-for={secret?.user?.name}>
+            <div data-tip data-for={secret?.body?.user?.name}>
               <FlexBox alignItems="center">
-                {secret?.user?.name && (
+                {secret?.body?.user?.name && (
                   <Box paddingRight="sm">
                     <ColoredCircle color="secondary" size="sm">
                       {initials}
                     </ColoredCircle>
                   </Box>
                 )}
 
-                <Paragraph size="small">{secret?.user?.name}</Paragraph>
+                <Paragraph size="small">{secret?.body?.user?.name}</Paragraph>
               </FlexBox>
             </div>
-            <Tooltip id={secret?.user?.name} text={secret?.user?.name} />
+            <Tooltip
+              id={secret?.body?.user?.name}
+              text={secret?.body?.user?.name}
+            />
           </FlexBox>
         );
       },
@@ -141,18 +146,18 @@ export const GetHeaderCols = ({
       width: '20%',
       renderRow: (secret: Secret) => (
         <>
-          {secret.created && (
+          {secret.body?.created && (
             <FlexBox alignItems="center">
-              <div data-tip data-for={formatDateToSort(secret.created)}>
+              <div data-tip data-for={formatDateToSort(secret.body?.created)}>
                 <FlexBox alignItems="center">
                   <Paragraph color="grey" size="tiny">
-                    {formatDateToDisplayOnTable(secret.created)}
+                    {formatDateToDisplayOnTable(secret.body?.created)}
                   </Paragraph>
                 </FlexBox>
               </div>
               <Tooltip
-                id={formatDateToSort(secret.created)}
-                text={formatDateToDisplayOnTable(secret.created)}
+                id={formatDateToSort(secret.body?.created)}
+                text={formatDateToDisplayOnTable(secret.body?.created)}
               />
             </FlexBox>
           )}

diff --git a/src/ui/layouts/secrets/Secrets/List/UserName/useService.ts b/src/ui/layouts/secrets/Secrets/List/UserName/useService.ts
@@ -19,13 +19,15 @@ export const useService = ({
   const dispatch = useDispatch();
   const [fetching, setFetching] = useState<boolean>(false);
 
-  const user = useSelector(userSelectors.userForId(secret.user?.id as string));
+  const user = useSelector(
+    userSelectors.userForId(secret.body?.user?.id as string),
+  );
 
   useEffect(() => {
     setFetching(true);
     dispatch(
       userActions.userForId({
-        userId: secret.user?.id as string,
+        userId: secret.body?.user?.id as string,
         onSuccess: () => setFetching(false),
         onFailure: () => setFetching(false),
       }),

diff --git a/src/ui/layouts/secrets/Secrets/List/getHeaderCols.tsx b/src/ui/layouts/secrets/Secrets/List/getHeaderCols.tsx
@@ -19,6 +19,7 @@ import { HeaderCol } from '../../../common/Table';
 import { SortingHeader } from './ForSorting/SortingHeader';
 import { Sorting, SortingDirection } from './ForSorting/types';
 import { useService } from './ForSorting/useServiceForSorting';
+import { Secret } from '../../../../../api/types';
 
 export const GetHeaderCols = ({
   expendedRow,
@@ -76,7 +77,7 @@ export const GetHeaderCols = ({
       ),
       testId: 'Id',
       width: '20%',
-      renderRow: (secret: any) => (
+      renderRow: (secret: Secret) => (
         <FlexBox alignItems="center">
           <div data-tip data-for={secret.id}>
             <FlexBox.Row style={{ alignItems: 'center' }}>
@@ -118,7 +119,7 @@ export const GetHeaderCols = ({
       ),
       testId: 'Name',
       width: '30%',
-      renderRow: (secret: any) => (
+      renderRow: (secret: Secret) => (
         <FlexBox alignItems="center">
           <div data-tip data-for={secret.name}>
             <Paragraph size="small" color="black">
@@ -152,14 +153,14 @@ export const GetHeaderCols = ({
       ),
       testId: 'Scope',
       width: '15%',
-      renderRow: (secret: any) => (
+      renderRow: (secret: Secret) => (
         <FlexBox alignItems="center">
-          <div data-tip data-for={secret.scope}>
+          <div data-tip data-for={secret.body?.scope}>
             <Paragraph size="small" color="black">
-              {secret.scope}
+              {secret.body?.scope}
             </Paragraph>
           </div>
-          <Tooltip id={secret.scope} text={secret.scope} />
+          <Tooltip id={secret.body?.scope} text={secret.body?.scope} />
         </FlexBox>
       ),
     },
@@ -185,24 +186,29 @@ export const GetHeaderCols = ({
       ),
       testId: 'Author',
       width: '15%',
-      renderRow: (secret: any) => {
-        const initials = getInitialsFromEmail(secret?.user?.name as string);
+      renderRow: (secret: Secret) => {
+        const initials = getInitialsFromEmail(
+          secret?.body?.user?.name as string,
+        );
         return (
           <FlexBox alignItems="center">
-            <div data-tip data-for={secret?.user?.name}>
+            <div data-tip data-for={secret?.body?.user?.name}>
               <FlexBox alignItems="center">
-                {secret?.user?.name && (
+                {secret?.body?.user?.name && (
                   <Box paddingRight="sm">
                     <ColoredCircle color="secondary" size="sm">
                       {initials}
                     </ColoredCircle>
                   </Box>
                 )}
 
-                <Paragraph size="small">{secret?.user?.name}</Paragraph>
+                <Paragraph size="small">{secret?.body?.user?.name}</Paragraph>
               </FlexBox>
             </div>
-            <Tooltip id={secret?.user?.name} text={secret?.user?.name} />
+            <Tooltip
+              id={secret?.body?.user?.name}
+              text={secret?.body?.user?.name}
+            />
           </FlexBox>
         );
       },
@@ -216,13 +222,15 @@ export const GetHeaderCols = ({
             asc: (filteredSecrets: any[]) =>
               _.orderBy(
                 filteredSecrets,
-                (secret: any) => new Date(secret.created).getTime(),
+                (secret: Secret) =>
+                  new Date(secret.body?.created || '').getTime(),
                 ['asc'],
               ),
             desc: (filteredSecrets: any[]) =>
               _.orderBy(
                 filteredSecrets,
-                (secret: any) => new Date(secret.created).getTime(),
+                (secret: Secret) =>
+                  new Date(secret.body?.created || '').getTime(),
                 ['desc'],
               ),
           })}
@@ -236,18 +244,18 @@ export const GetHeaderCols = ({
       ),
       testId: 'created_at',
       width: '20%',
-      renderRow: (secret: any) => (
+      renderRow: (secret: Secret) => (
         <FlexBox alignItems="center">
-          <div data-tip data-for={formatDateToSort(secret.created)}>
+          <div data-tip data-for={formatDateToSort(secret.body?.created || '')}>
             <FlexBox alignItems="center">
               <Paragraph color="grey" size="tiny">
-                {formatDateToDisplayOnTable(secret.created)}
+                {formatDateToDisplayOnTable(secret.body?.created || '')}
               </Paragraph>
             </FlexBox>
           </div>
           <Tooltip
-            id={formatDateToSort(secret.created)}
-            text={formatDateToDisplayOnTable(secret.created)}
+            id={formatDateToSort(secret.body?.created || '')}
+            text={formatDateToDisplayOnTable(secret.body?.created)}
           />
         </FlexBox>
       ),

diff --git a/src/ui/layouts/secrets/UpdateSecret/UpdateConfig/index.tsx b/src/ui/layouts/secrets/UpdateSecret/UpdateConfig/index.tsx
@@ -36,7 +36,7 @@ export const UpdateConfig: React.FC<{
   const workspaces = useSelector(workspaceSelectors.myWorkspaces);
   const { secret } = useService({ secretId });
   const [secretName, setSecretName] = useState(secret?.name);
-  const [scope, setScope] = useState(secret?.scope);
+  const [scope, setScope] = useState(secret?.body?.scope);
   const [inputFields, setInputFields] = useState([]) as any;
   const [loading, setLoading] = useState(false);
   const childStateRef = useRef(null);
@@ -45,7 +45,7 @@ export const UpdateConfig: React.FC<{
     setInputFields(childStateRef.current as any);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [childStateRef]);
-  const valuesIntoArray = Object.entries(secret?.values || {}).map(
+  const valuesIntoArray = Object.entries(secret?.body?.values || {}).map(
     ([key, value]) => ({
       key,
       value,

diff --git a/src/ui/layouts/secrets/UpdateSecret/getHeaderCols.tsx b/src/ui/layouts/secrets/UpdateSecret/getHeaderCols.tsx
@@ -78,12 +78,12 @@ export const GetHeaderCols = ({
       width: '15%',
       renderRow: (secret: Secret) => (
         <FlexBox alignItems="center">
-          <div data-tip data-for={secret.scope}>
+          <div data-tip data-for={secret.body?.scope}>
             <Paragraph size="small" color="black">
-              {secret.scope}
+              {secret.body?.scope}
             </Paragraph>
           </div>
-          <Tooltip id={secret.scope} text={secret.scope} />
+          <Tooltip id={secret.body?.scope} text={secret.body?.scope} />
         </FlexBox>
       ),
     },
@@ -129,16 +129,16 @@ export const GetHeaderCols = ({
       width: '20%',
       renderRow: (secret: Secret) => (
         <FlexBox alignItems="center">
-          <div data-tip data-for={formatDateToSort(secret.created)}>
+          <div data-tip data-for={formatDateToSort(secret.body?.created || '')}>
             <FlexBox alignItems="center">
               <Paragraph color="grey" size="tiny">
-                {formatDateToDisplayOnTable(secret.created)}
+                {formatDateToDisplayOnTable(secret.body?.created)}
               </Paragraph>
             </FlexBox>
           </div>
           <Tooltip
-            id={formatDateToSort(secret.created)}
-            text={formatDateToDisplayOnTable(secret.created)}
+            id={formatDateToSort(secret.body?.created || '')}
+            text={formatDateToDisplayOnTable(secret.body?.created)}
           />
         </FlexBox>
       ),