Merge branch 'master' into fix/my-design

.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">

package.json

@@ -119,6 +119,8 @@
     "billboard.js": "^3.14.3",
     "js-yaml": "^4.1.0",
     "lodash": "^4.17.21",
+    "re-resizable": "^6.10.3",
+    "react-draggable": "^4.4.6",
     "moment": "^2.30.1",
     "react-share": "^5.1.0"
   }

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/Panel/Panel.tsx

@@ -0,0 +1,103 @@
+import { Resizable } from 're-resizable';
+import React from 'react';
+import Draggable from 'react-draggable';
+import { Box, BoxProps, IconButton, Tooltip } from '../../base';
+import { CloseIcon, CollapseAllIcon, ExpandAllIcon } from '../../icons';
+import { PanelDragHandleIcon } from '../../icons/PanelDragHandle';
+import { useTheme } from '../../theme';
+import { ErrorBoundary } from '../ErrorBoundary';
+import {
+  DragHandle,
+  DrawerHeader,
+  HeaderActionsContainer,
+  HeaderContainer,
+  PanelBody,
+  PanelContainer,
+  ResizableContent
+} from './style';
+
+export type PanelProps = {
+  isOpen: boolean;
+  children: React.ReactNode;
+  areAllExpanded?: boolean;
+  toggleExpandAll?: () => void;
+  handleClose: () => void;
+  sx?: BoxProps['sx'];
+  id?: string;
+  intitialPosition?: {
+    left?: string | number;
+    right?: string | number;
+    top?: string | number;
+    bottom?: string | number;
+  };
+};
+
+const Panel_: React.FC<PanelProps> = ({
+  isOpen,
+  id = 'panel',
+  children,
+  areAllExpanded,
+  toggleExpandAll,
+  handleClose,
+  intitialPosition,
+  sx
+}) => {
+  const theme = useTheme();
+  if (!isOpen) return null;
+  return (
+    <Draggable handle=".drag-handle">
+      <PanelContainer theme={theme} intitialPosition={intitialPosition} sx={sx}>
+        <Resizable
+          defaultSize={{ width: '18rem', height: 'auto' }}
+          onResize={() => {
+            window.dispatchEvent(new Event('panel-resize'));
+          }}
+          enable={{
+            top: true,
+            right: true,
+            bottom: true,
+            left: true,
+            topRight: true,
+            bottomRight: true,
+            bottomLeft: true,
+            topLeft: true
+          }}
+        >
+          <ResizableContent>
+            <ErrorBoundary>
+              <div className="drag-handle">
+                <DrawerHeader>
+                  <Box display="flex" justifyContent="flex-end" padding="8px">
+                    {toggleExpandAll && (
+                      <Tooltip title={areAllExpanded ? 'Collapse All' : 'Expand All'}>
+                        <IconButton onClick={toggleExpandAll}>
+                          {areAllExpanded ? <CollapseAllIcon /> : <ExpandAllIcon />}
+                        </IconButton>
+                      </Tooltip>
+                    )}
+                  </Box>
+                  <DragHandle>
+                    <PanelDragHandleIcon />
+                  </DragHandle>
+                  <HeaderContainer>
+                    <HeaderActionsContainer
+                      id={`${id}-panel-header-actions-container`}
+                    ></HeaderActionsContainer>
+                    <IconButton onClick={handleClose}>
+                      <CloseIcon />
+                    </IconButton>
+                  </HeaderContainer>
+                </DrawerHeader>
+              </div>
+              <PanelBody className="panel-body">{children}</PanelBody>
+            </ErrorBoundary>
+          </ResizableContent>
+        </Resizable>
+      </PanelContainer>
+    </Draggable>
+  );
+};
+
+export const Panel: React.FC<PanelProps> = ({ ...props }) => {
+  return <Panel_ {...props} />;
+};

src/custom/Panel/index.tsx

@@ -0,0 +1,3 @@
+import { Panel } from './Panel';
+
+export { Panel };