Page MenuHomePhabricator
Differential D8624

[web] Push the create role modal with prepopulated fields when Edit Role is clicked
ClosedPublic
Actions

Authored by rohan on Jul 25 2023, 8:13 AM.
Tags
None
Referenced Files
Unknown Object (File)
Wed, Mar 19, 3:43 PM
Unknown Object (File)
Thu, Mar 6, 5:51 AM
Unknown Object (File)
Mon, Mar 3, 11:55 PM
Unknown Object (File)
Feb 19 2025, 6:46 PM
Unknown Object (File)
Feb 16 2025, 10:10 AM
Unknown Object (File)
Feb 16 2025, 10:10 AM
Unknown Object (File)
Feb 16 2025, 10:10 AM
Unknown Object (File)
Feb 16 2025, 10:09 AM
View All Files
Subscribers
ashoat
tomek

Details

Reviewers
atul
ginsu
Commits
rCOMMbdab982a2130: [web] Push the create role modal with prepopulated fields when Edit Role is…
Summary

This diff essentially handles the edit role workflow on web, where the permission enum options will be pre-selected if previously selected. The logic is similar to what was done in D8524 on native. The keyserver logic for handling editing roles is already done earlier in the stack

ENG-4430

Depends on D8623

Test Plan

Verified that the modal is opened with the correct pre-populated fields after creating a new role then trying to edit it

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

rohan created this revision.Jul 25 2023, 8:13 AM
Herald added subscribers: tomek, ashoat. · View Herald TranscriptJul 25 2023, 8:13 AM
rohan edited the test plan for this revision. (Show Details)Jul 25 2023, 8:19 AM
rohan edited the summary of this revision. (Show Details)
rohan added a child revision: D8625: [web] Create the modals that will allow the user to confirm role deletion.Jul 25 2023, 8:23 AM
Harbormaster returned this revision to the author for changes because remote builds failed.Jul 25 2023, 8:45 AM
Harbormaster failed remote builds in B21188: Diff 29023!
Harbormaster completed remote builds in B21188: Diff 29023.Jul 25 2023, 9:41 AM
rohan requested review of this revision.Jul 25 2023, 9:41 AM
atul accepted this revision.Jul 26 2023, 11:17 AM
This revision is now accepted and ready to land.Jul 26 2023, 11:17 AM
rohan updated this revision to Diff 29070.Jul 26 2023, 11:57 AM

Rebase

Harbormaster completed remote builds in B21226: Diff 29070.Jul 26 2023, 12:18 PM
rohan updated this revision to Diff 29101.Jul 27 2023, 2:36 AM

Rebase

Harbormaster completed remote builds in B21257: Diff 29101.Jul 27 2023, 3:10 AM
rohan updated this revision to Diff 29343.Jul 31 2023, 12:06 PM

Rebase

This revision was landed with ongoing or failed builds.Jul 31 2023, 6:15 PM
Closed by commit rCOMMbdab982a2130: [web] Push the create role modal with prepopulated fields when Edit Role is… (authored by rohan). · Explain Why
This revision was automatically updated to reflect the committed changes.
rohan added a commit: rCOMMbdab982a2130: [web] Push the create role modal with prepopulated fields when Edit Role is….
Harbormaster completed remote builds in B21431: Diff 29343.Jul 31 2023, 9:56 PM

Revision Contents
Changeset List

Diff 29070

View Options

web/roles/create-roles-modal.react.js

// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import { View, Text, TouchableOpacity, ScrollView } from 'react-native';
import {
configurableCommunityPermissions,
configurableCommunityPermissionsOptions,
type ConfigurableCommunityPermissionOption,
} from 'lib/types/thread-permission-types.js';
import type { ThreadInfo } from 'lib/types/thread-types.js'; import type { ThreadInfo } from 'lib/types/thread-types.js';
import { getKeysByValue } from 'lib/utils/objects.js';
import type { RolesNavigationProp } from './roles-navigator.react.js'; import type { RolesNavigationProp } from './roles-navigator.react.js';
import EnumSettingsOption from '../components/enum-settings-option.react.js';
import SWMansionIcon from '../components/swmansion-icon.react.js';
import TextInput from '../components/text-input.react.js';
import type { NavigationRoute } from '../navigation/route-names.js'; import type { NavigationRoute } from '../navigation/route-names.js';
import { useStyles } from '../themes/colors.js';
export type CreateRolesScreenParams = { export type CreateRolesScreenParams = {
+threadInfo: ThreadInfo, +threadInfo: ThreadInfo,
+action: 'create_role' | 'edit_role', +action: 'create_role' | 'edit_role',
}; };
type CreateRolesScreenProps = { type CreateRolesScreenProps = {
+navigation: RolesNavigationProp<'CreateRolesScreen'>, +navigation: RolesNavigationProp<'CreateRolesScreen'>,
+route: NavigationRoute<'CreateRolesScreen'>, +route: NavigationRoute<'CreateRolesScreen'>,
}; };
// eslint-disable-next-line no-unused-vars
function CreateRolesScreen(props: CreateRolesScreenProps): React.Node { function CreateRolesScreen(props: CreateRolesScreenProps): React.Node {
return <></>; // eslint-disable-next-line no-unused-vars
const { threadInfo, action } = props.route.params;
const [customRoleName, setCustomRoleName] =
React.useState<string>('New Role');
const [selectedPermissions, setSelectedPermissions] = React.useState([]);
const styles = useStyles(unboundStyles);
const onClearPermissions = React.useCallback(() => {
setSelectedPermissions([]);
}, []);
const isSelectedPermissionsEmpty = selectedPermissions.length === 0;
const clearPermissionsText = React.useMemo(() => {
if (isSelectedPermissionsEmpty) {
return (
<Text style={styles.clearPermissionsTextDisabled}>
Clear permissions
</Text>
);
}
return (
<TouchableOpacity onPress={onClearPermissions}>
ashoatUnsubmitted
Not Done
Inline Actions

Does TouchableOpacity have a disabled prop? It would probably be less expensive to use that, instead of unmounting / remounting TouchableOpacity when it becomes enabled / disabled

ashoat: Does `TouchableOpacity` have a `disabled` prop? It would probably be less expensive to use that…
rohanAuthorUnsubmitted
Done
Inline Actions

Looks like it does actually, I didn't know that

rohan: Looks like it does actually, I didn't know that
<Text style={styles.clearPermissionsText}>Clear permissions</Text>
</TouchableOpacity>
);
}, [
isSelectedPermissionsEmpty,
onClearPermissions,
styles.clearPermissionsText,
styles.clearPermissionsTextDisabled,
]);
const isUserFacingPermissionSelected = React.useCallback(
(option: ConfigurableCommunityPermissionOption) => {
const associatedPermissions = getKeysByValue(
configurableCommunityPermissions,
option,
);
return associatedPermissions.every(permission =>
selectedPermissions.includes(permission),
);
},
[selectedPermissions],
);
const onEnumValuePress = React.useCallback(
(option: ConfigurableCommunityPermissionOption) => {
// configurableCommunityPermissions is an object where one permission
// is associated with exactly one user-facing option. This means that
// permission propagation are classed as separate entries in the object.
// So, for example, 'edit_entries' and 'descendants_edit_entries' are
// separate entries in the object, but they are both associated with the
// same user-facing option, 'Edit entries'. So when a user-facing option
// is selected, we need to select all permissions associated with that.
const associatedPermissions = getKeysByValue(
configurableCommunityPermissions,
option,
);
// Toggle the inclusivity of the permissions associated with the
// user-facing option.
if (isUserFacingPermissionSelected(option)) {
setSelectedPermissions(currentPermissions =>
currentPermissions.filter(
permission => !associatedPermissions.includes(permission),
),
);
} else {
setSelectedPermissions(currentPermissions => [
...currentPermissions,
...associatedPermissions,
]);
}
},
[isUserFacingPermissionSelected],
);
const permissionsList = React.useMemo(
() =>
[...configurableCommunityPermissionsOptions].map(permission => (
rohanAuthorUnsubmitted
Done
Inline Actions

This is a Set so I used the ... operator to map over it

rohan: This is a Set so I used the `...` operator to [[ https://stackoverflow.
<EnumSettingsOption
key={permission.title}
name={permission.title}
description={permission.description}
enumValue={isUserFacingPermissionSelected(permission)}
onEnumValuePress={() => onEnumValuePress(permission)}
/>
)),
[isUserFacingPermissionSelected, onEnumValuePress],
);
const onChangeRoleNameInput = React.useCallback((roleName: string) => {
setCustomRoleName(roleName);
}, []);
return (
<View>
<View style={styles.roleNameContainer}>
<Text style={styles.roleNameText}>ROLE NAME</Text>
<View style={styles.roleInput}>
<TextInput
style={styles.roleInputComponent}
value={customRoleName}
onChangeText={onChangeRoleNameInput}
editable={true}
/>
<SWMansionIcon name="edit-1" size={20} style={styles.pencilIcon} />
</View>
</View>
<View style={styles.permissionsContainer}>
<View style={styles.permissionsHeader}>
<Text style={styles.permissionsText}>PERMISSIONS</Text>
{clearPermissionsText}
</View>
<ScrollView style={styles.permissionsListContainer}>
{permissionsList}
</ScrollView>
</View>
</View>
);
} }
const unboundStyles = {
roleNameContainer: {
marginTop: 30,
},
roleNameText: {
color: 'panelBackgroundLabel',
fontSize: 12,
marginBottom: 5,
marginLeft: 10,
},
roleInput: {
backgroundColor: 'panelForeground',
padding: 12,
flexDirection: 'row',
justifyContent: 'space-between',
},
roleInputComponent: {
color: 'whiteText',
fontSize: 16,
},
pencilIcon: {
color: 'panelInputSecondaryForeground',
},
permissionsContainer: {
marginTop: 20,
paddingBottom: 220,
},
permissionsHeader: {
flexDirection: 'row',
justifyContent: 'space-between',
},
permissionsText: {
color: 'panelBackgroundLabel',
fontSize: 12,
marginLeft: 10,
},
clearPermissionsText: {
color: 'purpleLink',
fontSize: 12,
marginRight: 15,
},
clearPermissionsTextDisabled: {
color: 'disabledButton',
fontSize: 12,
marginRight: 15,
},
permissionsListContainer: {
backgroundColor: 'panelForeground',
marginTop: 10,
},
};
export default CreateRolesScreen; export default CreateRolesScreen;
View Options

web/roles/role-actions-menu.react.js

// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import { View, Text, TouchableOpacity, ScrollView } from 'react-native';
import {
configurableCommunityPermissions,
configurableCommunityPermissionsOptions,
type ConfigurableCommunityPermissionOption,
} from 'lib/types/thread-permission-types.js';
import type { ThreadInfo } from 'lib/types/thread-types.js'; import type { ThreadInfo } from 'lib/types/thread-types.js';
import { getKeysByValue } from 'lib/utils/objects.js';
import type { RolesNavigationProp } from './roles-navigator.react.js'; import type { RolesNavigationProp } from './roles-navigator.react.js';
import EnumSettingsOption from '../components/enum-settings-option.react.js';
import SWMansionIcon from '../components/swmansion-icon.react.js';
import TextInput from '../components/text-input.react.js';
import type { NavigationRoute } from '../navigation/route-names.js'; import type { NavigationRoute } from '../navigation/route-names.js';
import { useStyles } from '../themes/colors.js';
export type CreateRolesScreenParams = { export type CreateRolesScreenParams = {
+threadInfo: ThreadInfo, +threadInfo: ThreadInfo,
+action: 'create_role' | 'edit_role', +action: 'create_role' | 'edit_role',
}; };
type CreateRolesScreenProps = { type CreateRolesScreenProps = {
+navigation: RolesNavigationProp<'CreateRolesScreen'>, +navigation: RolesNavigationProp<'CreateRolesScreen'>,
+route: NavigationRoute<'CreateRolesScreen'>, +route: NavigationRoute<'CreateRolesScreen'>,
}; };
// eslint-disable-next-line no-unused-vars
function CreateRolesScreen(props: CreateRolesScreenProps): React.Node { function CreateRolesScreen(props: CreateRolesScreenProps): React.Node {
return <></>; // eslint-disable-next-line no-unused-vars
const { threadInfo, action } = props.route.params;
const [customRoleName, setCustomRoleName] =
React.useState<string>('New Role');
const [selectedPermissions, setSelectedPermissions] = React.useState([]);
const styles = useStyles(unboundStyles);
const onClearPermissions = React.useCallback(() => {
setSelectedPermissions([]);
}, []);
const isSelectedPermissionsEmpty = selectedPermissions.length === 0;
const clearPermissionsText = React.useMemo(() => {
if (isSelectedPermissionsEmpty) {
return (
<Text style={styles.clearPermissionsTextDisabled}>
Clear permissions
</Text>
);
}
return (
<TouchableOpacity onPress={onClearPermissions}>
ashoatUnsubmitted
Not Done
Inline Actions

Does TouchableOpacity have a disabled prop? It would probably be less expensive to use that, instead of unmounting / remounting TouchableOpacity when it becomes enabled / disabled

ashoat: Does `TouchableOpacity` have a `disabled` prop? It would probably be less expensive to use that…
rohanAuthorUnsubmitted
Done
Inline Actions

Looks like it does actually, I didn't know that

rohan: Looks like it does actually, I didn't know that
<Text style={styles.clearPermissionsText}>Clear permissions</Text>
</TouchableOpacity>
);
}, [
isSelectedPermissionsEmpty,
onClearPermissions,
styles.clearPermissionsText,
styles.clearPermissionsTextDisabled,
]);
const isUserFacingPermissionSelected = React.useCallback(
(option: ConfigurableCommunityPermissionOption) => {
const associatedPermissions = getKeysByValue(
configurableCommunityPermissions,
option,
);
return associatedPermissions.every(permission =>
selectedPermissions.includes(permission),
);
},
[selectedPermissions],
);
const onEnumValuePress = React.useCallback(
(option: ConfigurableCommunityPermissionOption) => {
// configurableCommunityPermissions is an object where one permission
// is associated with exactly one user-facing option. This means that
// permission propagation are classed as separate entries in the object.
// So, for example, 'edit_entries' and 'descendants_edit_entries' are
// separate entries in the object, but they are both associated with the
// same user-facing option, 'Edit entries'. So when a user-facing option
// is selected, we need to select all permissions associated with that.
const associatedPermissions = getKeysByValue(
configurableCommunityPermissions,
option,
);
// Toggle the inclusivity of the permissions associated with the
// user-facing option.
if (isUserFacingPermissionSelected(option)) {
setSelectedPermissions(currentPermissions =>
currentPermissions.filter(
permission => !associatedPermissions.includes(permission),
),
);
} else {
setSelectedPermissions(currentPermissions => [
...currentPermissions,
...associatedPermissions,
]);
}
},
[isUserFacingPermissionSelected],
);
const permissionsList = React.useMemo(
() =>
[...configurableCommunityPermissionsOptions].map(permission => (
rohanAuthorUnsubmitted
Done
Inline Actions

This is a Set so I used the ... operator to map over it

rohan: This is a Set so I used the `...` operator to [[ https://stackoverflow.
<EnumSettingsOption
key={permission.title}
name={permission.title}
description={permission.description}
enumValue={isUserFacingPermissionSelected(permission)}
onEnumValuePress={() => onEnumValuePress(permission)}
/>
)),
[isUserFacingPermissionSelected, onEnumValuePress],
);
const onChangeRoleNameInput = React.useCallback((roleName: string) => {
setCustomRoleName(roleName);
}, []);
return (
<View>
<View style={styles.roleNameContainer}>
<Text style={styles.roleNameText}>ROLE NAME</Text>
<View style={styles.roleInput}>
<TextInput
style={styles.roleInputComponent}
value={customRoleName}
onChangeText={onChangeRoleNameInput}
editable={true}
/>
<SWMansionIcon name="edit-1" size={20} style={styles.pencilIcon} />
</View>
</View>
<View style={styles.permissionsContainer}>
<View style={styles.permissionsHeader}>
<Text style={styles.permissionsText}>PERMISSIONS</Text>
{clearPermissionsText}
</View>
<ScrollView style={styles.permissionsListContainer}>
{permissionsList}
</ScrollView>
</View>
</View>
);
} }
const unboundStyles = {
roleNameContainer: {
marginTop: 30,
},
roleNameText: {
color: 'panelBackgroundLabel',
fontSize: 12,
marginBottom: 5,
marginLeft: 10,
},
roleInput: {
backgroundColor: 'panelForeground',
padding: 12,
flexDirection: 'row',
justifyContent: 'space-between',
},
roleInputComponent: {
color: 'whiteText',
fontSize: 16,
},
pencilIcon: {
color: 'panelInputSecondaryForeground',
},
permissionsContainer: {
marginTop: 20,
paddingBottom: 220,
},
permissionsHeader: {
flexDirection: 'row',
justifyContent: 'space-between',
},
permissionsText: {
color: 'panelBackgroundLabel',
fontSize: 12,
marginLeft: 10,
},
clearPermissionsText: {
color: 'purpleLink',
fontSize: 12,
marginRight: 15,
},
clearPermissionsTextDisabled: {
color: 'disabledButton',
fontSize: 12,
marginRight: 15,
},
permissionsListContainer: {
backgroundColor: 'panelForeground',
marginTop: 10,
},
};
export default CreateRolesScreen; export default CreateRolesScreen;