feat: visibility chip menu for the public private switch

Signed-off-by: Amit Amrutiya <[email protected]>

src/custom/VisibilityChipMenu/VisibilityChipMenu.tsx

@@ -0,0 +1,131 @@
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import { Theme } from '@mui/material';
+import { MouseEvent, useState } from 'react';
+import { Button, Menu, MenuItem } from '../../base';
+import { iconSmall } from '../../constants/iconsSizes';
+import { styled } from '../../theme';
+
+interface VisibilityChipMenuProps {
+  value: string;
+  onChange: (value: string) => void;
+  options: [string, React.ElementType][];
+  enabled: boolean;
+}
+
+const StyledMenu = styled(Menu)(({ theme }) => ({
+  '& .MuiPaper-root': {
+    backgroundColor: theme.palette.mode === 'light' ? '#EBEFF1' : '#363636',
+    color: theme.palette.text.secondary,
+    border: `1px solid ${theme.palette.border.default}`,
+    borderRadius: '0.25rem',
+    padding: '0rem'
+  },
+  '& .MuiMenuItem-root': {
+    fontSize: '.9rem',
+    padding: '0.5rem',
+    '&:hover': {
+      backgroundColor: theme.palette.mode === 'light' ? '#CCCCCC' : 'rgba(0, 179, 159, 0.25)'
+    }
+  },
+  //selected
+  '& .Mui-selected': {
+    backgroundColor: theme.palette.mode === 'light' ? '#CCCCCC' : 'rgba(0, 179, 159, 0.25)'
+  },
+  '& .MuiList-padding': {
+    padding: '0px'
+  }
+}));
+
+const StyledButton = styled(Button)(() => ({
+  padding: '0px',
+  width: '100%'
+}));
+
+const StyledDiv = styled('div')(({ theme, enabled }: { theme?: Theme; enabled: boolean }) => ({
+  paddingLeft: '0.5rem',
+  paddingRight: enabled ? '0' : '0.5rem',
+  borderRadius: '0.25rem',
+  border: '1px solid #666',
+  background: theme?.palette.mode === 'light' ? '#EBEFF1' : '#363636',
+  textTransform: 'uppercase',
+  color: theme?.palette.text.default,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: '4.5rem',
+  fontSize: '0.75rem',
+  fontFamily: theme?.typography.fontFamily
+}));
+
+const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
+  textTransform: 'capitalize',
+  color: theme.palette.icon.default
+}));
+
+const StyledIcon = styled('div')({
+  marginRight: '0.5rem'
+});
+
+const VisibilityChipMenu: React.FC<VisibilityChipMenuProps> = ({
+  value,
+  onChange,
+  options,
+  enabled
+}) => {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+  const close = (e: MouseEvent) => {
+    e.stopPropagation();
+    setAnchorEl(null);
+  };
+  const handleOpen = (e: MouseEvent<HTMLElement>) => {
+    e.stopPropagation();
+    if (!enabled) return;
+    setAnchorEl(e.currentTarget);
+  };
+  const handleChange = (e: MouseEvent, value: string) => {
+    e.stopPropagation();
+    onChange(value);
+    close(e);
+  };
+  return (
+    <>
+      <StyledButton
+        disabled={!enabled}
+        onClick={handleOpen}
+        data-testid={`design-visibility-${value.toLowerCase()}`}
+      >
+        <StyledDiv enabled={enabled}>
+          <span>{value}</span>
+          {enabled && <ArrowDropDownIcon {...iconSmall} />}
+        </StyledDiv>
+      </StyledButton>
+
+      <StyledMenu
+        open={open}
+        onClose={close}
+        anchorEl={anchorEl}
+        anchorReference="anchorPosition"
+        anchorPosition={{
+          top: (anchorEl?.getBoundingClientRect().bottom ?? 0) + 5,
+          left: (anchorEl?.getBoundingClientRect().left ?? 0) + 5
+        }}
+      >
+        {options.map(([visibility, Icon], index) => (
+          <StyledMenuItem
+            key={index}
+            data-testid={`visibility-toggle-${visibility.toLowerCase()}`}
+            onClick={(e) => handleChange(e, visibility)}
+          >
+            <StyledIcon>
+              <Icon width={16} height={16} />
+            </StyledIcon>
+            {visibility}
+          </StyledMenuItem>
+        ))}
+      </StyledMenu>
+    </>
+  );
+};
+
+export default VisibilityChipMenu;

src/custom/VisibilityChipMenu/index.ts

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

src/custom/index.tsx

@@ -47,6 +47,7 @@ import { TransferList } from './TransferModal/TransferList';
 import { TransferListProps } from './TransferModal/TransferList/TransferList';
 import UniversalFilter, { UniversalFilterProps } from './UniversalFilter';
 import { UsersTable } from './UsersTable';
+import { VisibilityChipMenu } from './VisibilityChipMenu';
 export { CatalogCard } from './CatalogCard';
 export { CatalogFilterSidebar } from './CatalogFilterSection';
 export type { FilterListType } from './CatalogFilterSection';
@@ -100,6 +101,7 @@ export {
   TransferList,
   UniversalFilter,
   UsersTable,
+  VisibilityChipMenu,
   updateVisibleColumns,
   useNotificationHandler,
   useWindowDimensions,