ZKUI-385 // Veeam Welcome Modal

scality · Oct 24, 2023 · 06b1793 · 06b1793
1 parent 01dc0ae
commit 06b1793
Show file tree

Hide file tree

Showing 6 changed files with 119 additions and 2 deletions.
diff --git a/public/assets/zenko/.well-known/micro-app-configuration b/public/assets/zenko/.well-known/micro-app-configuration
@@ -16,6 +16,12 @@
         "module": "./FederableApp",
         "scope": "zenko"
       }
-    }
+    },
+    "navbarUpdaterComponents": [
+      {
+        "module": "./VeeamWelcomeModal",
+        "scope": "zenko"
+      }
+    ]
   }
 }
diff --git a/public/assets/zenko/.well-known/runtime-app-configuration b/public/assets/zenko/.well-known/runtime-app-configuration
@@ -12,7 +12,10 @@
       "stsEndpoint": "http://127.0.0.1:8383/sts",
       "zenkoEndpoint": "http://127.0.0.1:8383/s3",
       "iamEndpoint": "http://127.0.0.1:8383/iam",
-      "features": ["XDM"],
+      "features": [
+        "XDM",
+        "Veeam"
+      ],
       "basePath": ""
     },
     "auth": {

diff --git a/src/react/ui-elements/Veeam/ArtescaLogo.tsx b/src/react/ui-elements/Veeam/ArtescaLogo.tsx
@@ -0,0 +1,18 @@
+export const ArtescaLogo = () => {
+  return (
+    <svg
+      width="30"
+      height="24"
+      viewBox="0 0 30 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M17.6841 12.0043C18.9179 15.115 21.4233 17.564 24.5848 18.6921V5.2782C21.4233 6.40586 18.9179 8.85528 17.6841 12.0043ZM5.16101 5.2782V18.6921C8.32214 17.564 10.8664 15.115 12.0613 12.0043C10.8664 8.85528 8.32214 6.40586 5.16101 5.2782ZM26.7714 24C21.9525 24 17.6693 21.7202 14.8727 18.18C12.1067 21.7202 7.79337 24 2.97448 24H0V0H2.97448C7.79337 0 12.1067 2.24984 14.8727 5.79C17.6693 2.24984 21.9525 0 26.7714 0H29.7458V24H26.7714Z"
+        fill="#0AADA6"
+      />
+    </svg>
+  );
+};
diff --git a/src/react/ui-elements/Veeam/VeeamLogo.tsx b/src/react/ui-elements/Veeam/VeeamLogo.tsx
@@ -0,0 +1,30 @@
+export const VeeamLogo = () => (
+  <svg
+    width="90"
+    height="16"
+    viewBox="0 0 90 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M16.4004 0.327354C15.6779 -0.0628899 14.7907 0.234035 14.4187 0.989072L9.11058 12.3274C8.98659 12.5713 8.8797 12.7388 8.59751 12.7388C8.31532 12.7388 8.20629 12.5713 8.08444 12.3274L2.77845 0.986951C2.40647 0.231914 1.51929 -0.0628899 0.796714 0.325233C0.0741406 0.715477 -0.208048 1.64231 0.163928 2.39522L5.34807 12.8894L5.9381 14.0813C6.45331 15.1269 7.47303 15.7759 8.59965 15.7759C9.72412 15.7759 10.7439 15.1269 11.2612 14.0813L11.8512 12.8894L17.0354 2.39522C17.4052 1.64443 17.1209 0.717598 16.4004 0.327354Z"
+      fill="#00B336"
+    />
+    <path
+      d="M86.8307 0.154465C85.8324 0.150223 84.958 0.769523 84.539 1.62C83.1901 4.34959 79.2245 12.4705 79.2074 12.498C79.1774 12.5489 79.0941 12.7377 78.923 12.7377C78.7627 12.7377 78.6686 12.5596 78.6387 12.4959C77.324 9.80027 74.7308 4.47684 73.3691 1.7218C72.8453 0.659236 71.9667 0.152344 71.0175 0.152344H71.0154C69.5552 0.152344 68.373 1.3761 68.373 3.041V14.2032C68.373 14.8819 68.7643 15.5097 69.365 15.707C70.3441 16.0251 71.1842 15.1767 71.1842 14.1736L70.979 3.29338C70.979 3.18098 71.1158 3.14068 71.1671 3.23824L76.5822 14.112C77.0845 15.1534 77.9568 15.7748 78.923 15.7748C79.8872 15.7748 80.7594 15.1534 81.2639 14.112L86.6811 3.24036C86.7345 3.13856 86.8756 3.17885 86.8756 3.29762L86.6683 14.2393C86.6683 15.1046 87.3203 15.8024 88.1177 15.7748C88.8873 15.7494 89.4795 15.0155 89.4795 14.1736C89.4795 14.1736 89.4795 5.82573 89.4795 3.04524C89.4816 1.36337 88.2951 0.160827 86.8307 0.154465Z"
+      fill="#00B336"
+    />
+    <path
+      d="M66.5741 13.5081L60.6076 1.83047C60.0902 0.791235 59.0726 0.146484 57.9524 0.146484C57.2491 0.146484 56.5885 0.39887 56.0647 0.844257C55.7505 1.10937 55.4854 1.44447 55.293 1.83259L49.3564 13.4551C49.3499 13.4678 49.3457 13.4805 49.3393 13.4911L49.3307 13.5081C49.0549 14.0489 49.1212 14.6852 49.4483 15.1475C49.4568 15.1603 49.4654 15.1709 49.4739 15.1836C49.4825 15.1963 49.4932 15.209 49.5039 15.2218C49.6108 15.3596 49.739 15.4784 49.8951 15.5717C50.3975 15.8729 50.9918 15.8284 51.4407 15.5187C51.4471 15.5145 51.4535 15.5102 51.4578 15.506C51.4899 15.4826 51.5219 15.4593 51.5519 15.4339C51.5775 15.4127 51.601 15.3893 51.6246 15.366C51.6352 15.3554 51.6459 15.3469 51.6566 15.3363C51.7635 15.2281 51.8554 15.103 51.9281 14.9588L52.1483 14.4964L53.3904 11.9132C53.4224 11.8474 53.4866 11.805 53.5571 11.805H59.0405C59.0405 11.805 59.0405 11.805 59.0427 11.805C59.7759 11.805 60.3724 11.1815 60.3724 10.4158C60.3724 9.64808 59.7759 9.02665 59.0427 9.02665H55.7526H54.9467C54.859 9.02665 54.8035 8.93334 54.8355 8.85062L55.1412 8.20799L57.3838 3.72443L57.3923 3.70534C57.3966 3.69686 57.4009 3.68837 57.4051 3.67989C57.4051 3.67989 57.4051 3.68201 57.4051 3.67989C57.4415 3.60566 57.5612 3.2854 57.7793 3.21966C57.899 3.1836 58.0251 3.18784 58.1106 3.21329C58.3372 3.28116 58.4398 3.559 58.5382 3.7626C58.5382 3.7626 58.5382 3.76472 58.5382 3.7626L63.9767 14.9651C64.2418 15.4826 64.7506 15.7796 65.2765 15.7796C65.4432 15.7796 65.6121 15.7478 65.7767 15.6863C65.7874 15.682 65.7981 15.6799 65.8067 15.6756C65.8473 15.6587 65.8858 15.6396 65.9242 15.6184C65.9392 15.612 65.9542 15.6057 65.967 15.5972C65.9755 15.5929 65.982 15.5866 65.9905 15.5823C66.0012 15.576 66.014 15.5717 66.0247 15.5632C66.0418 15.5526 66.0568 15.5399 66.0739 15.5293C66.0888 15.5187 66.1017 15.5102 66.1145 15.4996C66.1359 15.4826 66.1573 15.4678 66.1786 15.4508C66.2021 15.4317 66.2257 15.4105 66.2492 15.3893C66.2556 15.383 66.262 15.3787 66.2663 15.3724C66.7537 14.9015 66.8969 14.1401 66.5741 13.5081Z"
+      fill="#00B336"
+    />
+    <path
+      d="M20.4044 9.65641H30.4456C30.6358 9.65429 32.19 9.52916 32.19 7.78579C32.1922 3.49311 28.8465 0 24.7355 0C20.6267 0 17.2832 3.49311 17.2832 7.78791C17.2832 7.88547 17.2896 8.15695 17.2896 8.19724C17.2832 13.1007 20.46 15.7391 24.6629 15.983C24.8638 15.9936 25.0605 16 25.2529 16C26.8691 16 28.233 15.5843 29.7145 14.6554C29.8662 14.562 30.4584 14.1697 31.0634 13.3955C31.5444 12.7805 31.5872 11.8579 31.0634 11.3786C30.3088 10.6872 29.5327 11.0604 28.8401 11.6458C27.752 12.5642 26.9097 13.281 24.7398 13.2831C22.694 13.2831 20.7592 12.1251 20.2996 9.81124C20.2825 9.73065 20.3296 9.65641 20.4044 9.65641ZM20.2932 6.78261C20.5733 4.53446 22.1317 2.54083 24.7313 2.54083C27.3308 2.54083 28.9769 4.49417 29.2377 6.78261C29.2463 6.86532 29.1928 6.9438 29.1116 6.9438H20.4193C20.3381 6.9438 20.2825 6.86744 20.2932 6.78261Z"
+      fill="#00B336"
+    />
+    <path
+      d="M36.9221 9.65641H46.9633C47.1536 9.65429 48.7078 9.52916 48.7078 7.78579C48.7078 3.49311 45.3621 0 41.2533 0C37.1423 0 33.7988 3.49311 33.7988 7.78791C33.7988 7.88547 33.8052 8.15695 33.8052 8.19724C33.7988 13.1007 36.9756 15.7391 41.1785 15.983C41.3794 15.9936 41.5761 16 41.7685 16C43.3847 16 44.7486 15.5843 46.2301 14.6554C46.3819 14.562 46.974 14.1697 47.579 13.3955C48.06 12.7805 48.1028 11.8579 47.579 11.3786C46.8244 10.6872 46.0484 11.0604 45.3557 11.6458C44.2676 12.5642 43.4253 13.281 41.2554 13.2831C39.2096 13.2831 37.2749 12.1251 36.8152 9.81124C36.7981 9.73065 36.8452 9.65641 36.9221 9.65641ZM36.8088 6.78261C37.0889 4.53446 38.6473 2.54083 41.2469 2.54083C43.8464 2.54083 45.4925 4.49417 45.7533 6.78261C45.7619 6.86532 45.7085 6.9438 45.6272 6.9438H36.9328C36.8537 6.9438 36.7981 6.86744 36.8088 6.78261Z"
+      fill="#00B336"
+    />
+  </svg>
+);
diff --git a/src/react/ui-elements/Veeam/VeeamWelcomeModal.tsx b/src/react/ui-elements/Veeam/VeeamWelcomeModal.tsx
@@ -0,0 +1,58 @@
+import { useState } from 'react';
+import { Modal, Stack, Text, Wrap } from '@scality/core-ui';
+import { Button } from '@scality/core-ui/dist/next';
+import { useConfig } from '../../next-architecture/ui/ConfigProvider';
+import { VeeamLogo } from './VeeamLogo';
+import { ArtescaLogo } from './ArtescaLogo';
+import styled from 'styled-components';
+
+const CustomModal = styled(Modal)`
+  background-color: ${(props) => props.theme.backgroundLevel1};
+`;
+
+export default function VeeamWelcomeModal() {
+  const [isOpen, setIsOpen] = useState<boolean>(true);
+  const { features } = useConfig();
+
+  if (!features.includes('Veeam')) {
+    return <></>;
+  }
+
+  return (
+    <CustomModal
+      isOpen={isOpen}
+      title={
+        <Stack direction="horizontal" gap="r8">
+          <Text variant="Large">Welcome to ARTESCA</Text> <ArtescaLogo />
+        </Stack>
+      }
+      footer={
+        <Wrap>
+          <p></p>
+          <Stack>
+            <Button
+              variant="outline"
+              label={'Skip'}
+              onClick={() => {
+                setIsOpen(false);
+              }}
+            />
+            <Button
+              variant="primary"
+              label={'Continue'}
+              onClick={() => {
+                setIsOpen(false);
+              }}
+            />
+          </Stack>
+        </Wrap>
+      }
+    >
+      <Text variant="Basic">
+        Get started with <br />
+        ARTESCA HW Appliance for
+      </Text>{' '}
+      <VeeamLogo />
+    </CustomModal>
+  );
+}
diff --git a/webpack.common.js b/webpack.common.js
@@ -79,6 +79,8 @@ module.exports = {
       filename: 'js/remoteEntry.js',
       exposes: {
         './FederableApp': './src/react/FederableApp.tsx',
+        './VeeamWelcomeModal':
+          './src/react/ui-elements/Veeam/VeeamWelcomeModal.tsx',
       },
       shared: {
         ...Object.fromEntries(