Merge pull request #10884 from captain-Akshay/captain/full

Workspace and org
meshery · May 14, 2024 · 49696d4 · 49696d4
2 parents e0878bb + 9899c15
commit 49696d4
Show file tree

Hide file tree

Showing 12 changed files with 598 additions and 159 deletions.
diff --git a/ui/assets/icons/OrgOutlinedIcon.js b/ui/assets/icons/OrgOutlinedIcon.js
diff --git a/ui/assets/icons/WorkspaceOutlined.js b/ui/assets/icons/WorkspaceOutlined.js
@@ -0,0 +1,18 @@
+import React from 'react';
+
+function WorkspaceOutlinedIcon({ width = '24px', height = '24px', fill = '#F6F8F8' }) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 40 40"
+      fill={fill}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M13.3688 33.2614C13.3688 33.2614 11.7109 33.2614 11.7109 31.6035C11.7109 29.9456 13.3688 24.9719 20.0004 24.9719C26.632 24.9719 28.2899 29.9456 28.2899 31.6035C28.2899 33.2614 26.632 33.2614 26.632 33.2614H13.3688ZM20.0004 23.397C21.0997 23.397 22.1539 22.9602 22.9311 22.1829C23.7085 21.4056 24.1451 20.3514 24.1451 19.2522C24.1451 18.1529 23.7085 17.0987 22.9311 16.3214C22.1539 15.5441 21.0997 15.1074 20.0004 15.1074C18.9012 15.1074 17.8469 15.5441 17.0696 16.3214C16.2924 17.0987 15.8557 18.1529 15.8557 19.2522C15.8557 20.3514 16.2924 21.4056 17.0696 22.1829C17.8469 22.9602 18.9012 23.397 20.0004 23.397Z" />
+      <path d="M10.0502 8.39355C9.17076 8.39355 8.32738 8.74289 7.70555 9.36473C7.08372 9.98656 6.73438 10.8299 6.73438 11.7093V27.4593C6.73438 28.119 6.99638 28.7515 7.46275 29.2177C7.92913 29.6842 8.56167 29.9462 9.22122 29.9462H10.3038C10.6505 28.7279 11.253 27.5974 12.0711 26.6304H8.39227V11.7093C8.39227 11.2696 8.56695 10.8479 8.87785 10.537C9.18877 10.2261 9.61046 10.0514 10.0502 10.0514H29.9449C30.3846 10.0514 30.8063 10.2261 31.1172 10.537C31.4282 10.8479 31.6028 11.2696 31.6028 11.7093V26.6304H27.9239C28.8424 27.7147 29.3995 28.9066 29.6913 29.9462H30.7738C31.4335 29.9462 32.066 29.6842 32.5322 29.2177C32.9987 28.7515 33.2607 28.119 33.2607 27.4593V11.7093C33.2607 10.8299 32.9113 9.98656 32.2895 9.36473C31.6676 8.74289 30.8242 8.39355 29.9449 8.39355H10.0502Z" />
+    </svg>
+  );
+}
+
+export default WorkspaceOutlinedIcon;
diff --git a/ui/components/Header.js b/ui/components/Header.js
@@ -6,7 +6,6 @@ import Hidden from '@material-ui/core/Hidden';
 import IconButton from '@material-ui/core/IconButton';
 import MenuIcon from '@material-ui/icons/Menu';
 import Toolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography';
 import { withStyles } from '@material-ui/core/styles';
 import { connect, useSelector } from 'react-redux';
 import NoSsr from '@material-ui/core/NoSsr';
@@ -45,6 +44,7 @@ import { CustomTextTooltip } from './MesheryMeshInterface/PatternService/CustomT
 import { Colors } from '@/themes/app';
 import CAN from '@/utils/can';
 import { keys } from '@/utils/permission_constants';
+import SpaceSwitcher from './SpacesSwitcher/SpaceSwitcher';
 
 const lightColor = 'rgba(255, 255, 255, 0.7)';
 const styles = (theme) => ({
@@ -72,12 +72,6 @@ const styles = (theme) => ({
     flexGrow: 1,
     marginRight: 'auto',
   },
-  betaBadge: { color: '#EEEEEE', fontWeight: '300', fontSize: '13px' },
-  pageTitle: {
-    paddingLeft: theme.spacing(2),
-    fontSize: '1.25rem',
-    [theme.breakpoints.up('sm')]: { fontSize: '1.65rem' },
-  },
   appBarOnDrawerOpen: {
     backgroundColor: theme.palette.secondary.mainBackground,
     shadowColor: ' #808080',
@@ -461,6 +455,7 @@ function K8sContextMenu({
                 {contexts?.contexts?.map((ctx) => {
                   return (
                     <K8sContextConnectionChip
+                      key={ctx.id}
                       classes={classes}
                       ctx={ctx}
                       selectable
@@ -559,15 +554,7 @@ class Header extends React.PureComponent {
                   </Grid>
                 </Hidden>
                 <Grid item xs container alignItems="center" className={classes.pageTitleWrapper}>
-                  <Typography
-                    color="inherit"
-                    variant="h5"
-                    className={classes.pageTitle}
-                    data-cy="headerPageTitle"
-                  >
-                    {title}
-                    {isBeta ? <sup className={classes.betaBadge}>BETA</sup> : ''}
-                  </Typography>
+                  <SpaceSwitcher title={title} isBeta={isBeta} />
                 </Grid>
                 <Grid
                   item

diff --git a/ui/components/NavigatorExtension.js b/ui/components/NavigatorExtension.js
@@ -31,6 +31,7 @@ import ExportModal from './ExportModal';
 import { MDEditor } from './Markdown';
 import { FormatStructuredData } from './DataFormatter';
 import { useFilterK8sContexts } from './hooks/useKubernetesHook';
+import { useDynamicComponent } from '@/utils/context/dynamicContext';
 
 const requires = createRequires(getDependencies);
 const useRemoteComponent = createUseRemoteComponent({ requires });
@@ -46,7 +47,6 @@ function NavigatorExtension({
 }) {
   const [loading, err, RemoteComponent] = useRemoteComponent(url);
   console.log(err);
-
   if (loading) {
     return <LoadingScreen animatedIcon="AnimatedMeshery" message="Loading Meshery Extension" />;
   }
@@ -121,6 +121,7 @@ function NavigatorExtension({
         StructuredDataFormatter: FormatStructuredData,
         hooks: {
           useFilterK8sContexts,
+          useDynamicComponent,
         },
       }}
     />