add permissions

Signed-off-by: aabidsofi19 <mailtoaabid01@gmail.com>

Author: aabidsofi19

src/constants/constants.ts

@@ -7,7 +7,27 @@ export const CARIBBEAN_GREEN_FILL = '#00D3A9';
 export const DEFAULT_STROKE = '#000';
 export const DEFAULT_STROKE_WIDTH = '2';
 export const CLOUD_URL = 'https://cloud.layer5.io';
-export const PLAYGROUND_MODES = {
-  DESIGNER: 'design',
-  OPERATOR: 'operator'
+
+export const KANVAS_MODE = {
+  DESIGN: "design",
+  OPERATOR: "operator"
 } as const;
+
+
+export const PLAYGROUND_MODES = KANVAS_MODE
+
+export const VISIBILITY = {
+  PUBLIC : "public",
+  PRIVATE :"private"
+}
+
+export const RESOURCE_TYPE = {
+  FILTER: "filter",
+  DESIGN: "design",
+  CATALOG: "catalog",
+  VIEW: "view"
+} as const;
+
+
+export type ResourceType = (typeof RESOURCE_TYPE)[keyof typeof RESOURCE_TYPE];
+

src/custom/ShareModal/ShareModal.tsx

@@ -15,7 +15,7 @@ import { ChainIcon, DeleteIcon, LockIcon, PublicIcon } from '../../icons';
 import { useTheme } from '../../theme';
 import { BLACK, WHITE } from '../../theme/colors';
 import { CustomTooltip } from '../CustomTooltip';
-import { Modal, ModalBody, ModalButtonPrimary, ModalButtonSecondary, ModalFooter } from '../Modal';
+import { Modal, ModalBody,  ModalButtonSecondary, ModalFooter } from '../Modal';
 import UserShareSearch from '../UserSearchField/UserSearchField';
 import {
   CustomDialogContentText,
@@ -26,27 +26,14 @@ import {
   ListWrapper,
   VisibilityIconWrapper
 } from './style';
-import { TypedMutationTrigger, TypedUseQuery } from '@reduxjs/toolkit/dist/query/react';
 
 const options = {
   PUBLIC: 'Anyone with the link can edit',
   PRIVATE: 'Only people with access can open with the link'
 };
 
-const SHARE_MODE = {
-  PRIVATE: 'private',
-  PUBLIC: 'public'
-};
-
-interface User {
-  id: string;
-  user_id: string;
-  first_name: string;
-  last_name: string;
-  email: string;
-  avatar_url?: string;
-  deleted_at?: { Valid: boolean };
-}
+const SHARE_MODE = VISIBILITY
+import { canShareResourceWithNewUsers, canUpdateResourceVisibility, User } from '../../utils/permissions';
 
 interface AccessListProps {
   accessList: User[];
@@ -170,8 +157,8 @@ type ResourceAccessArg = {
 };
 
 
-import type { MutationTrigger } from '@reduxjs/toolkit/query/react';
 import { startCase } from 'lodash';
+import {  VISIBILITY } from '../../constants/constants';
 
 interface ShareModalProps {
   /** Function to close the share modal */
@@ -186,28 +173,17 @@ interface ShareModalProps {
   fetchAccessActors: () => Promise<User[]>;
   /** Optional URL of the host application. Defaults to `null` if not provided */
   hostURL?: string | null;
-  /**
-   * Optional URL of the resource. Defaults to empty string if not provided
-   * Resource URL will be the URL which user will copy with Copy Link Button
-   */
-  resourceURL?: string;
-  /** Optional flag to disable the visibility selector. Defaults to `false` if not provided */
-  isVisibilitySelectorDisabled?: boolean;
-  /**
-   * Function to fetch user suggestions based on the input value.
-   * @param {string} value - The input value for which suggestions are to be fetched.
-   * @returns {Promise<User[]>} A promise that resolves to an array of user suggestions.
-   */
-  fetchSuggestions: (value: string) => Promise<User[]>;
-  handleCopy: () => void;
   handleUpdateVisibility: (value: string) => Promise<{ error: string }>,
   handleShareWithNewUsers: (newUsers: User[]) => Promise<{ error: string }>,
   canShareWithNewUsers: boolean,
   handleRevokeAccess: (revokedUsser: User[]) => Promise<{ error: string }>
   canRevokeAccess: boolean,
-  resourceAccessMutator: MutationTrigger<ResourceAccessArg>,
+  resourceAccessMutator: any,
   notify: ({ message, event_type }: { message: string, event_type: "success" | "error" }) => void,
   useGetAllUsersQuery: any,
+  shareableLink:string,
+  mesheryURL : string, // url to hosted meshery
+  currentUser: User,
 }
 
 /**
@@ -221,14 +197,12 @@ const ShareModal: React.FC<ShareModalProps> = ({
   ownerData,
   fetchAccessActors,
   hostURL = null,
-  handleCopy,
+  currentUser,
   handleUpdateVisibility,
-  canShareWithNewUsers,
-  isVisibilitySelectorDisabled = false,
-  fetchSuggestions,
   resourceAccessMutator,
   notify,
   useGetAllUsersQuery,
+  shareableLink
 
 }: ShareModalProps): JSX.Element => {
   const theme = useTheme();
@@ -237,9 +211,21 @@ const ShareModal: React.FC<ShareModalProps> = ({
   const [resourceVisibility, setVisibility] = useState(selectedResource.visibility)
   const [isUpdatingVisibility, setUpdatingVisibility] = useState(false)
 
+  const userCanUpdateVisibility = canUpdateResourceVisibility(selectedResource,currentUser,ownerData)
+  const userCanShareWithNewUsers = 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",
+      event_type: "success"
+    });
+  };
+
   const resourceType = dataName === "design" ? "pattern" : dataName;
 
 
@@ -397,22 +383,10 @@ const ShareModal: React.FC<ShareModalProps> = ({
       >
         <ModalBody>
           <UserShareSearch
-            setUsersData={setShareUserData}
             usersData={shareUserData}
-            label="Search Users"
             shareWithNewUsers={handleShareWithNewUsers}
-            // isSharing={isSharing}
-            disabled={canShareWithNewUsers}
-            customUsersList={
-              <AccessList
-                accessList={shareUserData}
-                ownerData={ownerData}
-                handleDelete={handleDelete}
-                hostURL={hostURL}
-              />
-            }
+            disabled={!userCanShareWithNewUsers}
             useGetAllUsersQuery={useGetAllUsersQuery}
-            fetchSuggestions={fetchSuggestions}
           />
 
           <AccessList
@@ -463,7 +437,7 @@ const ShareModal: React.FC<ShareModalProps> = ({
                         onClose={handleMenuClose}
                         onOpen={() => setMenu(true)}
                         onChange={updateVisisbility}
-                        disabled={isVisibilitySelectorDisabled || isUpdatingVisibility}
+                        disabled={!userCanUpdateVisibility || isUpdatingVisibility}
                       >
                         {Object.values(SHARE_MODE).map((option) => (
                           <MenuItem
@@ -513,15 +487,7 @@ const ShareModal: React.FC<ShareModalProps> = ({
               </IconButtonWrapper>
               <Typography>Copy Link</Typography>
             </ModalButtonSecondary>
-            {/* <ModalButtonPrimary
-              disabled={isShareDisabled()}
-              variant="contained"
-              color="primary"
-              onClick={() => handleShare(shareUserData, selectedOption)}
-            >
-              Share
-            </ModalButtonPrimary> */}
-          </div>
+           </div>
         </ModalFooter>
       </Modal>
     </div>

src/custom/UserSearchField/UserSearchField.tsx

@@ -1,8 +1,7 @@
 import { Button } from '@mui/material';
 import Autocomplete from '@mui/material/Autocomplete';
 import CircularProgress from '@mui/material/CircularProgress';
-import { debounce } from 'lodash';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, {  useState } from 'react';
 import { Avatar, Box, Chip, Grid, TextField, Typography } from '../../base';
 import { PersonIcon } from '../../icons/Person';
 import { useTheme } from '../../theme';
@@ -21,28 +20,9 @@ interface User {
 interface UserSearchFieldProps {
   // Array of user objects currently selected.
   usersData: User[];
-  // Function to update the selected users data.
-  setUsersData: React.Dispatch<React.SetStateAction<User[]>>;
-  // Label for the text field.
-  label?: string;
-  // Function to enable or disable the save button.
-  setDisableSave?: (disabled: boolean) => void;
-  // Type of search being performed, e.g., 'user', 'admin'.
-  searchType?: string;
-  // Boolean indicating whether the search field is disabled.
   disabled?: boolean;
-  // Custom component to change rendering style of users list, if not given
-  // by default it will show list with avatar and email of selected users
-  customUsersList?: JSX.Element;
-  /**
-   * Function to fetch user suggestions based on the input value.
-   * @param {string} value - The input value for which suggestions are to be fetched.
-   * @returns {Promise<User[]>} A promise that resolves to an array of user suggestions.
-   */
-  fetchSuggestions: (value: string) => Promise<User[]>;
   shareWithNewUsers: (newUsers: User[]) => Promise<{ error: string }>;
   useGetAllUsersQuery: any
-  // isSharing : boolean
 }
 
 const UserShareSearch: React.FC<UserSearchFieldProps> = ({
@@ -92,43 +72,13 @@ const UserShareSearch: React.FC<UserSearchFieldProps> = ({
     }
   };
 
-  // // Memoize the debounced function to prevent recreation on each render
-  // const debouncedFetchSuggestions = useMemo(
-  //   () =>
-  //     debounce(async (value: string) => {
-  //       console.log('debounced fetch running for:', value);
-  //       if (value === '') {
-  //         setOptions([]);
-  //         setOpen(false);
-  //       } else {
-  //         setSearchUserLoading(true);
-  //         const suggestions = await fetchSuggestions(value);
-  //         console.log("suggestions",suggestions)
-  //         setOptions(suggestions);
-  //         setSearchUserLoading(false);
-  //         setError(false);
-  //         setOpen(true);
-  //       }
-  //     }, 300),
-  //   [fetchSuggestions]
-  // );
-
-  // // Clean up debounce on unmount
-  // useEffect(() => {
-  //   return () => {
-  //     debouncedFetchSuggestions.cancel();
-  //   };
-  // }, [debouncedFetchSuggestions]);
-
   // Handler for input changes
   const handleInputChange = (event: React.SyntheticEvent, value: string, reason: string) => {
     // Only process actual typing events, not clearing or blurring
     if (reason === 'input') {
       setInputValue(value);
-      // debouncedFetchSuggestions(value);
     } else if (reason === 'clear') {
       setInputValue('');
-      // setOptions([]);
     }
   };
 

src/utils/permissions.ts

@@ -0,0 +1,29 @@
+import { VISIBILITY } from "../constants/constants";
+
+export interface User {
+  id: string;
+  user_id: string;
+  first_name: string;
+  last_name: string;
+  email: string;
+  avatar_url?: string;
+  deleted_at?: { Valid: boolean };
+  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  canUpdateResourceVisibility= canUpdateResource
+
+
+export const canShareResourceWithNewUsers= (selectedResource:{visibility:string}, currentUser:User,resourceOwner:User) => {
+    if (selectedResource.visibility == VISIBILITY.PUBLIC){
+      return true
+    }
+    return canUpdateResource(selectedResource,currentUser,resourceOwner)
+};

src/utils/routing.ts

@@ -0,0 +1,79 @@
+import { KANVAS_MODE,ResourceType,RESOURCE_TYPE } from "../constants/constants";
+
+
+type PathParams = {
+  id:string
+  name: string
+}
+
+export const viewPath = ({ id, name }:PathParams) => {
+  const currentRoute = new URL(window.location.href);
+  const currentURI = currentRoute.origin + currentRoute.pathname;
+  const newParams = new URLSearchParams({
+    mode: KANVAS_MODE.OPERATOR,
+    type: RESOURCE_TYPE.VIEW,
+    ...(id ? { id } : {}),
+    ...(name ? { name } : {})
+  });
+  const newURI = currentURI + "?" + newParams.toString();
+  return newURI;
+};
+
+export const catalogPath = ({ id, name }:PathParams) => {
+  const currentRoute = new URL(window.location.href);
+  const currentURI = currentRoute.origin + currentRoute.pathname;
+  const newParams = new URLSearchParams({
+    mode: KANVAS_MODE.DESIGN,
+    type: RESOURCE_TYPE.CATALOG,
+    ...(id ? { id } : {}),
+    ...(name ? { name } : {})
+  });
+  const newURI = currentURI + "?" + newParams.toString();
+  return newURI;
+};
+
+export const getRouteParams = () => {
+  const currentRoute = new URL(window.location.href);
+  const params = currentRoute.searchParams;
+  return params;
+};
+
+export const getDesignPath = (id?: string) => {
+  const currentRoute = new URL(window.location.href);
+  const currentURI = currentRoute.origin + currentRoute.pathname;
+
+  const newParams = new URLSearchParams({
+    mode: KANVAS_MODE.DESIGN,
+    ...(id ? { design: id } : {})
+  });
+  const newURI = currentURI + "?" + newParams.toString();
+  return newURI;
+};
+
+export const getShareableResourceRoute = (
+  type: ResourceType,
+  id: string,
+  name: string
+) => {
+  if (type === RESOURCE_TYPE.DESIGN) {
+    return getDesignPath(id);
+  }
+
+  if (type === RESOURCE_TYPE.VIEW) {
+    return viewPath({ id, name });
+  }
+
+  if (type === RESOURCE_TYPE.CATALOG) {
+    return catalogPath({ id, name });
+  }
+
+  throw new Error(`Unknown resource type ${type}`);
+};
+
+export const emptyViewPath = () => {
+  return viewPath({id:"",name:""});
+};
+
+export const getEmptyDesignPath = () => {
+  return getDesignPath();
+};