Merge branch 'master' into feat/panel

.github/workflows/bump-meshery-version.yml

@@ -116,7 +116,7 @@ jobs:
                   cache: "npm"
                   cache-dependency-path: '**/package-lock.json'
               - name: Make changes to pull request
-                run: npm install @layer5/sistent@${{needs.versions-check.outputs.current}}
+                run: npm install @layer5/sistent@${{needs.versions-check.outputs.current}} --legacy-peer-deps
               - name: Create Pull Request
                 id: cpr
                 uses: peter-evans/create-pull-request@v7

README.md

@@ -91,7 +91,6 @@ Find out more on the <a href="https://layer5.io/community">Layer5 community</a>.
 <br /><br /><br /><br />
 
 </p>
-
 <div>&nbsp;</div>
 
 <a href="https://slack.meshery.io">

src/base/Pagination/Pagination.tsx

@@ -1,8 +1,13 @@
-import { Pagination as MuiPagination, PaginationProps as MuiPaginationProps } from '@mui/material';
+import {
+  Pagination as MuiPagination,
+  PaginationItem as MuiPaginationItem,
+  PaginationProps as MuiPaginationProps
+} from '@mui/material';
 import React from 'react';
 
 const Pagination = React.forwardRef<HTMLDivElement, MuiPaginationProps>((props, ref) => {
   return <MuiPagination {...props} ref={ref} />;
 });
 
+export { MuiPaginationItem as PaginationItem };
 export default Pagination;

src/base/Pagination/index.tsx

@@ -1,5 +1,5 @@
 import { PaginationProps } from '@mui/material';
-import Pagination from './Pagination';
+import Pagination, { PaginationItem } from './Pagination';
 
-export { Pagination };
+export { Pagination, PaginationItem };
 export type { PaginationProps };

src/custom/CatalogDetail/ActionButton.tsx

@@ -76,31 +76,13 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
             width: '100%'
           }}
         >
-          <ActionButton
-            sx={{
-              borderRadius: '0.2rem',
-              backgroundColor: 'transparent',
-              border: `1px solid ${theme.palette.border.normal}`,
-              gap: '10px',
-              color: theme.palette.text.default
-            }}
-            onClick={() =>
-              cleanedType === VIEWS
-                ? downloadYaml(details.pattern_file, details.name)
-                : downloadPattern(details.id, details.name, getDownloadUrl)
-            }
-          >
-            <Download width={24} height={24} fill={theme.palette.icon.default} />
-            Download
-          </ActionButton>
-
           {cleanedType !== FILTERS && (
             <ActionButton
               sx={{
+                backgroundColor: showOpenPlaygroundAction ? 'transparent' : undefined,
+                color: theme.palette.text.default,
                 borderRadius: '0.2rem',
                 gap: '10px',
-                color: theme.palette.text.default,
-                backgroundColor: 'transparent',
                 border: `1px solid ${theme.palette.border.normal}`
               }}
               onClick={() => handleClone(details?.name, details?.id)}
@@ -116,6 +98,23 @@ const ActionButtons: React.FC<ActionButtonsProps> = ({
               )}
             </ActionButton>
           )}
+          <ActionButton
+            sx={{
+              borderRadius: '0.2rem',
+              backgroundColor: 'transparent',
+              border: `1px solid ${theme.palette.border.normal}`,
+              gap: '10px',
+              color: theme.palette.text.default
+            }}
+            onClick={() =>
+              cleanedType === VIEWS
+                ? downloadYaml(details.pattern_file, details.name)
+                : downloadPattern(details.id, details.name, getDownloadUrl)
+            }
+          >
+            <Download width={24} height={24} fill={theme.palette.icon.default} />
+            Download
+          </ActionButton>
         </div>
       )}
 

src/custom/CatalogDetail/style.tsx

@@ -264,8 +264,7 @@ export const RedirectLink = styled(Link)(({ theme }) => ({
 export const ShareButtonGroup = styled(ButtonGroup)({
   boxShadow: 'none',
   border: 'none',
-  outline: 'none',
-  height: '76%'
+  outline: 'none'
 });
 
 export const ShareButton = styled(Button)(({ theme }) => ({

src/custom/Markdown/index.tsx

@@ -5,6 +5,7 @@ import {
   BasicAnchorMarkdown,
   StyledMarkdown,
   StyledMarkdownBlockquote,
+  StyledMarkdownCode,
   StyledMarkdownH1,
   StyledMarkdownH2,
   StyledMarkdownH3,
@@ -54,7 +55,8 @@ export const RenderMarkdown: React.FC<RenderMarkdownProps> = ({ content }) => {
         li: ({ ...props }) => <StyledMarkdownLi>{props.children}</StyledMarkdownLi>,
         th: ({ ...props }) => <StyledMarkdownTh>{props.children}</StyledMarkdownTh>,
         td: ({ ...props }) => <StyledMarkdownTd>{props.children}</StyledMarkdownTd>,
-        pre: ({ ...props }) => <StyledMarkdownPre>{props.children}</StyledMarkdownPre>
+        pre: ({ ...props }) => <StyledMarkdownPre>{props.children}</StyledMarkdownPre>,
+        code: ({ ...props }) => <StyledMarkdownCode>{props.children}</StyledMarkdownCode>
       }}
     >
       {content}

src/custom/Markdown/style.tsx

@@ -98,3 +98,12 @@ export const StyledMarkdownPre = styled('pre')(({ theme }) => ({
   whiteSpace: 'pre-line',
   fontFamily: 'inherit'
 }));
+
+export const StyledMarkdownCode = styled('code')(({ theme }) => ({
+  background: theme.palette.background.code,
+  whiteSpace: 'pre-line',
+  padding: '1.5px',
+  paddingInline: '5px',
+  fontFamily: 'inherit',
+  borderRadius: 3
+}));

src/custom/Prompt/index.tsx

@@ -1,3 +1,3 @@
-import PromptComponent from './promt-component';
-
+import PromptComponent, { PROMPT_VARIANTS } from './promt-component';
+export { PROMPT_VARIANTS, PromptComponent };
 export default PromptComponent;

src/custom/Prompt/promt-component.tsx

@@ -1,5 +1,5 @@
 import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
-import { Typography } from '../../base';
+import { Checkbox, FormControlLabel, Typography } from '../../base';
 import { useTheme } from '../../theme';
 import { Modal, ModalBody, ModalButtonPrimary, ModalButtonSecondary, ModalFooter } from '../Modal';
 import { ActionComponent, Subtitle } from './style';
@@ -26,6 +26,8 @@ interface State {
   showInfoIcon?: string;
   variant?: PromptVariant;
   headerIcon?: React.ReactNode;
+  showCheckbox?: boolean;
+  isChecked?: boolean;
 }
 
 interface ShowParams {
@@ -34,11 +36,13 @@ interface ShowParams {
   primaryOption: string;
   variant: PromptVariant;
   showInfoIcon?: string;
+  showCheckbox?: boolean;
   headerIcon?: React.ReactNode;
 }
 
 export interface PromptRef {
   show: (params: ShowParams) => Promise<string>;
+  getCheckboxState: () => boolean;
 }
 
 const PromptComponent = forwardRef<PromptRef, PromptProps>(({ variant }, ref) => {
@@ -49,7 +53,9 @@ const PromptComponent = forwardRef<PromptRef, PromptProps>(({ variant }, ref) =>
     primaryOption: '',
     showInfoIcon: '',
     variant,
-    headerIcon: undefined
+    headerIcon: undefined,
+    isChecked: false,
+    showCheckbox: false
   });
 
   /* This ref is used to store the resolve and reject functions of the promise returned by the show method */
@@ -67,7 +73,8 @@ const PromptComponent = forwardRef<PromptRef, PromptProps>(({ variant }, ref) =>
       setState({
         ...params,
         isOpen: true,
-        showInfoIcon: params.showInfoIcon || ''
+        showInfoIcon: params.showInfoIcon || '',
+        showCheckbox: !!params.showCheckbox
       });
     });
   };
@@ -77,11 +84,20 @@ const PromptComponent = forwardRef<PromptRef, PromptProps>(({ variant }, ref) =>
     setState((prevState) => ({ ...prevState, isOpen: false }));
   };
 
+  const handleCheckboxChange = () => {
+    setState((prevState) => ({ ...prevState, isChecked: !prevState.isChecked }));
+  };
+
+  const getCheckboxState = () => {
+    return !!state.isChecked;
+  };
+
   useImperativeHandle(ref, () => ({
-    show
+    show,
+    getCheckboxState
   }));
 
-  const { isOpen, primaryOption, title, subtitle, showInfoIcon, headerIcon } = state;
+  const { isOpen, primaryOption, title, subtitle, showInfoIcon, headerIcon, showCheckbox } = state;
   const { resolve } = promiseInfoRef.current;
 
   return (
@@ -96,10 +112,28 @@ const PromptComponent = forwardRef<PromptRef, PromptProps>(({ variant }, ref) =>
       {subtitle && (
         <ModalBody>
           <Subtitle id="alert-dialog-description" variant="body1" component="div">
-            <Typography variant="body1" component="div">
+            <Typography
+              variant="body1"
+              component="div"
+              style={{
+                color: theme.palette.text.primary
+              }}
+            >
               {subtitle}
             </Typography>
           </Subtitle>
+          {showCheckbox && (
+            <FormControlLabel
+              control={
+                <Checkbox
+                  checked={getCheckboxState()}
+                  onChange={handleCheckboxChange}
+                  color="primary"
+                />
+              }
+              label={<span style={{ fontSize: '1rem' }}>Do not show again</span>}
+            />
+          )}
         </ModalBody>
       )}
       <ModalFooter variant="filled" helpText={showInfoIcon}>

src/custom/ResourceDetailFormatters/Formatter.tsx

@@ -35,6 +35,7 @@ import {
   StyledEnvironmentVariablesCode,
   StyledEnvironmentVariablesPre,
   StyledTitle,
+  TextValue,
   Wrap
 } from './styles';
 import {
@@ -201,7 +202,7 @@ export const OperatorDynamicFormatter: React.FC<OperatorDynamicFormatterProps> =
     return (
       <>
         <ElementData>
-          {data}
+          <TextValue>{data}</TextValue>
           {regex.test(data) && <CopyToClipboard data={data} />}
         </ElementData>
       </>

src/custom/ResourceDetailFormatters/styles.ts

@@ -52,7 +52,7 @@ export const Title = styled('span')({
   fontFamily: 'Qanelas Soft, sans-serif'
 });
 
-export const ElementData = styled('span')({
+export const ElementData = styled('div')({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
@@ -184,14 +184,21 @@ export const EnvironmentVariableValue = styled('span')({
 export const CodeFormatterPre = styled('pre')(({ theme }) => ({
   backgroundColor: theme.palette.mode === 'light' ? '#e9eff1' : '#212121',
   color: theme.palette.text.primary,
-  width: '100%',
   wordWrap: 'break-word',
   overflowWrap: 'break-word',
   wordBreak: 'break-all',
   margin: 0,
-  padding: '0.5rem'
+  padding: '0.5rem',
+  maxWidth: '-moz-available'
 }));
 
+export const TextValue = styled(Box)({
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  width: 'inherit',
+  overflow: 'hidden'
+});
+
 export const CodeFormatterCode = styled('code')(({ theme }) => ({
   backgroundColor: theme.palette.mode === 'light' ? '#e9eff1' : '#212121',
   color: theme.palette.text.primary,

src/custom/ResourceDetailFormatters/types.ts

@@ -264,4 +264,5 @@ export interface GetResourceCleanDataProps {
   dispatchMsgToEditor?: (msg: any) => void;
   activeLabels?: string[];
   showStatus?: boolean;
+  container?: any;
 }

src/custom/ResourceDetailFormatters/useResourceCleanData.ts

@@ -67,13 +67,15 @@ export const useResourceCleanData = () => {
     resource,
     activeLabels,
     dispatchMsgToEditor,
-    showStatus = true
+    showStatus = true,
+    container
   }: GetResourceCleanDataProps) => {
     const parsedStatus = resource?.status?.attribute && JSON.parse(resource?.status?.attribute);
     const parsedSpec = resource?.spec?.attribute && JSON.parse(resource?.spec.attribute);
     const numberStates = structureNumberStates(parsedStatus, parsedSpec);
     const kind = resource?.kind ?? resource?.component?.kind;
     const cleanData = {
+      container: container,
       age: getAge(resource?.metadata?.creationTimestamp),
       kind: kind,
       status: showStatus && getStatus(parsedStatus),

src/custom/TransferModal/TransferList/TransferList.tsx

@@ -29,7 +29,7 @@ export function getFallbackImageBasedOnKind(kind: string | undefined): JSX.Eleme
 }
 
 export interface TransferListProps {
-  name: string;
+  name?: string;
   assignableData: ListItemType[];
   assignedData: (data: ListItemType[]) => void;
   originalAssignedData: ListItemType[];

src/custom/UserSearchField/UserSearchField.tsx

@@ -1,5 +1,6 @@
 import Autocomplete from '@mui/material/Autocomplete';
 import CircularProgress from '@mui/material/CircularProgress';
+import { debounce } from 'lodash';
 import React, { useState } from 'react';
 import { Avatar, Box, Chip, Grid, TextField, Tooltip, Typography } from '../../base';
 import { iconSmall } from '../../constants/iconsSizes';
@@ -88,21 +89,22 @@ const UserShareSearch: React.FC<UserSearchFieldProps> = ({
     }
   };
 
-  const handleInputChange = (_event: React.SyntheticEvent<Element, Event>, value: string) => {
-    if (value === '') {
-      setOptions([]);
-      setOpen(false);
-    } else {
-      setSearchUserLoading(true);
-      fetchSuggestions(value).then((filteredData) => {
-        setOptions(filteredData);
+  const handleInputChange = debounce(
+    async (_event: React.SyntheticEvent<Element, Event>, value: string) => {
+      if (value === '') {
+        setOptions([]);
+        setOpen(false);
+      } else {
+        setSearchUserLoading(true);
+        const suggestions = await fetchSuggestions(value);
+        setOptions(suggestions);
         setSearchUserLoading(false);
-      });
-      setError(false);
-      setOpen(true);
-    }
-  };
-
+        setError(false);
+        setOpen(true);
+      }
+    },
+    300
+  );
   /**
    * Clone customUsersList component to pass necessary props
    */