Merge branch 'master' into feat/all-columns-tables-sortable-filterable

Author: Karan-Palan

src/base/FormLabel/FormLabel.tsx

@@ -0,0 +1,8 @@
+import { FormLabelProps as MuiFormLabelProps, FormLabel as MuiFormLable } from '@mui/material';
+import React from 'react';
+
+const FormLabel = React.forwardRef<HTMLLabelElement, MuiFormLabelProps>((props, ref) => {
+  return <MuiFormLable {...props} ref={ref} />;
+});
+
+export { FormLabel };

src/base/FormLabel/index.tsx

@@ -0,0 +1 @@
+export { FormLabel } from './FormLabel';

src/base/Popover/Popover.tsx

@@ -0,0 +1,8 @@
+import { Popover as MuiPopover, PopoverProps as MuiPopoverProps } from '@mui/material';
+import React from 'react';
+
+const Popover = React.forwardRef<HTMLDivElement, MuiPopoverProps>((props, ref) => {
+  return <MuiPopover {...props} ref={ref} />;
+});
+
+export { Popover };

src/base/Popover/index.ts

@@ -0,0 +1 @@
+export { Popover } from './Popover';

src/base/index.tsx

@@ -32,6 +32,7 @@ export * from './Drawer';
 export * from './FormControl';
 export * from './FormControlLabel';
 export * from './FormGroup';
+export * from './FormLabel';
 export * from './Grid';
 export * from './Grow';
 export * from './IconButton';
@@ -52,6 +53,7 @@ export * from './MenuList';
 export * from './OutlinedInput';
 export * from './Pagination';
 export * from './Paper';
+export * from './Popover';
 export * from './Popper';
 export * from './RadioGroup';
 export * from './Select';

src/custom/DashboardWidgets/GettingStartedWidget/ActionButtonCard.tsx

@@ -59,8 +59,15 @@ const DescriptionTypography = styled(Typography)<{ maxWidth?: string }>(({ theme
   marginLeft: theme.spacing(1),
   marginBottom: theme.spacing(1),
   minHeight: '4.5rem',
-  [theme.breakpoints.between('sm', 'lg')]: {
+  maxWidth: '100%',
+  [theme.breakpoints.up('xs')]: {
+    maxWidth: '100%'
+  },
+  [theme.breakpoints.up('sm')]: {
     maxWidth: maxWidth || '100%'
+  },
+  [theme.breakpoints.up('lg')]: {
+    maxWidth: '100%'
   }
 }));
 

src/custom/DashboardWidgets/GettingStartedWidget/GetStartedModal.tsx

@@ -65,7 +65,7 @@ interface GetStartedModalProps {
   handleOpen: () => void;
   stepsData: StepData[];
   profileData: ProfileData;
-  useUpdateUserPrefMutation: () => [(arg: { mapObject: any }) => void, any];
+  useUpdateUserPrefMutation: any;
   useGetOrgsQuery: any;
   currentOrgId: string;
   useGetUserOrgRolesQuery: any;
@@ -74,6 +74,7 @@ interface GetStartedModalProps {
   isAssignUserRolesAllowed: boolean;
   useLazyGetTeamsQuery: any;
   embedDesignPath: string;
+  isFromMeshery: boolean;
 }
 
 const Loading: React.FC<LoadingProps> = ({ showModal, handleClose, style }) => {
@@ -164,7 +165,8 @@ const GetStartedModal: React.FC<GetStartedModalProps> = ({
   useNotificationHandlers,
   isAssignUserRolesAllowed,
   useLazyGetTeamsQuery,
-  embedDesignPath
+  embedDesignPath,
+  isFromMeshery
 }) => {
   const [openModal, setOpenModal] = useState<boolean>(false);
   const [clicked, setClicked] = useState<number | undefined>(undefined);
@@ -191,9 +193,14 @@ const GetStartedModal: React.FC<GetStartedModalProps> = ({
           : [...completedSteps, id]
       }
     };
-    updatePref({
-      mapObject: completeWelcome
-    });
+    // different api use for the cloud and meshery
+    if (isFromMeshery) {
+      updatePref(completeWelcome);
+    } else {
+      updatePref({
+        mapObject: completeWelcome
+      });
+    }
     if (id === 3) {
       setInviteModal(true);
     } else {

src/custom/Panel/style.tsx

@@ -1,7 +1,7 @@
 import { ListItemProps } from '@mui/material';
 import { Box, IconButton, ListItem } from '../../base';
 import { PanelDragHandleIcon } from '../../icons/PanelDragHandle';
-import { accentGrey, black, styled } from '../../theme';
+import { black, styled } from '../../theme';
 import { PanelProps } from './Panel';
 
 export const ListHeader = styled(ListItem)(({ theme }) => ({
@@ -68,7 +68,7 @@ export const DrawerHeader = styled('div')(({ theme }) => ({
 
 export const PanelBody = styled(Box)(({ theme }) => ({
   padding: theme.spacing(2),
-  backgroundColor: theme.palette.mode === 'light' ? accentGrey[10] : accentGrey[100],
+  backgroundColor: theme.palette.background.surfaces,
   overflow: 'auto',
   flex: 1,
   minHeight: 0

src/custom/ShareModal/ShareModal.tsx

@@ -93,6 +93,11 @@ const AccessList: React.FC<AccessListProps> = ({
               <ListItemText
                 primary={`${actorData.first_name || ''} ${actorData.last_name || ''}`}
                 secondary={actorData.email}
+                secondaryTypographyProps={{
+                  sx: {
+                    color: theme.palette.background.neutral?.pressed
+                  }
+                }}
               />
               <ListItemSecondaryAction>
                 {ownerData.id === actorData.id ? (
@@ -293,7 +298,7 @@ const ShareModal: React.FC<ShareModalProps> = ({
                       </CustomSelect>
                       <Typography
                         sx={{
-                          color: theme.palette.text.secondary
+                          color: theme.palette.background.neutral?.pressed
                         }}
                         component="span"
                         variant="body2"