Merge pull request #233 from zenml-io/UAT

Merge UAT to main

Author: strickvl

src/ui/components/icons/assets/ModelRegistry.svg

@@ -63,6 +63,7 @@ import { ReactComponent as ChatDots } from './assets/ChatDots.svg';
 import { ReactComponent as Run } from './assets/Run.svg';
 import { ReactComponent as ImageBuilder } from './assets/ImageBuilder.svg';
 import { ReactComponent as Pen } from './assets/Pen.svg';
+import { ReactComponent as ModelRegistry } from './assets/ModelRegistry.svg';
 // import { ReactComponent as Inprogress } from './assets/InProgress.svg';
 // import { ReactComponent as Cached } from './assets/Cached.svg';
 // import { ReactComponent as RightArrow } from './assets/RightArrow.svg';
@@ -200,6 +201,7 @@ const icons = {
     useStroke: true,
   }),
   pen: createIcon({ Component: Pen, useStroke: true }),
+  model_registry: createIcon({ Component: ModelRegistry, useStroke: true }),
 
   // paginations
   paginationFirst: createIcon({ Component: PaginationFirst, useStroke: true }),

src/ui/components/icons/index.tsx

@@ -42,8 +42,13 @@ export const SidePopup: React.FC<{
           <Box paddingTop="sm">
             <iframe
               title="ZenML - Organization Embed"
-              style={{ border: '0px', height: '100vh', width: '100%' }}
-              // src="https://zenml.hellonext.co/embed/home?no_header=true"
+              style={{
+                border: '0px',
+                height: '100vh',
+                width: '100%',
+                paddingBottom: '200px',
+              }}
+              // src="https://apidocs.zenml.io/0.35.0/"
               src={flavor?.docsUrl}
             ></iframe>
           </Box>

src/ui/layouts/common/SidePopup/index.tsx

@@ -82,6 +82,11 @@ const Component = (props: any) => {
   return (
     <Box
       style={{
+        height: '75%',
+        width: '20%',
+        overflow: 'hidden',
+        scrollBehavior: 'smooth',
+        overflowY: 'scroll',
         borderRight: '1px solid #A8A8A8',
         padding: '0 50px 0 33px',
         marginTop: '10rem',
@@ -95,7 +100,7 @@ const Component = (props: any) => {
         />
       </Box> */}
 
-      <Box style={{ marginTop: '-20px' }}>
+      <Box style={{}}>
         {/* {props?.fromRegisterComponent && (
           <FlexBox
             onClick={() => selectSection('all_components')}
@@ -362,7 +367,7 @@ const Component = (props: any) => {
                   ...sectionStyle,
                   background: formatSectionColor(item),
                 }}
-                marginTop="sm"
+                // marginTop="sm"
               >
                 <Box>
                   <icons.orchestrator
@@ -439,6 +444,34 @@ const Component = (props: any) => {
                 </Box>
               </FlexBox>
             )}
+            {item === 'model_registry' && (
+              <FlexBox
+                onClick={() => selectSection(item)}
+                style={{
+                  ...sectionStyle,
+                  background: formatSectionColor(item),
+                }}
+                marginTop="sm"
+              >
+                <Box>
+                  <icons.model_registry
+                    color={
+                      selectedComp === item
+                        ? iconColors.white
+                        : iconColors.primary
+                    }
+                    size={iconSizes.md}
+                  />
+                </Box>
+                <Box>
+                  <Paragraph
+                    style={{ color: formatTextColor(item), ...textStyle }}
+                  >
+                    {formatText(item)}
+                  </Paragraph>
+                </Box>
+              </FlexBox>
+            )}
             {item === 'image_builder' && (
               <FlexBox
                 onClick={() => selectSection(item)}
@@ -480,7 +513,8 @@ const Component = (props: any) => {
               item !== 'annotator' &&
               item !== 'alerter' &&
               item !== 'image_builder' &&
-              item !== 'artifact_store' && (
+              item !== 'artifact_store' &&
+              item !== 'model_registry' && (
                 <FlexBox
                   onClick={() => selectSection(item)}
                   style={{

src/ui/layouts/stackComponents/Component.tsx

@@ -20,9 +20,14 @@ export const SidePopup: React.FC<{
         <Box paddingTop="sm">
           <iframe
             title="ZenML - Organization Embed"
-            style={{ border: '0px', height: '100vh', width: '100%' }}
-            // src="https://zenml.hellonext.co/embed/home?no_header=true"
-            src={flavor.sdkDocsUrl}
+            style={{
+              border: '0px',
+              height: '100vh',
+              width: '100%',
+              paddingBottom: '200px',
+            }}
+            // src="https://apidocs.zenml.io/0.35.0/"
+            src={flavor?.sdkDocsUrl ? flavor?.sdkDocsUrl : flavor?.docsUrl}
           ></iframe>
         </Box>
 

src/ui/layouts/stackComponents/ConfigureComponent/SidePopup/index.tsx

@@ -4,7 +4,7 @@
   top: 0;
   padding: 10px 0;
   background-color: #fff;
-  z-index: 99;
+  z-index: 98;
 
 }