Add a switch for requiring tags on the multi level tags RHP

src/libs/API/parameters/SetPolicyTagsRequired.ts

@@ -0,0 +1,7 @@
+type SetPolicyTagsRequired = {
+ policyID: string;
+ tagListIndex: number;
+ requireTagList: boolean;
+};
+
+export default SetPolicyTagsRequired;

src/libs/API/parameters/index.ts

@@ -172,6 +172,7 @@ export type {default as SetWorkspaceApprovalModeParams} from './SetWorkspaceAppr
 export type {default as SetWorkspacePayerParams} from './SetWorkspacePayerParams';
 export type {default as SetWorkspaceReimbursementParams} from './SetWorkspaceReimbursementParams';
 export type {default as SetPolicyRequiresTag} from './SetPolicyRequiresTag';
+export type {default as SetPolicyTagsRequired} from './SetPolicyTagsRequired';
 export type {default as RenamePolicyTaglistParams} from './RenamePolicyTaglistParams';
 export type {default as SwitchToOldDotParams} from './SwitchToOldDotParams';
 export type {default as TrackExpenseParams} from './TrackExpenseParams';

src/libs/API/types.ts

@@ -133,6 +133,7 @@ const WRITE_COMMANDS = {
  RENAME_POLICY_TAG: 'RenamePolicyTag',
  SET_WORKSPACE_REQUIRES_CATEGORY: 'SetWorkspaceRequiresCategory',
  DELETE_WORKSPACE_CATEGORIES: 'DeleteWorkspaceCategories',
+ SET_POLICY_TAGS_REQUIRED: 'SetPolicyTagsRequired',
  SET_POLICY_REQUIRES_TAG: 'SetPolicyRequiresTag',
  RENAME_POLICY_TAG_LIST: 'RenamePolicyTaglist',
  DELETE_POLICY_TAGS: 'DeletePolicyTags',
@@ -345,6 +346,7 @@ type WriteCommandParameters = {
  [WRITE_COMMANDS.SET_WORKSPACE_REQUIRES_CATEGORY]: Parameters.SetWorkspaceRequiresCategoryParams;
  [WRITE_COMMANDS.DELETE_WORKSPACE_CATEGORIES]: Parameters.DeleteWorkspaceCategoriesParams;
  [WRITE_COMMANDS.SET_POLICY_REQUIRES_TAG]: Parameters.SetPolicyRequiresTag;
+ [WRITE_COMMANDS.SET_POLICY_TAGS_REQUIRED]: Parameters.SetPolicyTagsRequired;
  [WRITE_COMMANDS.RENAME_POLICY_TAG_LIST]: Parameters.RenamePolicyTaglistParams;
  [WRITE_COMMANDS.CREATE_POLICY_TAG]: Parameters.CreatePolicyTagsParams;
  [WRITE_COMMANDS.RENAME_POLICY_TAG]: Parameters.RenamePolicyTagsParams;

src/libs/actions/Policy/Tag.ts

@@ -1,7 +1,7 @@
 import type {NullishDeep, OnyxCollection, OnyxEntry} from 'react-native-onyx';
 import Onyx from 'react-native-onyx';
 import * as API from '@libs/API';
-import type {EnablePolicyTagsParams, OpenPolicyTagsPageParams, RenamePolicyTaglistParams, RenamePolicyTagsParams, SetPolicyTagsEnabled} from '@libs/API/parameters';
+import type {EnablePolicyTagsParams, OpenPolicyTagsPageParams, RenamePolicyTaglistParams, RenamePolicyTagsParams, SetPolicyTagsEnabled, SetPolicyTagsRequired} from '@libs/API/parameters';
 import {READ_COMMANDS, WRITE_COMMANDS} from '@libs/API/types';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import getIsNarrowLayout from '@libs/getIsNarrowLayout';
@@ -161,6 +161,7 @@ function createPolicyTag(policyID: string, tagName: string) {
  tags: {
  [newTagName]: {
  errors: ErrorUtils.getMicroSecondOnyxError('workspace.tags.genericFailureMessage'),
+ pendingAction: null,
  },
  },
  },
@@ -329,8 +330,8 @@ function deletePolicyTags(policyID: string, tagsToDelete: string[]) {
  API.write(WRITE_COMMANDS.DELETE_POLICY_TAGS, parameters, onyxData);
 }
 
-function clearPolicyTagErrors(policyID: string, tagName: string) {
- const tagListName = Object.keys(allPolicyTags?.[`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`] ?? {})[0];
+function clearPolicyTagErrors(policyID: string, tagName: string, tagListIndex: number) {
+ const tagListName = Object.keys(allPolicyTags?.[`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`] ?? {})[tagListIndex];
  const tag = allPolicyTags?.[`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`]?.[tagListName].tags?.[tagName];
  if (!tag) {
  return;
@@ -359,10 +360,25 @@ function clearPolicyTagErrors(policyID: string, tagName: string) {
  });
 }
 
+function clearPolicyTagListError(policyID: string, tagListIndex: number, errorField: string) {
+ const policyTag = PolicyUtils.getTagLists(allPolicyTags?.[`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`] ?? {})?.[tagListIndex] ?? {};
+
+ if (!policyTag.name) {
+ return;
+ }
+
+ Onyx.merge(`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`, {
+ [policyTag.name]: {
+ errorFields: {
+ [errorField]: null,
+ },
+ },
+ });
+}
+
 function renamePolicyTag(policyID: string, policyTag: {oldName: string; newName: string}, tagListIndex: number) {
  const tagList = PolicyUtils.getTagLists(allPolicyTags?.[`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`] ?? {})?.[tagListIndex] ?? {};
  const tag = tagList.tags?.[policyTag.oldName];
-
  const oldTagName = policyTag.oldName;
  const newTagName = PolicyUtils.escapeTagName(policyTag.newName);
  const onyxData: OnyxData = {
@@ -611,15 +627,75 @@ function setPolicyRequiresTag(policyID: string, requiresTag: boolean) {
  API.write(WRITE_COMMANDS.SET_POLICY_REQUIRES_TAG, parameters, onyxData);
 }
 
+function setPolicyTagsRequired(policyID: string, requiresTag: boolean, tagListIndex: number) {
+ const policyTag = PolicyUtils.getTagLists(allPolicyTags?.[`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`] ?? {})?.[tagListIndex] ?? {};
+
+ if (!policyTag.name) {
+ return;
+ }
+
+ const onyxData: OnyxData = {
+ optimisticData: [
+ {
+ onyxMethod: Onyx.METHOD.MERGE,
+ key: `${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`,
+ value: {
+ [policyTag.name]: {
+ required: requiresTag,
+ pendingFields: {required: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE},
+ errorFields: {required: null},
+ },
+ },
+ },
+ ],
+ successData: [
+ {
+ onyxMethod: Onyx.METHOD.MERGE,
+ key: `${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`,
+ value: {
+ [policyTag.name]: {
+ pendingFields: {required: null},
+ },
+ },
+ },
+ ],
+ failureData: [
+ {
+ onyxMethod: Onyx.METHOD.MERGE,
+ key: `${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`,
+ value: {
+ [policyTag.name]: {
+ required: policyTag.required,
+ pendingFields: {required: null},
+ errorFields: {
+ required: ErrorUtils.getMicroSecondOnyxError('workspace.tags.genericFailureMessage'),
+ },
+ },
+ },
+ },
+ ],
+ };
+
+ const parameters: SetPolicyTagsRequired = {
+ policyID,
+ tagListIndex,
+ requireTagList: requiresTag,
+ };
+
+ API.write(WRITE_COMMANDS.SET_POLICY_TAGS_REQUIRED, parameters, onyxData);
+}
+
 export {
  openPolicyTagsPage,
  buildOptimisticPolicyRecentlyUsedTags,
  setPolicyRequiresTag,
+ setPolicyTagsRequired,
  renamePolicyTaglist,
  enablePolicyTags,
  createPolicyTag,
  renamePolicyTag,
  clearPolicyTagErrors,
+ clearPolicyTagListError,
  deletePolicyTags,
  setWorkspaceTagEnabled,
 };

src/pages/workspace/tags/TagSettingsPage.tsx

@@ -106,7 +106,7 @@ function TagSettingsPage({route, policyTags, navigation}: TagSettingsPageProps)
  errors={ErrorUtils.getLatestErrorMessageField(currentPolicyTag)}
  pendingAction={currentPolicyTag.pendingFields?.enabled}
  errorRowStyles={styles.mh5}
- onClose={() => Tag.clearPolicyTagErrors(route.params.policyID, route.params.tagName)}
+ onClose={() => Tag.clearPolicyTagErrors(route.params.policyID, route.params.tagName, route.params.orderWeight)}
  >
  <View style={[styles.mt2, styles.mh5]}>
  <View style={[styles.flexRow, styles.mb5, styles.mr2, styles.alignItemsCenter, styles.justifyContentBetween]}>

src/pages/workspace/tags/WorkspaceTagsPage.tsx

@@ -350,7 +350,7 @@ function WorkspaceTagsPage({route}: WorkspaceTagsPageProps) {
  customListHeader={getCustomListHeader()}
  shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()}
  listHeaderWrapperStyle={[styles.ph9, styles.pv3, styles.pb5]}
- onDismissError={(item) => Tag.clearPolicyTagErrors(policyID, item.value)}
+ onDismissError={(item) => !isMultiLevelTags && Tag.clearPolicyTagErrors(policyID, item.value, 0)}
  listHeaderContent={isSmallScreenWidth ? getHeaderText() : null}
  showScrollIndicator={false}
  />

src/pages/workspace/tags/WorkspaceViewTagsPage.tsx

@@ -27,6 +27,7 @@ import * as PolicyUtils from '@libs/PolicyUtils';
 import type {SettingsNavigatorParamList} from '@navigation/types';
 import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
+import ToggleSettingOptionRow from '@pages/workspace/workflows/ToggleSettingsOptionRow';
 import * as Tag from '@userActions/Policy/Tag';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -65,10 +66,9 @@ function WorkspaceViewTagsPage({route}: WorkspaceViewTagsProps) {
  setSelectedTags({});
  }, [isFocused]);
 
- const policyTagList = useMemo(() => PolicyUtils.getTagLists(policyTags).find((policyTag) => policyTag.name === currentTagListName), [currentTagListName, policyTags]);
  const tagList = useMemo<TagListItem[]>(
  () =>
- Object.values(policyTagList?.tags ?? {})
+ Object.values(currentPolicyTag?.tags ?? {})
  .sort((tagA, tagB) => localeCompare(tagA.name, tagB.name))
  .map((tag) => ({
  value: tag.name,
@@ -81,7 +81,7 @@ function WorkspaceViewTagsPage({route}: WorkspaceViewTagsProps) {
  isDisabled: tag.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
  rightElement: <ListItemRightCaretWithLabel labelText={tag.enabled ? translate('workspace.common.enabled') : translate('workspace.common.disabled')} />,
  })),
- [policyTagList, selectedTags, translate],
+ [currentPolicyTag, selectedTags, translate],
  );
 
  const tagListKeyedByName = useMemo(
@@ -234,6 +234,18 @@ function WorkspaceViewTagsPage({route}: WorkspaceViewTagsProps) {
  cancelText={translate('common.cancel')}
  danger
  />
+ <View style={[styles.pv4, styles.ph5]}>
+ <ToggleSettingOptionRow
+ title={translate('common.required')}
+ switchAccessibilityLabel={translate('common.required')}
+ isActive={!!currentPolicyTag?.required}
+ onToggle={(on) => Tag.setPolicyTagsRequired(policyID, on, route.params.orderWeight)}
+ pendingAction={currentPolicyTag.pendingFields?.required}
+ errors={currentPolicyTag?.errorFields?.required ?? undefined}
+ onCloseError={() => Tag.clearPolicyTagListError(policyID, route.params.orderWeight, 'required')}
+ disabled={!currentPolicyTag?.required && !Object.values(currentPolicyTag?.tags ?? {}).some((tag) => tag.enabled)}
+ />
+ </View>
  <OfflineWithFeedback
  errors={currentPolicyTag.errors}
  pendingAction={currentPolicyTag.pendingAction}
@@ -264,7 +276,9 @@ function WorkspaceViewTagsPage({route}: WorkspaceViewTagsProps) {
  customListHeader={getCustomListHeader()}
  shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()}
  listHeaderWrapperStyle={[styles.ph9, styles.pv3, styles.pb5]}
- onDismissError={(item) => Tag.clearPolicyTagErrors(policyID, item.value)}
+ onDismissError={(item) => {
+ Tag.clearPolicyTagErrors(policyID, item.value, route.params.orderWeight);
+ }}
  />
  )}
  </ScreenWrapper>

src/types/onyx/PolicyTag.ts

@@ -55,6 +55,9 @@ type PolicyTagList<T extends string = string> = Record<
 
  /** A list of errors keyed by microtime */
  errors?: OnyxCommon.Errors;
+
+ /** Error objects keyed by field name containing errors keyed by microtime */
+ errorFields?: OnyxCommon.ErrorFields;
  }>
 >;