Merge branch 'master' into patch-1

Author: M-DEV-1

src/custom/Modal/index.tsx

@@ -3,7 +3,8 @@ import React, { useRef, useState } from 'react';
 import { Box, Dialog, IconButton, Paper, Typography } from '../../base';
 import { ContainedButton, OutlinedButton, TextButton } from '../../base/Button/Button';
 import { iconLarge, iconMedium } from '../../constants/iconsSizes';
-import { CloseIcon, InfoCircleIcon } from '../../icons';
+import { CloseIcon, FullScreenIcon, InfoCircleIcon } from '../../icons';
+import FullScreenExitIcon from '../../icons/Fullscreen/FullScreenExitIcon';
 import { darkModalGradient, lightModalGradient } from '../../theme/colors/colors';
 import { CustomTooltip } from '../CustomTooltip';
 
@@ -12,6 +13,7 @@ interface ModalProps extends DialogProps {
   title: string;
   headerIcon?: React.ReactNode;
   reactNode?: React.ReactNode;
+  isFullScreenModeAllowed?: boolean;
 }
 
 interface ModalFooterProps {
@@ -56,6 +58,20 @@ const StyledDialog = styled(Dialog)`
   }
 `;
 
+const FullscreenButton = styled(FullScreenIcon)(({ theme }) => ({
+  height: '2.25rem',
+  width: '2.25rem',
+  fill: theme.palette.common.white,
+  cursor: 'pointer'
+}));
+
+const FullscreenExitButton = styled(FullScreenExitIcon)(({ theme }) => ({
+  height: '2.25rem',
+  width: '2.25rem',
+  fill: theme.palette.common.white,
+  cursor: 'pointer'
+}));
+
 export const ModalStyledHeader = styled('div')(({ theme }) => ({
   background: theme.palette.mode === 'light' ? lightModalGradient.header : darkModalGradient.header,
   color: '#eee',
@@ -103,7 +119,8 @@ export const useModal = ({ headerIcon }: { headerIcon: React.ReactNode }): UseMo
 export const ModalBody = styled(Paper)(({ theme }) => ({
   padding: '1rem',
   backgroundColor: theme.palette.background.surfaces,
-  overflowY: 'auto'
+  overflowY: 'auto',
+  height: '100%'
 }));
 
 const StyledFooter = styled('div', {
@@ -135,16 +152,22 @@ export const Modal: React.FC<ModalProps> = ({
   reactNode,
   children,
   maxWidth = 'xs',
+  isFullScreenModeAllowed,
   ...props
 }) => {
+  const [fullScreen, setFullScreen] = useState(false);
+  const toggleFullScreen = () => {
+    setFullScreen((prev) => !prev);
+  };
   return (
     <StyledDialog
-      fullWidth={true}
       maxWidth={maxWidth}
       open={open}
       onClose={closeModal}
       aria-labelledby="alert-dialog-slide-title"
       aria-describedby="alert-dialog-slide-description"
+      fullScreen={fullScreen}
+      fullWidth={!fullScreen}
       {...props}
     >
       {title && (
@@ -153,9 +176,20 @@ export const Modal: React.FC<ModalProps> = ({
           <Typography component={'div'} variant="h6">
             {title}
           </Typography>
-          <CloseBtn onClick={closeModal}>
-            <CloseIcon {...iconLarge} fill="#fff"></CloseIcon>
-          </CloseBtn>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+            {isFullScreenModeAllowed && (
+              <CustomTooltip title={fullScreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}>
+                {fullScreen ? (
+                  <FullscreenExitButton onClick={toggleFullScreen} />
+                ) : (
+                  <FullscreenButton onClick={toggleFullScreen} />
+                )}
+              </CustomTooltip>
+            )}
+            <CloseBtn onClick={closeModal}>
+              <CloseIcon {...iconLarge} fill="#fff"></CloseIcon>
+            </CloseBtn>
+          </div>
         </ModalStyledHeader>
       )}
 

src/custom/ShareModal/ShareModal.tsx

@@ -151,9 +151,11 @@ interface SelectedResource {
   [key: string]: unknown;
 }
 
+type SelectedResources = SelectedResource | SelectedResource[];
+
 export type ResourceAccessArg = {
   resourceType: string;
-  resourceId: string;
+  resourceId: string | string[];
   resourceAccessMappingPayload: {
     grant_access: string[];
     revoke_access: string[];
@@ -167,8 +169,8 @@ import { VISIBILITY } from '../../constants/constants';
 interface ShareModalProps {
   /** Function to close the share modal */
   handleShareModalClose: () => void;
-  /** The resource that is selected for sharing.*/
-  selectedResource: SelectedResource;
+  /** The resource(s) that is selected for sharing.*/
+  selectedResource: SelectedResources;
   /** The name of the data being shared, like design or filter */
   dataName: string;
   /** Data of the user who owns the resource */
@@ -212,26 +214,29 @@ const ShareModal: React.FC<ShareModalProps> = ({
   useGetAllUsersQuery,
   shareableLink
 }: ShareModalProps): JSX.Element => {
+  console.log('amit selectdResource', selectedResource);
   const theme = useTheme();
   const [openMenu, setMenu] = useState<boolean>(false);
   const [shareUserData, setShareUserData] = useState<User[]>([]);
-  const [resourceVisibility, setVisibility] = useState(selectedResource.visibility);
+  const [resourceVisibility, setVisibility] = useState(
+    Array.isArray(selectedResource) ? selectedResource[0].visibility : selectedResource.visibility
+  );
+  console.log('amit resourceVisibility', resourceVisibility);
   const [isUpdatingVisibility, setUpdatingVisibility] = useState(false);
 
-  const userCanUpdateVisibility = canUpdateResourceVisibility(
-    selectedResource,
-    currentUser,
-    ownerData
-  );
-  const userCanShareWithNewUsers = canShareResourceWithNewUsers(
-    selectedResource,
-    currentUser,
-    ownerData
-  );
+  const userCanUpdateVisibility = Array.isArray(selectedResource)
+    ? selectedResource.every((resource) =>
+        canUpdateResourceVisibility(resource, currentUser, ownerData)
+      )
+    : canUpdateResourceVisibility(selectedResource, currentUser, ownerData);
+
+  const userCanShareWithNewUsers = Array.isArray(selectedResource)
+    ? selectedResource.every((resource) =>
+        canShareResourceWithNewUsers(resource, currentUser, ownerData)
+      )
+    : canShareResourceWithNewUsers(selectedResource, currentUser, ownerData);
 
   const handleCopy = () => {
-    // const shareableLink = getShareableResourceRoute(dataName,selectedResource.id,selectedResource.name)
-    console.log('shareableLink', shareableLink);
     navigator.clipboard.writeText(shareableLink);
     notify({
       message: 'Link copied to clipboard',
@@ -242,16 +247,49 @@ const ShareModal: React.FC<ShareModalProps> = ({
   const resourceType = dataName === 'design' ? 'pattern' : dataName;
 
   const handleShareWithNewUsers = async (newUsers: User[]) => {
-    console.log('new users', newUsers);
     const grantAccessList = newUsers.map((user) => ({
       actor_id: user.user_id,
       actor_type: 'user'
     }));
     const emails = newUsers.map((u) => u.email);
 
+    if (Array.isArray(selectedResource)) {
+      const responses = await Promise.all(
+        selectedResource.map((resource) =>
+          resourceAccessMutator({
+            resourceType,
+            resourceId: resource.id,
+            resourceAccessMappingPayload: {
+              grant_access: [...grantAccessList],
+              revoke_access: [],
+              notify_users: true
+            }
+          })
+        )
+      );
+
+      const hasError = responses.some((response) => response?.error);
+
+      if (!hasError) {
+        notify({
+          message: `${dataName}s shared with ${emails.join(', ')}`,
+          event_type: 'success'
+        });
+      } else {
+        notify({
+          message: `An error occurred. Some ${dataName}s may not have been shared`,
+          event_type: 'error'
+        });
+      }
+
+      return {
+        error: hasError ? 'Some resources failed to share' : ''
+      };
+    }
+
     const response = await resourceAccessMutator({
       resourceType,
-      resourceId: selectedResource?.id,
+      resourceId: !Array.isArray(selectedResource) ? selectedResource.id : selectedResource[0].id,
       resourceAccessMappingPayload: {
         grant_access: [...grantAccessList],
         revoke_access: [],
@@ -260,9 +298,8 @@ const ShareModal: React.FC<ShareModalProps> = ({
     });
 
     if (!response?.error) {
-      const msg = `${dataName} shared with ${emails.join(', ')} `;
       notify({
-        message: msg,
+        message: `${dataName} shared with ${emails.join(', ')}`,
         event_type: 'success'
       });
     }
@@ -288,7 +325,7 @@ const ShareModal: React.FC<ShareModalProps> = ({
 
     const response = await resourceAccessMutator({
       resourceType,
-      resourceId: selectedResource?.id,
+      resourceId: !Array.isArray(selectedResource) ? selectedResource.id : selectedResource[0].id,
       resourceAccessMappingPayload: {
         grant_access: [],
         revoke_access: [...revokeAccessList],
@@ -327,7 +364,9 @@ const ShareModal: React.FC<ShareModalProps> = ({
 
   /* eslint-disable @typescript-eslint/no-explicit-any */
   const notifyVisibilityChange = (res: any, value: any) => {
-    const UPDATE_VISIBILITY_MSG = `${startCase(dataName)} '${selectedResource.name}' is now ${value}`;
+    const UPDATE_VISIBILITY_MSG = Array.isArray(selectedResource)
+      ? `${startCase(dataName)}s (${selectedResource.length}) are now ${value}`
+      : `${startCase(dataName)} '${selectedResource.name}' is now ${value}`;
     const FAILED_TO_UPDATE_VISIBILITY_MSG = `Failed to update visibility. ${res?.error?.error || ''}`;
 
     if (!res.error) {
@@ -378,7 +417,11 @@ const ShareModal: React.FC<ShareModalProps> = ({
       <Modal
         open={true}
         closeModal={handleShareModalClose}
-        title={`Share ${dataName} "${selectedResource?.name}"`}
+        title={
+          Array.isArray(selectedResource)
+            ? `Share ${selectedResource.length} ${dataName}s`
+            : `Share ${dataName} "${selectedResource?.name}"`
+        }
       >
         <ModalBody>
           <UserShareSearch
@@ -395,7 +438,7 @@ const ShareModal: React.FC<ShareModalProps> = ({
             hostURL={hostURL}
           />
 
-          {resourceVisibility !== 'published' && (
+          {!Array.isArray(selectedResource) && resourceVisibility !== 'published' && (
             <>
               <CustomListItemText>
                 <Typography variant="h6">General Access</Typography>

src/custom/UniversalFilter.tsx

@@ -29,7 +29,7 @@ export interface UniversalFilterProps {
 }
 
 export const FilterHeader = styled('div')(({ theme }) => ({
-  background: theme.palette.mode === 'light' ? lightModalGradient.fotter : darkModalGradient.fotter,
+  background: theme.palette.mode === 'light' ? lightModalGradient.header : darkModalGradient.header,
   padding: '0.75rem 1rem',
   margin: '-1rem -1rem 1rem -1rem',
   display: 'flex',
@@ -136,7 +136,11 @@ function UniversalFilter({
             anchorEl={anchorEl}
             placement="bottom-end"
           >
-            <ClickAwayListener onClickAway={handleClose}>
+            <ClickAwayListener
+              onClickAway={handleClose}
+              mouseEvent="onMouseDown"
+              touchEvent="onTouchStart"
+            >
               <Paper
                 sx={{
                   padding: '1rem',

src/icons/Export/ExportIcon.tsx

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import { DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
+import { IconProps } from '../types';
+
+export const DownloadIcon: FC<IconProps> = ({
+  width = DEFAULT_WIDTH,
+  height = DEFAULT_HEIGHT,
+  fill = '#455a64',
+  style = {}
+}) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height={height}
+    viewBox="0 0 24 24"
+    width={width}
+    fill={fill}
+    style={style}
+  >
+    <path d="M19 9h-4V3H9v6H5l7 7zM5 18v2h14v-2z"></path>
+  </svg>
+);
+
+export default DownloadIcon;

src/icons/Export/index.ts

@@ -0,0 +1 @@
+export { default as ExportIcon } from './ExportIcon';

src/icons/index.ts

@@ -58,6 +58,7 @@ export * from './Drag';
 export * from './Edit';
 export * from './EmptyStyle';
 export * from './Environment';
+export * from './Export';
 export * from './ExternalLink';
 export * from './Feedback';
 export * from './File';

src/theme/palette.ts

@@ -422,8 +422,8 @@ export const darkModePalette: PaletteOptions = {
   },
 
   icon: {
-    default: Colors.accentGrey[90],
-    secondary: Colors.charcoal[80],
+    default: Colors.charcoal[80],
+    secondary: Colors.charcoal[70],
     brand: Colors.keppel[40],
     inverse: Colors.charcoal[10],
     weather: Colors.saffron[40],

src/utils/permissions.ts

@@ -1,4 +1,4 @@
-import { VISIBILITY } from "../constants/constants";
+import { VISIBILITY } from '../constants/constants';
 
 export interface User {
   id: string;
@@ -8,22 +8,28 @@ export interface User {
   email: string;
   avatar_url?: string;
   deleted_at?: { Valid: boolean };
-  role_names?:string[]
+  role_names?: string[];
 }
 
-
-export const canUpdateResource= (selectedResource:{visibility:string}, currentUser:User,resourceOwner:User) => {
-    const isOwner = resourceOwner.user_id == currentUser.user_id
-    const isAdmin = currentUser.role_names?.includes("admin")
-    return isOwner || isAdmin
+export const canUpdateResource = (
+  selectedResource: { visibility: string },
+  currentUser: User,
+  resourceOwner: User
+) => {
+  const isOwner = resourceOwner.user_id == currentUser.user_id;
+  const isAdmin = currentUser.role_names?.includes('admin');
+  return isOwner || isAdmin;
 };
 
-export const  canUpdateResourceVisibility= canUpdateResource
-
+export const canUpdateResourceVisibility = canUpdateResource;
 
-export const canShareResourceWithNewUsers= (selectedResource:{visibility:string}, currentUser:User,resourceOwner:User) => {
-    if (selectedResource.visibility == VISIBILITY.PUBLIC){
-      return true
-    }
-    return canUpdateResource(selectedResource,currentUser,resourceOwner)
+export const canShareResourceWithNewUsers = (
+  selectedResource: { visibility: string },
+  currentUser: User,
+  resourceOwner: User
+) => {
+  if (selectedResource.visibility == VISIBILITY.PUBLIC) {
+    return true;
+  }
+  return canUpdateResource(selectedResource, currentUser, resourceOwner);
 };