Merge pull request #388 from zenml-io/UAT

Author: Cahllagerfeld

src/ui/layouts/common/layouts/AuthenticatedLayout/DeploymentBanner/index.tsx

@@ -6,16 +6,24 @@ function DeploymentBanner() {
     <aside className={styles.deploymentBanner}>
       <p className={styles.deploymentBanner__paragraph}>
         ZenML is running locally. In order to run your pipelines in the cloud,
-        you need to deploy ZenML. See the{' '}
+        you need to{' '}
         <a
           target="_blank"
           rel="noopener noreferrer"
           href="https://docs.zenml.io/platform-guide/set-up-your-mlops-platform/deploy-zenml"
+        >
+          deploy ZenML yourself
+        </a>
+        , or spin up ZenML with one-click using the{' '}
+        <a
+          target="_blank"
+          rel="noopener noreferrer"
+          href="https://sandbox.zenml.io/"
         >
           {' '}
-          docs
-        </a>{' '}
-        to learn how.
+          MLOps Platform Sandbox
+        </a>
+        .
       </p>
     </aside>
   );

src/ui/layouts/plugins/ListPlugins/index.tsx

@@ -122,33 +122,6 @@ const ListPlugins: React.FC = () => {
 
           <Filters currentFilters={filters} updateFilters={setFilters} />
         </FlexBox>
-        <FlexBox style={{ flexDirection: 'column', gap: '12px' }}>
-          <Paragraph style={{ fontSize: '20px', fontWeight: 600 }}>
-            ZenML Hub: Streamlining MLOps Collaboration with Reusable Components
-          </Paragraph>
-          <Paragraph>
-            The ZenML Hub is a{' '}
-            <a
-              target="_blank"
-              rel="noopener noreferrer"
-              href="https://blog.zenml.io/zenml-hub-launch/"
-            >
-              plugin system
-            </a>{' '}
-            that allows users to contribute and consume stack component flavors,
-            pipelines, steps, materializers, and other pieces of code seamlessly
-            in their ML pipelines. Below are a list of community contributed
-            plugins. If you would like to create your own plugin, click{' '}
-            <a
-              target="_blank"
-              rel="noopener noreferrer"
-              href="https://docs.zenml.io/user-guide/advanced-guide/leverage-community-contributed-plugins"
-            >
-              here
-            </a>
-            .
-          </Paragraph>
-        </FlexBox>
 
         {/* list plugins */}
         <FlexBox flexWrap={true} padding="lg">

src/ui/layouts/plugins/shared/Layout.tsx

@@ -8,18 +8,50 @@ export const PluginsLayout: React.FC<{
 }> = ({ title, children }) => {
   return (
     <FlexBox fullWidth padding="lg2" flexDirection="column">
-      <H2 style={{ fontWeight: 500 }}>{title}</H2>
-      <FlexBox fullWidth justifyContent="flex-end">
-        <Paragraph color="grey" style={{ fontSize: '14px' }}>
-          Check out our easy to read{' '}
-          <a
-            href="https://docs.zenml.io/user-guide/advanced-guide/leverage-community-contributed-plugins"
-            target="__blank"
-            rel="noopener noreferrer"
-          >
-            docs
-          </a>
-        </Paragraph>
+      <FlexBox flexDirection="row" style={{ gap: '8px' }}>
+        <FlexBox flexDirection="column">
+          <H2 style={{ fontWeight: 500 }}>{title}</H2>
+
+          <Paragraph style={{ marginTop: '8px' }}>
+            The ZenML Hub is a{' '}
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              href="https://blog.zenml.io/zenml-hub-launch/"
+            >
+              plugin system
+            </a>{' '}
+            that allows users to contribute and consume stack component flavors,
+            pipelines, steps, materializers, and other pieces of code seamlessly
+            in their ML pipelines. Below are a list of community contributed
+            plugins. If you would like to create your own plugin, click{' '}
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              href="https://docs.zenml.io/starter-guide/collaborate/zenml-hub"
+            >
+              here
+            </a>
+            .
+          </Paragraph>
+        </FlexBox>
+        <FlexBox
+          fullWidth
+          flexDirection="column"
+          alignItems="end"
+          justifyContent="flex-end"
+        >
+          <Paragraph color="grey" style={{ fontSize: '14px', flexShrink: 0 }}>
+            Check out our easy to read{' '}
+            <a
+              href="https://docs.zenml.io/starter-guide/collaborate/zenml-hub"
+              target="__blank"
+              rel="noopener noreferrer"
+            >
+              docs
+            </a>
+          </Paragraph>
+        </FlexBox>
       </FlexBox>
 
       {children}

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

@@ -63,22 +63,36 @@ const HeaderWithButtons: React.FC<{
     // className={cn(styles.header, 'd-none d-md-block')}
     className={styles.header2}
   >
-    <FlexBox className="d-none d-md-flex">
+    <FlexBox flexDirection="column" className="d-none d-md-flex">
       <Paragraph
         style={{
           fontSize: '42px',
           fontWeight: 'bold',
           lineHeight: '48px',
           color: '#424240',
+          marginBottom: '8px',
         }}
       >
         {title}
       </Paragraph>
+      <Paragraph>
+        Don't have any MLOps infrastructure deployed? Check out the{' '}
+        <a
+          target="_blank"
+          rel="noopener noreferrer"
+          href="https://sandbox.zenml.io"
+          style={{ color: '#443E99' }}
+        >
+          MLOps Platform Sandbox
+        </a>{' '}
+        to get a production-ready stack in seconds.
+      </Paragraph>
     </FlexBox>
 
     <FlexBox
-      alignItems="center"
+      alignItems="end"
       flexWrap
+      style={{ height: '100%' }}
       justifyContent="flex-end"
       className={styles.rightWrapper}
     >