Merge branch 'layer5io:master' into redux/middleware

src/custom/CustomColumnVisibilityControl/CustomColumnVisibilityControl.tsx

@@ -1,3 +1,4 @@
+import { useTheme } from '@mui/material';
 import React from 'react';
 import { Box } from '../../base/Box';
 import { Card } from '../../base/Card';
@@ -30,6 +31,7 @@ export function CustomColumnVisibilityControl({
 }: CustomColumnVisibilityControlProps): JSX.Element {
   const [open, setOpen] = React.useState(false);
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const theme = useTheme();
 
   const handleOpen = (event: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
@@ -54,7 +56,7 @@ export function CustomColumnVisibilityControl({
         <TooltipIcon
           title="View Columns"
           onClick={handleOpen}
-          icon={<ColumnIcon fill="#3c494f" />}
+          icon={<ColumnIcon fill={theme.palette.icon.default} />}
           arrow
         />
         <PopperListener
@@ -87,7 +89,7 @@ export function CustomColumnVisibilityControl({
                     flexDirection: 'column',
                     padding: '1rem',
                     boxShadow: open ? '0px 4px 8px rgba(0, 0, 0, 0.2)' : 'none',
-                    background: '#f4f5f7'
+                    background: theme.palette.background.surfaces
                   }}
                 >
                   {columns.map((col) => (

src/custom/CustomImage/CustomImage.tsx

@@ -53,13 +53,14 @@ const CustomImage: React.FC<ImageComponentProps> = ({ src, alt, ...props }) => {
             background: 'transparent',
             boxShadow: 'none',
             overflow: 'auto',
-            maxWidth: '60rem'
+            maxWidth: '100%'
           }
         }}
       >
         <img
           src={src}
           alt={alt}
+          onClick={handleZoomClose}
           style={{
             objectFit: 'contain',
             maxWidth: '100%',

src/custom/Helpers/ResponsiveColumns/responsive-coulmns.tsx/index.tsx

@@ -0,0 +1,4 @@
+import { ColView, updateVisibleColumns } from './responsive-column';
+
+export { updateVisibleColumns };
+export type { ColView };

src/custom/Helpers/ResponsiveColumns/responsive-coulmns.tsx/responsive-column.tsx

@@ -0,0 +1,68 @@
+// colViews screen size reference
+/*
+  na: Not visible at any screen width
+  xs: width < 585,
+  s: width > 585 && width < 690,
+  m: width > 690 && width < 775,
+  l: width > 775 && width < 915,
+  xl: width > 915 && width < 1140
+  All columns except "na" are visible for width > 1140
+*/
+
+export interface ColView {
+  0: string; // column name
+  1: 'na' | 'xs' | 's' | 'm' | 'l' | 'xl'; // screen size
+}
+
+export const updateVisibleColumns = (
+  colViews: ColView[],
+  width: number
+): Record<string, boolean> => {
+  // showCols object contains key value pairs that represent whether a column is visible or hidden.
+  // i.e, Here, key = column name, and value = true/false where true means visible and false means hidden
+  const showCols: Record<string, boolean> = {};
+
+  // colViews is a 2D array where each element is an array of 2 elements namely,
+  // column name and the screen size till which they are visible
+  colViews.forEach((col) => {
+    // Hide the columns for any screen size
+    if (col[1] === 'na') {
+      showCols[col[0]] = false;
+    } else if (width > 1140) {
+      // Display all columns above width 1140
+      showCols[col[0]] = true;
+    } else if (width >= 915 && width < 1140) {
+      if (['xs', 's', 'm', 'l', 'xl'].includes(col[1])) {
+        showCols[col[0]] = true;
+      } else {
+        showCols[col[0]] = false;
+      }
+    } else if (width >= 775 && width < 915) {
+      if (['xs', 's', 'm', 'l'].includes(col[1])) {
+        showCols[col[0]] = true;
+      } else {
+        showCols[col[0]] = false;
+      }
+    } else if (width >= 690 && width < 775) {
+      if (['xs', 's', 'm'].includes(col[1])) {
+        showCols[col[0]] = true;
+      } else {
+        showCols[col[0]] = false;
+      }
+    } else if (width >= 585 && width < 690) {
+      if (['xs', 's'].includes(col[1])) {
+        showCols[col[0]] = true;
+      } else {
+        showCols[col[0]] = false;
+      }
+    } else if (width < 585) {
+      if (col[1] === 'xs') {
+        showCols[col[0]] = true;
+      } else {
+        showCols[col[0]] = false;
+      }
+    }
+  });
+
+  return showCols;
+};

src/custom/Markdown/index.tsx

@@ -12,6 +12,7 @@ import {
   StyledMarkdownH6,
   StyledMarkdownLi,
   StyledMarkdownP,
+  StyledMarkdownPre,
   StyledMarkdownTd,
   StyledMarkdownTh,
   StyledMarkdownTooltipP,
@@ -51,7 +52,8 @@ export const RenderMarkdown: React.FC<RenderMarkdownProps> = ({ content }) => {
         ul: ({ ...props }) => <StyledMarkdownUl>{props.children}</StyledMarkdownUl>,
         li: ({ ...props }) => <StyledMarkdownLi>{props.children}</StyledMarkdownLi>,
         th: ({ ...props }) => <StyledMarkdownTh>{props.children}</StyledMarkdownTh>,
-        td: ({ ...props }) => <StyledMarkdownTd>{props.children}</StyledMarkdownTd>
+        td: ({ ...props }) => <StyledMarkdownTd>{props.children}</StyledMarkdownTd>,
+        pre: ({ ...props }) => <StyledMarkdownPre>{props.children}</StyledMarkdownPre>
       }}
     >
       {content}

src/custom/Markdown/style.tsx

@@ -2,7 +2,7 @@ import { styled } from '@mui/material';
 import { text } from '../../theme/colors/colors';
 
 export const StyledMarkdown = styled('a')(({ theme }) => ({
-  color: theme.palette.text.brand,
+  color: theme.palette.background.brand?.default,
   textDecoration: 'none',
   '&:hover': {
     textDecoration: 'underline'
@@ -71,3 +71,8 @@ export const StyledMarkdownTd = styled('td')(({ theme }) => ({
   marginBlock: '0px',
   ...theme.typography.textB1Regular
 }));
+
+export const StyledMarkdownPre = styled('pre')(({ theme }) => ({
+  background: theme.palette.background.code,
+  whiteSpace: 'pre-line'
+}));

src/custom/ResponsiveDataTable.tsx

@@ -1,6 +1,96 @@
-import { Theme, ThemeProvider, createTheme } from '@mui/material';
+import { Theme, ThemeProvider, createTheme, styled } from '@mui/material';
 import MUIDataTable from 'mui-datatables';
 import React, { useCallback } from 'react';
+import { Checkbox, Collapse, ListItemIcon, ListItemText, Menu, MenuItem } from '../base';
+import { ShareIcon } from '../icons';
+import { EllipsisIcon } from '../icons/Ellipsis';
+import TooltipIcon from './TooltipIcon';
+
+export const IconWrapper = styled('div')<{ disabled?: boolean }>(({ disabled = false }) => ({
+  cursor: disabled ? 'not-allowed' : 'pointer',
+  opacity: disabled ? '0.5' : '1',
+  display: 'flex',
+  '& svg': {
+    cursor: disabled ? 'not-allowed' : 'pointer'
+  }
+}));
+
+export const DataTableEllipsisMenu: React.FC<{
+  actionsList: NonNullable<Column['options']>['actionsList'];
+}> = ({ actionsList }) => {
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const [isSocialShareOpen, setIsSocialShareOpen] = React.useState(false);
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+    setIsSocialShareOpen(false);
+  };
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const handleActionClick = (action: any) => {
+    if (action.type === 'share-social') {
+      setIsSocialShareOpen(!isSocialShareOpen);
+    } else {
+      if (action.onClick) {
+        action.onClick();
+      }
+      handleClose();
+    }
+  };
+
+  return (
+    <>
+      <TooltipIcon title="View Actions" onClick={handleClick} icon={<EllipsisIcon />} arrow />
+      <Menu id="basic-menu" anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
+        {actionsList &&
+          actionsList.map((action, index) => (
+            <React.Fragment key={index}>
+              {action.type === 'share-social' ? (
+                <>
+                  <MenuItem
+                    sx={{
+                      width: '-webkit-fill-available'
+                      // background: theme.palette.background.surfaces
+                    }}
+                    onClick={() => handleActionClick(action)}
+                    disabled={action.disabled}
+                  >
+                    <ListItemIcon>
+                      <ShareIcon width={24} height={24} />
+                    </ListItemIcon>
+                    <ListItemText>{action.title}</ListItemText>
+                  </MenuItem>
+                  <Collapse variant="submenu" in={isSocialShareOpen} unmountOnExit>
+                    {action.customComponent}
+                  </Collapse>
+                </>
+              ) : (
+                <>
+                  <IconWrapper key={index} disabled={action.disabled}>
+                    <MenuItem
+                      sx={{
+                        width: '-webkit-fill-available'
+                        // background: theme.palette.background.surfaces
+                      }}
+                      key={index}
+                      onClick={() => handleActionClick(action)}
+                      disabled={action.disabled}
+                    >
+                      <ListItemIcon>{action.icon}</ListItemIcon>
+                      <ListItemText>{action.title}</ListItemText>
+                    </MenuItem>
+                  </IconWrapper>
+                </>
+              )}
+            </React.Fragment>
+          ))}
+      </Menu>
+    </>
+  );
+};
 
 const dataTableTheme = (theme: Theme) =>
   createTheme({
@@ -115,6 +205,15 @@ const dataTableTheme = (theme: Theme) =>
             }
           }
         }
+      },
+      MuiTableRow: {
+        styleOverrides: {
+          root: {
+            '&.Mui-disabled': {
+              cursor: 'not-allowed'
+            }
+          }
+        }
       }
     }
   });
@@ -129,6 +228,14 @@ export interface Column {
     display?: boolean;
     sortDescFirst?: boolean;
     customBodyRender?: (value: string | number | boolean | object) => JSX.Element;
+    actionsList?: {
+      title: string;
+      icon: JSX.Element;
+      onClick: () => void;
+      disabled?: boolean;
+      customComponent?: JSX.Element;
+      type?: string;
+    }[];
   };
 }
 
@@ -167,6 +274,11 @@ const ResponsiveDataTable = ({
 
   const updatedOptions = {
     ...options,
+    print: false,
+    download: false,
+    search: false,
+    filter: false,
+    viewColumns: false,
     rowsPerPageOptions: rowsPerPageOptions,
     onViewColumnsChange: (column: string, action: string) => {
       switch (action) {
@@ -244,7 +356,8 @@ const ResponsiveDataTable = ({
   }, [updateColumnsEffect]);
 
   const components = {
-    ExpandButton: () => ''
+    ExpandButton: () => '',
+    Checkbox: Checkbox
   };
 
   return (

src/custom/SearchBar.tsx

@@ -12,7 +12,7 @@ const customTheme = (theme: Theme) =>
       MuiTextField: {
         styleOverrides: {
           root: {
-            '--TextField-brandBorderColor': 'rgba(0, 0, 0, 0.5)',
+            '--TextField-brandBorderColor': theme.palette.border.strong,
             '--TextField-brandBorderHoverColor': theme.palette.background.graphics?.default,
             '--TextField-brandBorderFocusedColor': theme.palette.background.graphics?.default,
             '& label.Mui-focused': {
@@ -39,6 +39,7 @@ const customTheme = (theme: Theme) =>
       MuiInput: {
         styleOverrides: {
           root: {
+            color: theme.palette.text.default,
             '&::before': {
               borderBottom: '2px solid var(--TextField-brandBorderColor)'
             },
@@ -61,21 +62,18 @@ export interface SearchBarProps {
   onClear?: () => void;
   expanded: boolean;
   setExpanded: (expanded: boolean) => void;
-  iconFill?: string;
 }
 
 function SearchBar({
   onSearch,
   placeholder,
   onClear,
   expanded,
-  setExpanded,
-  iconFill
+  setExpanded
 }: SearchBarProps): JSX.Element {
   const [searchText, setSearchText] = React.useState('');
   const searchRef = React.useRef<HTMLInputElement | null>(null);
-
-  const outerTheme = useTheme();
+  const theme = useTheme();
 
   const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
     setSearchText(event.target.value);
@@ -123,7 +121,7 @@ function SearchBar({
       }}
     >
       <div>
-        <ThemeProvider theme={customTheme(outerTheme)}>
+        <ThemeProvider theme={customTheme(theme)}>
           <TextField
             variant="standard"
             value={searchText}
@@ -144,14 +142,14 @@ function SearchBar({
           <TooltipIcon
             title="Close"
             onClick={handleClearIconClick}
-            icon={<CloseIcon fill={iconFill} />}
+            icon={<CloseIcon fill={theme.palette.icon.default} />}
             arrow
           />
         ) : (
           <TooltipIcon
             title="Search"
             onClick={handleSearchIconClick}
-            icon={<SearchIcon fill={iconFill} />}
+            icon={<SearchIcon fill={theme.palette.icon.default} />}
             arrow
           />
         )}

src/custom/SetupPrerequisite/style.tsx

@@ -31,6 +31,12 @@ const Card = styled('a')(({ theme }) => ({
   borderRadius: '10px',
   '&:hover': {
     boxShadow: 'rgb(0, 211, 169) 0px 0px 7px'
+  },
+  '& a': {
+    margin: '0 !important',
+    '&:hover': {
+      color: theme.palette.background.brand?.default
+    }
   }
 }));