Allow granular permissions for creating objects and fields

Add granular permission options to creating objects

resolves  #955

libs/features/create-object-and-fields/src/create-new-object/CreateNewObjectPermissions.tsx

@@ -1,18 +1,30 @@
 import { useNonInitialEffect, useProfilesAndPermSets } from '@jetstream/shared/ui-utils';
 import { SalesforceOrgUi } from '@jetstream/types';
-import { Checkbox, Grid, ListWithFilterMultiSelect } from '@jetstream/ui';
-import { FunctionComponent, useState } from 'react';
+import { Grid, ListWithFilterMultiSelect, Radio, RadioGroup } from '@jetstream/ui';
+import { Fragment, useEffect, useState } from 'react';
 import { useRecoilState } from 'recoil';
+import { CreateNewObjectPermissionsCheckboxes } from './CreateNewObjectPermissionsCheckboxes';
 import * as fromCreateObjectState from './create-object-state';
 import { CreateObjectPermissions } from './create-object-types';
 
+function getDefaultPermissions() {
+ return {
+ allowCreate: true,
+ allowDelete: true,
+ allowEdit: true,
+ allowRead: true,
+ modifyAllRecords: true,
+ viewAllRecords: true,
+ };
+}
+
 export interface CreateNewObjectPermissionsProps {
  selectedOrg: SalesforceOrgUi;
  loading: boolean;
  portalRef?: Element;
 }
 
-export const CreateNewObjectPermissions: FunctionComponent<CreateNewObjectPermissionsProps> = ({ selectedOrg, loading, portalRef }) => {
+export const CreateNewObjectPermissions = ({ selectedOrg, loading, portalRef }: CreateNewObjectPermissionsProps) => {
  const [profiles, setProfiles] = useRecoilState(fromCreateObjectState.profilesState);
  const [selectedProfiles, setSelectedProfiles] = useRecoilState(fromCreateObjectState.selectedProfilesState);
 
@@ -21,14 +33,40 @@ export const CreateNewObjectPermissions: FunctionComponent<CreateNewObjectPermis
 
  const profilesAndPermSetsData = useProfilesAndPermSets(selectedOrg, profiles, permissionSets);
 
- const [objectPermissions, setObjectPermissions] = useState<CreateObjectPermissions>({
- allowCreate: true,
- allowDelete: true,
- allowEdit: true,
- allowRead: true,
- modifyAllRecords: true,
- viewAllRecords: true,
- });
+ const [permissionScope, setPermissionScope] = useState<'ALL' | 'GRANULAR'>('ALL');
+
+ const [objectPermissions, setObjectPermissions] = useState<CreateObjectPermissions>(getDefaultPermissions);
+
+ const [objectPermissionsGranular, setObjectPermissionsGranular] = useState<Record<string, CreateObjectPermissions>>({});
+
+ const [permissionLabelMap, setPermissionLabelMap] = useState<Record<string, string>>({});
+
+ const selectedProfilesPermSets = [...selectedProfiles, ...selectedPermissionSets];
+
+ useEffect(() => {
+ const profilesPermSetsById = [...(profiles || []), ...(permissionSets || [])].reduce((acc: Record<string, string>, item) => {
+ acc[item.value] = item.label;
+ return acc;
+ }, {});
+ setPermissionLabelMap(
+ [...selectedProfiles, ...selectedPermissionSets].reduce((acc: Record<string, string>, id) => {
+ acc[id] = profilesPermSetsById[id];
+ return acc;
+ }, {})
+ );
+ }, [selectedProfiles, selectedPermissionSets, profiles, permissionSets]);
+
+ useEffect(() => {
+ setObjectPermissionsGranular((prevValue) => {
+ const newValue = { ...prevValue };
+ [...selectedProfiles, ...selectedPermissionSets].forEach((profileOrPermSet) => {
+ if (!newValue[profileOrPermSet]) {
+ newValue[profileOrPermSet] = getDefaultPermissions();
+ }
+ });
+ return newValue;
+ });
+ }, [selectedProfiles, selectedPermissionSets]);
 
  useNonInitialEffect(() => {
  setProfiles(profilesAndPermSetsData.profiles);
@@ -82,48 +120,49 @@ export const CreateNewObjectPermissions: FunctionComponent<CreateNewObjectPermis
  </div>
  <div className="slds-p-left_large">
  <h2 className="slds-text-heading_medium slds-grow slds-text-align_center slds-m-bottom_xx-small">Object Permissions</h2>
- <Checkbox
- id="objectPermissions.allowCreate"
- label="Allow Create"
- checked={objectPermissions.allowCreate}
- onChange={(value) => setObjectPermissions((priorValue) => ({ ...priorValue, allowCreate: value }))}
- disabled={loading}
- />
- <Checkbox
- id="objectPermissions.allowDelete"
- label="Allow Delete"
- checked={objectPermissions.allowDelete}
- onChange={(value) => setObjectPermissions((priorValue) => ({ ...priorValue, allowDelete: value }))}
- disabled={loading}
- />
- <Checkbox
- id="objectPermissions.allowEdit"
- label="Allow Edit"
- checked={objectPermissions.allowEdit}
- onChange={(value) => setObjectPermissions((priorValue) => ({ ...priorValue, allowEdit: value }))}
- disabled={loading}
- />
- <Checkbox
- id="objectPermissions.allowRead"
- label="Allow Read"
- checked={objectPermissions.allowRead}
- onChange={(value) => setObjectPermissions((priorValue) => ({ ...priorValue, allowRead: value }))}
- disabled={loading}
- />
- <Checkbox
- id="objectPermissions.modifyAllRecords"
- label="Modify All Records"
- checked={objectPermissions.modifyAllRecords}
- onChange={(value) => setObjectPermissions((priorValue) => ({ ...priorValue, modifyAllRecords: value }))}
- disabled={loading}
- />
- <Checkbox
- id="objectPermissions.viewAllRecords"
- label="View All Records"
- checked={objectPermissions.viewAllRecords}
- onChange={(value) => setObjectPermissions((priorValue) => ({ ...priorValue, viewAllRecords: value }))}
- disabled={loading}
- />
+
+ <RadioGroup label="Permission Scope" className="slds-m-bottom_x-small">
+ <Radio
+ id="all-permissions"
+ name="permissions-group"
+ label="Apply Same Permissions to All"
+ value="ALL"
+ checked={permissionScope === 'ALL'}
+ onChange={(value) => setPermissionScope(value as 'ALL' | 'GRANULAR')}
+ disabled={loading}
+ />
+ <Radio
+ id="granular-permissions"
+ name="permissions-group"
+ label="Apply Granular Permissions"
+ value="GRANULAR"
+ checked={permissionScope === 'GRANULAR'}
+ onChange={(value) => setPermissionScope(value as 'ALL' | 'GRANULAR')}
+ disabled={loading}
+ />
+ </RadioGroup>
+
+ <hr className="slds-m-vertical_xx-small" />
+
+ {permissionScope === 'ALL' && (
+ <CreateNewObjectPermissionsCheckboxes
+ loading={loading}
+ objectPermissions={objectPermissions}
+ onChange={(value) => setObjectPermissions(value)}
+ />
+ )}
+
+ {permissionScope === 'GRANULAR' &&
+ selectedProfilesPermSets.map((profileOrPermSet) => (
+ <Fragment key={profileOrPermSet}>
+ <h3 className="slds-text-heading_small slds-m-top_medium slds-m-bottom_x-small">{permissionLabelMap[profileOrPermSet]}</h3>
+ <CreateNewObjectPermissionsCheckboxes
+ loading={loading}
+ objectPermissions={objectPermissionsGranular[profileOrPermSet]}
+ onChange={(value) => setObjectPermissionsGranular((prevValue) => ({ ...prevValue, [profileOrPermSet]: value }))}
+ />
+ </Fragment>
+ ))}
  </div>
  </Grid>
  );

libs/features/create-object-and-fields/src/create-new-object/CreateNewObjectPermissionsCheckboxes.tsx

@@ -0,0 +1,84 @@
+import { Checkbox } from '@jetstream/ui';
+import { CreateObjectPermissions } from './create-object-types';
+
+export interface CreateNewObjectPermissionsProps {
+ objectPermissions: CreateObjectPermissions;
+ loading: boolean;
+ onChange: (objectPermissions: CreateObjectPermissions) => void;
+}
+
+export const CreateNewObjectPermissionsCheckboxes = ({ objectPermissions, loading, onChange }: CreateNewObjectPermissionsProps) => {
+ const allSelected =
+ objectPermissions.allowCreate &&
+ objectPermissions.allowDelete &&
+ objectPermissions.allowEdit &&
+ objectPermissions.allowRead &&
+ objectPermissions.modifyAllRecords &&
+ objectPermissions.viewAllRecords;
+
+ function handleSelectAll(value: boolean) {
+ onChange({
+ allowCreate: value,
+ allowDelete: value,
+ allowEdit: value,
+ allowRead: value,
+ modifyAllRecords: value,
+ viewAllRecords: value,
+ });
+ }
+
+ return (
+ <>
+ <Checkbox
+ id="objectPermissions.selectAll"
+ label="Select All"
+ className="slds-m-bottom_xx-small"
+ checked={allSelected}
+ onChange={handleSelectAll}
+ disabled={loading}
+ />
+ <Checkbox
+ id="objectPermissions.allowCreate"
+ label="Allow Create"
+ checked={objectPermissions.allowCreate}
+ onChange={(value) => onChange({ ...objectPermissions, allowCreate: value })}
+ disabled={loading}
+ />
+ <Checkbox
+ id="objectPermissions.allowDelete"
+ label="Allow Delete"
+ checked={objectPermissions.allowDelete}
+ onChange={(value) => onChange({ ...objectPermissions, allowDelete: value })}
+ disabled={loading}
+ />
+ <Checkbox
+ id="objectPermissions.allowEdit"
+ label="Allow Edit"
+ checked={objectPermissions.allowEdit}
+ onChange={(value) => onChange({ ...objectPermissions, allowEdit: value })}
+ disabled={loading}
+ />
+ <Checkbox
+ id="objectPermissions.allowRead"
+ label="Allow Read"
+ checked={objectPermissions.allowRead}
+ onChange={(value) => onChange({ ...objectPermissions, allowRead: value })}
+ disabled={loading}
+ />
+ <Checkbox
+ id="objectPermissions.modifyAllRecords"
+ label="Modify All Records"
+ checked={objectPermissions.modifyAllRecords}
+ onChange={(value) => onChange({ ...objectPermissions, modifyAllRecords: value })}
+ disabled={loading}
+ />
+ <Checkbox
+ id="objectPermissions.viewAllRecords"
+ label="View All Records"
+ checked={objectPermissions.viewAllRecords}
+ onChange={(value) => onChange({ ...objectPermissions, viewAllRecords: value })}
+ disabled={loading}
+ />
+ </>
+ );
+};