Merge branch 'master' into master

Signed-off-by: Parv gugnani <[email protected]>

.github/label-commenter-config.yml

@@ -0,0 +1,55 @@
+comment:
+  # header: "Please note the following requirement:"
+  footer: "\
+    ---\n\n
+    >   	   	    	    	 Be sure to [join the community](https://slack.meshery.io), if you haven't yet and please leave a :star: [star on the project](../stargazers) :smile:
+    "
+
+labels:
+  - name: issue/design required
+    labeled:
+      issue:
+        body: This issue has been labeled with 'design-required'. Note that prior to commencing on implementation, a design specification needs to be created and reviewed for approval. See [Creating a Functional Specification](https://docs.google.com/document/d/1RP3IWLc-MiQS-QYasqCoVuCH7--G87p5ezE5f_nOzB8/edit?usp=sharing) to create a design spec.
+        action: open
+  - name: issue/remind
+    labeled:
+      issue:
+        body: Checking in... it has been awhile since we've heard from you on this issue. Are you still working on it? Please let us know and please don't hesitate to contact a [MeshMate](https://layer5.io/community/meshmates/) or any other [community member](https://layer5.io/community/members) for assistance.
+        action: open
+      pr:
+        body: Checking in... it has been awhile since we've heard from you on this issue. Are you still working on it? Please let us know and please don't hesitate to contact a [MeshMate](https://layer5.io/community/meshmates/) or any other [community member](https://layer5.io/community/members) for assistance.
+        action: open
+  - name: issue/dco
+    labeled:
+      issue:
+        body: "🚨 Alert! Git Police! We couldn’t help but notice that one or more of your commits is missing a sign-off. _A what?_ A commit sign-off (your email address).\n\n
+         To amend the commits in this PR with your signoff using the instructions provided in the DCO check. \n\n
+         To configure your dev environment to automatically signoff on your commits in the future, see [these instructions](https://github.com/meshery/meshery/blob/master/CONTRIBUTING.md#signing-off-on-commits-developer-certificate-of-origin)."
+        action: open
+      pr:
+        body: "🚨 Alert! Git Police! We couldn’t help but notice that one or more of your commits is missing a sign-off. _A what?_ A commit sign-off (your email address).\n\n
+         To amend the commits in this PR with your signoff using the instructions provided in the DCO check. \n\n
+         To configure your dev environment to automatically signoff on your commits in the future, see [these instructions](https://github.com/meshery/meshery/blob/master/CONTRIBUTING.md#signing-off-on-commits-developer-certificate-of-origin)."
+        action: open
+  - name: component/ui
+    labeled:
+      issue:
+        body: This issue has been labeled with 'component/ui'. 🧰 Here are docs on [Contributing to Meshery UI](https://docs.meshery.io/project/contributing/contributing-ui). 🎨 Here is the [Meshery UI Figma File](https://www.figma.com/file/SMP3zxOjZztdOLtgN4dS2W/Meshery-UI?node-id=4%3A0) File. Lastly, here are docs on [Contributing to Meshery's End-to-End Tests Using Cypress](https://docs.meshery.io/project/contributing/contributing-cypress).
+        action: open
+      pr:
+        body: This PR has been labeled with 'component/ui'. 🧰 Here are docs on [Contributing to Meshery UI](https://docs.meshery.io/project/contributing/contributing-ui). 🎨 Here is the [Meshery UI Figma File](https://www.figma.com/file/SMP3zxOjZztdOLtgN4dS2W/Meshery-UI?node-id=4%3A0) File. Lastly, here are docs on [Contributing to Meshery's End-to-End Tests Using Cypress](https://docs.meshery.io/project/contributing/contributing-cypress)
+        action: open
+  - name: component/mesheryctl
+    labeled:
+      issue:
+        body: This issue has been labeled with 'component/mesheryctl'. Note that after making changes you need to update it in the [mesheryctl command tracker](https://docs.google.com/spreadsheets/d/1q63sIGAuCnIeDs8PeM-0BAkNj8BBgPUXhLbe1Y-318o/edit#gid=0) spreadsheet.
+        action: open
+      pr:
+        body: This PR has been labeled with 'component/mesheryctl'. Note that after making changes you need to update it in the [mesheryctl command tracker](https://docs.google.com/spreadsheets/d/1q63sIGAuCnIeDs8PeM-0BAkNj8BBgPUXhLbe1Y-318o/edit#gid=0) spreadsheet.
+        action: open
+      # pr:
+      #   body: Hi, please note that this issue will need an approved design specification before implementation proceeds. See [Creating a Functional Specification](https://docs.google.com/document/d/1RP3IWLc-MiQS-QYasqCoVuCH7--G87p5ezE5f_nOzB8/edit?usp=sharing) to create a design spec.
+      #   action: open
+
+
+

.github/workflows/label-commenter.yml

@@ -0,0 +1,29 @@
+name: Label Commenter
+
+on:
+  issues:
+    types:
+      - labeled
+
+  pull_request_target:
+    types:
+      - labeled
+
+permissions:
+  contents: read
+  issues: write
+  pull-requests: write
+
+jobs:
+  comment:
+    runs-on: ubuntu-22.04
+    steps:
+      - name: Checkout repo 🛎️
+        uses: actions/checkout@master
+        with:
+          ref: master # Set your default branch
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - name: Label Commenter
+        uses: peaceiris/[email protected]
+

README.md

@@ -72,7 +72,7 @@ attach sistent to your project:
 ## Join the Layer5 community!
 
 <a name="contributing"></a><a name="community"></a>
-Our projects are community-built and welcome collaboration. 👍 Be sure to see the <a href="https://docs.google.com/document/d/17OPtDE_rdnPQxmk2Kauhm3GwXF1R5dZ3Cj8qZLKdo5E/edit">Layer5 Community Welcome Guide</a> for a tour of resources available to you and jump into our <a href="http://slack.layer5.io">Slack</a>!
+Our projects are community-built and welcome collaboration. 👍 Be sure to see the <a href="https://layer5.io/community/newcomers">Layer5 Community Welcome Guide</a> for a tour of resources available to you and jump into our <a href="http://slack.layer5.io">Slack</a>!
 
 <p style="clear:both;">
 <a href ="https://layer5.io/community/meshmates"><img alt="MeshMates" src=".github/readme/images/layer5-community-sign.png" style="margin-right:10px; margin-bottom:15px;" width="28%" align="left"/></a>

src/base/Grow/Grow.tsx

@@ -0,0 +1,5 @@
+import { Grow as MuiGrow, GrowProps as MuiGrowProps } from '@mui/material';
+
+export function Grow(props: MuiGrowProps): JSX.Element {
+  return <MuiGrow {...props} />;
+}

src/base/Grow/index.tsx

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

src/base/index.tsx

@@ -31,6 +31,7 @@ export * from './FormControl';
 export * from './FormControlLabel';
 export * from './FormGroup';
 export * from './Grid';
+export * from './Grow';
 export * from './IconButton';
 export * from './Input';
 export * from './InputLabel';

src/custom/ActionButton/ActionButton.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import {
+  Button,
+  ButtonGroup,
+  ClickAwayListener,
+  MenuItem,
+  MenuList,
+  Paper,
+  Popper
+} from '../../base';
+import { DropDownIcon } from '../../icons';
+interface Option {
+  icon: React.ReactNode;
+  label: string;
+  onClick: (event: React.MouseEvent<HTMLLIElement, MouseEvent>, index: number) => void;
+}
+
+interface ActionButtonProps {
+  defaultActionClick: () => void;
+  options: Option[];
+  label: string;
+}
+
+export default function ActionButton({
+  defaultActionClick,
+  options,
+  label
+}: ActionButtonProps): JSX.Element {
+  const [open, setOpen] = React.useState(false);
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const handleMenuItemClick = () => {
+    setOpen(false);
+  };
+
+  const handleToggle = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    event.stopPropagation();
+    setAnchorEl(event.currentTarget);
+    setOpen((prevOpen) => !prevOpen);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+    setOpen(false);
+  };
+
+  return (
+    <React.Fragment>
+      <ButtonGroup
+        variant="contained"
+        style={{ boxShadow: 'none' }}
+        aria-label="Button group with a nested menu"
+      >
+        <Button onClick={defaultActionClick} variant="contained">
+          {label}
+        </Button>
+        <Button size="small" onClick={handleToggle} variant="contained">
+          <DropDownIcon />
+        </Button>
+      </ButtonGroup>
+      <Popper
+        sx={{
+          zIndex: 1
+        }}
+        open={open}
+        anchorEl={anchorEl}
+        role={undefined}
+      >
+        <Paper>
+          <ClickAwayListener onClickAway={handleClose}>
+            <MenuList id="split-button-menu" autoFocusItem>
+              {options.map((option, index) => (
+                <MenuItem
+                  key={index}
+                  onClick={(event) => {
+                    handleMenuItemClick();
+                    option.onClick(event, index);
+                  }}
+                >
+                  <div style={{ marginRight: '1rem' }}>{option.icon}</div>
+                  {option.label}
+                </MenuItem>
+              ))}
+            </MenuList>
+          </ClickAwayListener>
+        </Paper>
+      </Popper>
+    </React.Fragment>
+  );
+}

src/custom/ActionButton/index.tsx

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

src/custom/CustomTooltip/customTooltip.tsx

@@ -6,13 +6,15 @@ type CustomTooltipProps = {
   title: string | React.ReactNode | JSX.Element;
   onClick?: (event: React.MouseEvent<HTMLElement>) => void;
   children: React.ReactNode;
+  fontSize?: string;
 } & Omit<TooltipProps, 'title' | 'onClick'>;
 
 function CustomTooltip({
   title,
   onClick,
   placement,
   children,
+  fontSize = '1rem',
   ...props
 }: CustomTooltipProps): JSX.Element {
   return (
@@ -22,10 +24,9 @@ function CustomTooltip({
           sx: {
             background: CHARCOAL,
             color: WHITE,
-            fontSize: '0.75rem',
+            fontSize: { fontSize },
             borderRadius: '0.9375rem',
-            padding: '0.9rem',
-            zIndex: '999999'
+            padding: '0.9rem'
           }
         },
         popper: {
@@ -36,8 +37,8 @@ function CustomTooltip({
       }}
       title={title}
       placement={placement}
-      onClick={onClick}
       arrow
+      onClick={onClick}
       {...props}
     >
       {children}

src/custom/Feedback/FeedbackButton.tsx

@@ -1,5 +1,5 @@
 import Typography from '@mui/material/Typography';
-import React, { CSSProperties, useRef, useState } from 'react';
+import React, { CSSProperties, useState } from 'react';
 import {
   CalenderIcon,
   CloseIcon,
@@ -8,7 +8,7 @@ import {
   QuestionIcon,
   SuccessIcon
 } from '../../icons';
-import { CULTURED, KEPPEL } from '../../theme';
+import { CULTURED } from '../../theme';
 import { CustomTooltip } from '../CustomTooltip';
 import { ModalCard } from '../ModalCard';
 import {
@@ -55,7 +55,7 @@ interface FeedbackDataItem {
 
 const feedbackData: FeedbackDataItem[] = [
   {
-    icon: <FeedbackIcon secondaryFill={KEPPEL} />,
+    icon: <FeedbackIcon />,
     label: 'Issue',
     placeholder: 'I’m having an issue with...',
     isTextInput: true
@@ -107,21 +107,23 @@ interface FeedbackComponentProps {
     | 'right-top'
     | 'right-middle'
     | 'right-bottom';
+  defaultMessage?: string;
+  defaultOpen?: boolean;
 }
 
 const FeedbackComponent: React.FC<FeedbackComponentProps> = ({
   onSubmit,
   containerStyles,
   feedbackOptionStyles,
-  renderPosition
+  renderPosition,
+  defaultMessage = undefined,
+  defaultOpen = false
 }) => {
-  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [isOpen, setIsOpen] = useState<boolean>(defaultOpen);
   const [submitted, setSubmitted] = useState<boolean>(false);
-  const [category, setCategory] = useState<FeedbackDataItem | undefined>();
-  const [messageValue, setMessageValue] = useState<string | undefined>();
-  const feedbackTextRef = useRef<HTMLTextAreaElement>(null);
-  const [isChecked, setIsChecked] = useState<boolean>(false);
-
+  const [category, setCategory] = useState<FeedbackDataItem | undefined>(feedbackData[0]);
+  const [messageValue, setMessageValue] = useState<string | undefined>(defaultMessage);
+  const [isChecked, setIsChecked] = useState<boolean>(!!defaultMessage);
   const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setIsChecked(event.target.checked);
   };
@@ -229,7 +231,6 @@ const FeedbackComponent: React.FC<FeedbackComponentProps> = ({
                         onChange={(e) => {
                           setMessageValue(e.target.value);
                         }}
-                        ref={feedbackTextRef}
                         required
                         placeholder={category.placeholder}
                         rows={5}

src/custom/Feedback/style.tsx

@@ -268,10 +268,12 @@ export const FeedbackOptionButton = styled(Button)<FeedbackMessageProps>(({ them
     ? SNOW_WHITE
     : SNOW_WHITE,
   fill: isOpen ? (theme.palette.mode === 'dark' ? CULTURED : DARK_PRIMARY_COLOR) : CULTURED,
+  stroke: isOpen ? SNOW_WHITE : KEPPEL,
   '&:hover': {
     color: theme.palette.mode === 'dark' ? SNOW_WHITE : BLACK,
     fill: theme.palette.mode === 'dark' ? CULTURED : DARK_PRIMARY_COLOR,
-    backgroundColor: WHITE
+    backgroundColor: WHITE,
+    stroke: SNOW_WHITE
   }
 }));