Merge pull request #553 from zenml-io/UAT

Uat

Author: Cahllagerfeld

appserverSchema.d.ts

@@ -6,9 +6,11 @@ import { apiUrl } from '../apiUrl';
 const inviteApi = ({
   authenticationToken,
   name,
+  is_admin,
 }: {
   authenticationToken: string;
   name: string;
+  is_admin: boolean;
 }): Promise<void> =>
   fetchApiWithAuthRequest({
     url: apiUrl(`${endpoints.organizations.invite}?assign_default_role=false`),
@@ -19,6 +21,7 @@ const inviteApi = ({
     },
     data: JSON.stringify({
       name,
+      is_admin,
     }),
   });
 

src/api/organizations/inviteApi.ts

@@ -3,10 +3,12 @@ import inviteApi from '../../../api/organizations/inviteApi';
 
 export const inviteAction = ({
   name,
+  is_admin,
   onFailure,
   onSuccess,
 }: {
   name: string;
+  is_admin: boolean;
   onFailure?: (err: any) => void;
   onSuccess?: (res: any) => void;
 }): TRequestAction => ({
@@ -16,7 +18,7 @@ export const inviteAction = ({
     isAuthenticated: true,
     failureActionType: organizationActionTypes.invite.failure,
     successActionType: organizationActionTypes.invite.success,
-    params: { name },
+    params: { name, is_admin },
     onFailure,
     onSuccess,
   },

src/redux/actions/organizations/inviteAction.ts

@@ -130,13 +130,15 @@ export const persisted = combineReducers({
 
 export default (state: any, action: any) => {
   if (action.type === ACCOUNT_LOGOUT) {
-    if (state.serverInfo.authScheme === 'EXTERNAL') {
-      axios
-        .get(`${process.env.REACT_APP_BASE_API_URL}${endpoints.logout}`)
-        .then(() => {
-          return persisted(initialState as any, action);
-        });
-    }
+    axios
+      .get(`${process.env.REACT_APP_BASE_API_URL}${endpoints.logout}`)
+      .then(() => {
+        return persisted(initialState as any, action);
+      })
+      .catch(() => {
+        return persisted(initialState as any, action);
+      });
+
     return persisted(initialState as any, action);
   }
 

src/redux/persistedReducers.ts

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { Box, FlexBox, Paragraph } from '../../../components';
 import ReactTooltip from 'react-tooltip';
 import styles from './index.module.scss';
+import { sanitizeUrl } from '../../../../utils/url';
 
 export const CustomConnectorBox: React.FC<{
   connectorName: string;
@@ -60,7 +61,7 @@ export const CustomConnectorBox: React.FC<{
           {resourceTypes?.map((e: any) => (
             <Box marginLeft="sm" className={styles.resourceImages}>
               <div data-tip data-for={e?.name}>
-                <img src={e?.logo_url} alt={e?.name} />
+                <img src={sanitizeUrl(e?.logo_url)} alt={e?.name} />
               </div>
               <ReactTooltip id={e?.name} place="top" effect="solid">
                 <Paragraph color="white">{e?.name}</Paragraph>

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

@@ -13,6 +13,7 @@ import {
 import styles from './index.module.scss';
 import { replaceVersion } from '../../../../utils/string';
 import { checkUrlStatus } from '../../../../utils/checkUrlStatus';
+import { sanitizeUrl } from '../../../../utils/url';
 
 const Dimmer: React.FC = () => <Box className={styles.dimmer}></Box>;
 
@@ -77,7 +78,11 @@ export const SidePopup: React.FC<{
                 style={{
                   paddingBottom: '270px',
                 }}
-                src={is404 ? updatedSdkDocsUrl : defaultSdkDocsUrl}
+                src={
+                  is404
+                    ? sanitizeUrl(updatedSdkDocsUrl)
+                    : sanitizeUrl(defaultSdkDocsUrl)
+                }
               ></iframe>
             </Box>
 

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

@@ -40,6 +40,7 @@ import { WorkspacePopup } from './workspacePopup';
 import ReactTooltip from 'react-tooltip';
 import { Breadcrumbs } from '../../Breadcrumbs';
 import DeploymentBanner from './DeploymentBanner';
+import DashboardBanner from './DashboardBanner';
 
 export const AuthenticatedHeader: React.FC<{
   breadcrumb?: Array<any>;
@@ -55,6 +56,8 @@ export const AuthenticatedHeader: React.FC<{
   const [popupOpen, setPopupOpen] = useState<boolean>(false);
   const [createPopupOpen, setCreatePopupOpen] = useState<boolean>(false);
 
+  const authScheme = useSelector(serverInfoSelectors.getAuthScheme);
+
   const dispatch = useDispatch();
 
   const { push } = usePushRoute();
@@ -144,7 +147,8 @@ export const AuthenticatedHeader: React.FC<{
 
   return (
     <>
-      {deploymentType === 'local' && <DeploymentBanner />}
+      {deploymentType === 'local' && <DeploymentBanner />}{' '}
+      {authScheme !== 'EXTERNAL' && <DashboardBanner />}
       {createPopupOpen && <WorkspacePopup setPopupOpen={setCreatePopupOpen} />}
       <FlexBox
         paddingHorizontal="lg"

src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedHeader.tsx

@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+import styles from './styles.module.scss';
+import { dashboardKey } from './service';
+import { icons } from '../../../../../components';
+
+function DashboardBanner() {
+  const [isDashboardBannerDismissed, setDashboardDismissed] = useState(
+    !!sessionStorage.getItem(dashboardKey),
+  );
+
+  if (isDashboardBannerDismissed) return null;
+  return (
+    <aside className={styles.deploymentBanner}>
+      <p className={styles.deploymentBanner__paragraph}>
+        This dashboard interface will soon be updated. Click{' '}
+        <a
+          target="_blank"
+          rel="noopener noreferrer"
+          href="https://www.zenml.io/cloud"
+        >
+          here
+        </a>{' '}
+        for a preview!
+      </p>
+      <button
+        className={styles.deploymentBanner__close}
+        onClick={() => {
+          sessionStorage.setItem(dashboardKey, 'true');
+          setDashboardDismissed(true);
+        }}
+      >
+        <icons.close />
+      </button>
+    </aside>
+  );
+}
+
+export default DashboardBanner;

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

@@ -0,0 +1 @@
+export const dashboardKey = 'dashboard-banner-dismissed';

src/ui/layouts/common/layouts/AuthenticatedLayout/DashboardBanner/service.ts

@@ -0,0 +1,36 @@
+@import '../../../../../globalStyles';
+
+.deploymentBanner {
+  width: 100%;
+  background-color: #f1ebfe;
+  font-size: 16px;
+  display: flex;
+  color: #0d061d;
+  font-family: Rubik;
+  padding: 0.5rem 16px;
+  justify-content: space-between;
+  align-items: center;
+
+  &__paragraph {
+    text-align: center;
+    margin: 0;
+    flex: 1;
+  }
+  &__close {
+    padding: 0;
+    margin: 0;
+    border: none;
+    background: none;
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+    outline: none;
+  }
+}
+
+@media (max-width: $md-breakpoint) {
+  .deploymentBanner {
+    padding: 0.5rem 1rem;
+    font-size: 14px;
+  }
+}