From 24320ab2d2975e53cc1cf88a89713f92bd16b4b2 Mon Sep 17 00:00:00 2001 From: daledah Date: Mon, 8 Dec 2025 12:52:34 +0700 Subject: [PATCH 1/7] Add GL code to tag and category table --- .../categories/WorkspaceCategoriesPage.tsx | 59 ++++++++++++++++++- 1 file changed, 56 insertions(+), 3 deletions(-) diff --git a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx index 688b124be405..2cc83058dad7 100644 --- a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx +++ b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx @@ -37,6 +37,7 @@ import usePolicyData from '@hooks/usePolicyData'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useSearchBackPress from '@hooks/useSearchBackPress'; import useSearchResults from '@hooks/useSearchResults'; +import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; import {isConnectionInProgress, isConnectionUnverified} from '@libs/actions/connections'; import {turnOffMobileSelectionMode} from '@libs/actions/MobileSelectionMode'; @@ -46,11 +47,12 @@ import Navigation from '@libs/Navigation/Navigation'; import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {WorkspaceSplitNavigatorParamList} from '@libs/Navigation/types'; import {isDisablingOrDeletingLastEnabledCategory} from '@libs/OptionsListUtils'; -import {getConnectedIntegration, getCurrentConnectionName, hasAccountingConnections, shouldShowSyncError} from '@libs/PolicyUtils'; +import {getConnectedIntegration, getCurrentConnectionName, hasAccountingConnections, isControlPolicy, shouldShowSyncError} from '@libs/PolicyUtils'; import tokenizedSearch from '@libs/tokenizedSearch'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; import {close} from '@userActions/Modal'; import {clearCategoryErrors, deleteWorkspaceCategories, downloadCategoriesCSV, openPolicyCategoriesPage, setWorkspaceCategoryEnabled} from '@userActions/Policy/Category'; +import variables from '@styles/variables'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; @@ -71,6 +73,7 @@ function WorkspaceCategoriesPage({route}: WorkspaceCategoriesPageProps) { // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout(); const styles = useThemeStyles(); + const StyleUtils = useStyleUtils(); const {translate, localeCompare} = useLocalize(); const [isOfflineModalVisible, setIsOfflineModalVisible] = useState(false); const [isDownloadFailureModalVisible, setIsDownloadFailureModalVisible] = useState(false); @@ -92,6 +95,7 @@ function WorkspaceCategoriesPage({route}: WorkspaceCategoriesPageProps) { const [selectedCategories, setSelectedCategories] = useState([]); const canSelectMultiple = isSmallScreenWidth ? isMobileSelectionModeEnabled : true; + const isControlPolicyWithWideLayout = !shouldUseNarrowLayout && isControlPolicy(policy); const icons = useMemoizedLazyExpensifyIcons(['Download', 'Gear', 'Table'] as const); const illustrations = useMemoizedLazyIllustrations(['FolderOpen'] as const); @@ -190,7 +194,33 @@ function WorkspaceCategoriesPage({route}: WorkspaceCategoriesPageProps) { isDisabled, pendingAction: value.pendingAction, errors: value.errors ?? undefined, - rightElement: ( + rightElement: isControlPolicyWithWideLayout ? ( + <> + + + {value['GL Code']} + + + + { + if (isDisablingOrDeletingLastEnabledCategory(policy, policyCategories, [value])) { + setIsCannotDeleteOrDisableLastCategoryModalVisible(true); + return; + } + updateWorkspaceCategoryEnabled(newValue, value.name); + }} + showLockIcon={isDisablingOrDeletingLastEnabledCategory(policy, policyCategories, [value])} + /> + + + ) : ( { const results = tokenizedSearch([categoryOption], searchInput, (option) => [option.text ?? '', option.alternateText ?? '']); @@ -247,6 +277,29 @@ function WorkspaceCategoriesPage({route}: WorkspaceCategoriesPageProps) { if (filteredCategoryList.length === 0) { return null; } + + // Show GL Code column only on wide screens for control policies + if (isControlPolicyWithWideLayout) { + const header = ( + + + {translate('common.name')} + + + {translate('workspace.categories.glCode')} + + + {translate('common.enabled')} + + + ); + + if (canSelectMultiple) { + return header; + } + return {header}; + } + return ( Date: Tue, 9 Dec 2025 17:24:42 +0700 Subject: [PATCH 2/7] Add GL code to tag table --- .../categories/WorkspaceCategoriesPage.tsx | 4 +- .../workspace/tags/WorkspaceTagsPage.tsx | 74 ++++++++++++++++++- 2 files changed, 74 insertions(+), 4 deletions(-) diff --git a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx index 2cc83058dad7..5cd8c1dbde54 100644 --- a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx +++ b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx @@ -50,9 +50,9 @@ import {isDisablingOrDeletingLastEnabledCategory} from '@libs/OptionsListUtils'; import {getConnectedIntegration, getCurrentConnectionName, hasAccountingConnections, isControlPolicy, shouldShowSyncError} from '@libs/PolicyUtils'; import tokenizedSearch from '@libs/tokenizedSearch'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; +import variables from '@styles/variables'; import {close} from '@userActions/Modal'; import {clearCategoryErrors, deleteWorkspaceCategories, downloadCategoriesCSV, openPolicyCategoriesPage, setWorkspaceCategoryEnabled} from '@userActions/Policy/Category'; -import variables from '@styles/variables'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; @@ -199,7 +199,7 @@ function WorkspaceCategoriesPage({route}: WorkspaceCategoriesPageProps) { {value['GL Code']} diff --git a/src/pages/workspace/tags/WorkspaceTagsPage.tsx b/src/pages/workspace/tags/WorkspaceTagsPage.tsx index 8f329656899f..b13572ec7b9d 100644 --- a/src/pages/workspace/tags/WorkspaceTagsPage.tsx +++ b/src/pages/workspace/tags/WorkspaceTagsPage.tsx @@ -32,6 +32,7 @@ import usePolicyData from '@hooks/usePolicyData'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useSearchBackPress from '@hooks/useSearchBackPress'; import useSearchResults from '@hooks/useSearchResults'; +import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; import {isConnectionInProgress, isConnectionUnverified} from '@libs/actions/connections'; import {turnOffMobileSelectionMode} from '@libs/actions/MobileSelectionMode'; @@ -57,11 +58,13 @@ import { getTagLists, hasAccountingConnections as hasAccountingConnectionsPolicyUtils, hasDependentTags as hasDependentTagsPolicyUtils, + isControlPolicy, isMultiLevelTags as isMultiLevelTagsPolicyUtils, shouldShowSyncError, } from '@libs/PolicyUtils'; import tokenizedSearch from '@libs/tokenizedSearch'; import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; +import variables from '@styles/variables'; import {close} from '@userActions/Modal'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -80,6 +83,7 @@ function WorkspaceTagsPage({route}: WorkspaceTagsPageProps) { // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout(); const styles = useThemeStyles(); + const StyleUtils = useStyleUtils(); const {translate, localeCompare} = useLocalize(); const [isDownloadFailureModalVisible, setIsDownloadFailureModalVisible] = useState(false); const [isDeleteTagsConfirmModalVisible, setIsDeleteTagsConfirmModalVisible] = useState(false); @@ -105,6 +109,7 @@ function WorkspaceTagsPage({route}: WorkspaceTagsPageProps) { ); const canSelectMultiple = !hasDependentTags && (shouldUseNarrowLayout ? isMobileSelectionModeEnabled : true); + const isControlPolicyWithWideLayout = !shouldUseNarrowLayout && isControlPolicy(policy); const fetchTags = useCallback(() => { openPolicyTagsPage(policyID); }, [policyID]); @@ -264,7 +269,33 @@ function WorkspaceTagsPage({route}: WorkspaceTagsPageProps) { errors: tag.errors ?? undefined, enabled: tag.enabled, isDisabled: tag.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE, - rightElement: ( + rightElement: isControlPolicyWithWideLayout ? ( + <> + + + {tag['GL Code']} + + + + { + if (isDisablingOrDeletingLastEnabledTag(policyTagLists.at(0), [tag])) { + setIsCannotDeleteOrDisableLastTagModalVisible(true); + return; + } + updateWorkspaceTagEnabled(newValue, tag.name); + }} + showLockIcon={isDisablingOrDeletingLastEnabledTag(policyTagLists.at(0), [tag])} + /> + + + ) : ( ), })); - }, [isMultiLevelTags, policyTagLists, hasDependentTags, translate, policy, policyTags, updateWorkspaceRequiresTag, updateWorkspaceTagEnabled]); + }, [ + isMultiLevelTags, + policyTagLists, + hasDependentTags, + translate, + policy, + policyTags, + updateWorkspaceRequiresTag, + updateWorkspaceTagEnabled, + isControlPolicyWithWideLayout, + styles.flex1, + styles.alignSelfStart, + StyleUtils, + ]); const filterTag = useCallback((tag: TagListItem, searchInput: string) => { const results = tokenizedSearch([tag], searchInput, (option) => [option.text ?? '', option.value ?? '']); @@ -323,6 +367,10 @@ function WorkspaceTagsPage({route}: WorkspaceTagsPageProps) { }; const getCustomListHeader = () => { + if (filteredTagList.length === 0) { + return null; + } + if (hasDependentTags) { return ( + + {translate('common.name')} + + + {translate('workspace.tags.glCode')} + + + {translate('common.enabled')} + + + ); + + if (canSelectMultiple) { + return header; + } + return {header}; + } + return ( Date: Tue, 9 Dec 2025 17:32:08 +0700 Subject: [PATCH 3/7] remove useless code --- src/pages/workspace/tags/WorkspaceTagsPage.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/pages/workspace/tags/WorkspaceTagsPage.tsx b/src/pages/workspace/tags/WorkspaceTagsPage.tsx index b13572ec7b9d..c276a5f3da6d 100644 --- a/src/pages/workspace/tags/WorkspaceTagsPage.tsx +++ b/src/pages/workspace/tags/WorkspaceTagsPage.tsx @@ -367,10 +367,6 @@ function WorkspaceTagsPage({route}: WorkspaceTagsPageProps) { }; const getCustomListHeader = () => { - if (filteredTagList.length === 0) { - return null; - } - if (hasDependentTags) { return ( Date: Fri, 12 Dec 2025 16:42:09 +0700 Subject: [PATCH 4/7] fix comments --- .../categories/WorkspaceCategoriesPage.tsx | 39 ++++++++--------- .../workspace/tags/WorkspaceTagsPage.tsx | 42 +++++++++---------- 2 files changed, 41 insertions(+), 40 deletions(-) diff --git a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx index 5cd8c1dbde54..acc41f45975d 100644 --- a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx +++ b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx @@ -179,6 +179,10 @@ function WorkspaceCategoriesPage({route}: WorkspaceCategoriesPageProps) { ], ); + const glCodeContainerStyle = useMemo(() => [styles.flex1], [styles.flex1]); + const glCodeTextStyle = useMemo(() => [styles.alignSelfStart], [styles.alignSelfStart]); + const switchContainerStyle = useMemo(() => [StyleUtils.getMinimumWidth(variables.w72)], [StyleUtils]); + const categoryList = useMemo(() => { const categories = Object.values(policyCategories ?? {}); return categories.reduce((acc, value) => { @@ -196,15 +200,15 @@ function WorkspaceCategoriesPage({route}: WorkspaceCategoriesPageProps) { errors: value.errors ?? undefined, rightElement: isControlPolicyWithWideLayout ? ( <> - + {value['GL Code']} - + { const results = tokenizedSearch([categoryOption], searchInput, (option) => [option.text ?? '', option.alternateText ?? '']); @@ -280,24 +284,21 @@ function WorkspaceCategoriesPage({route}: WorkspaceCategoriesPageProps) { // Show GL Code column only on wide screens for control policies if (isControlPolicyWithWideLayout) { - const header = ( - - - {translate('common.name')} - - - {translate('workspace.categories.glCode')} - - - {translate('common.enabled')} + return ( + + + + {translate('common.name')} + + + {translate('workspace.categories.glCode')} + + + {translate('common.enabled')} + ); - - if (canSelectMultiple) { - return header; - } - return {header}; } return ( diff --git a/src/pages/workspace/tags/WorkspaceTagsPage.tsx b/src/pages/workspace/tags/WorkspaceTagsPage.tsx index c276a5f3da6d..20c77e96551b 100644 --- a/src/pages/workspace/tags/WorkspaceTagsPage.tsx +++ b/src/pages/workspace/tags/WorkspaceTagsPage.tsx @@ -218,6 +218,9 @@ function WorkspaceTagsPage({route}: WorkspaceTagsPageProps) { }, [policyData], ); + const glCodeContainerStyle = useMemo(() => [styles.flex1], [styles.flex1]); + const glCodeTextStyle = useMemo(() => [styles.alignSelfStart], [styles.alignSelfStart]); + const switchContainerStyle = useMemo(() => [StyleUtils.getMinimumWidth(variables.w72)], [StyleUtils]); const tagList = useMemo(() => { if (isMultiLevelTags) { @@ -271,15 +274,15 @@ function WorkspaceTagsPage({route}: WorkspaceTagsPageProps) { isDisabled: tag.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE, rightElement: isControlPolicyWithWideLayout ? ( <> - + {tag['GL Code']} - + { @@ -380,24 +383,21 @@ function WorkspaceTagsPage({route}: WorkspaceTagsPageProps) { // Show GL Code column only on wide screens for control policies if (isControlPolicyWithWideLayout && !isMultiLevelTags) { - const header = ( - - - {translate('common.name')} - - - {translate('workspace.tags.glCode')} - - - {translate('common.enabled')} + return ( + + + + {translate('common.name')} + + + {translate('workspace.tags.glCode')} + + + {translate('common.enabled')} + ); - - if (canSelectMultiple) { - return header; - } - return {header}; } return ( From 521766feb4d26b12bfa198bc9d56969458f9cab1 Mon Sep 17 00:00:00 2001 From: daledah Date: Fri, 12 Dec 2025 17:48:42 +0700 Subject: [PATCH 5/7] fix header styles --- .../categories/WorkspaceCategoriesPage.tsx | 20 +++++++++---------- .../workspace/tags/WorkspaceTagsPage.tsx | 20 +++++++++---------- 2 files changed, 18 insertions(+), 22 deletions(-) diff --git a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx index acc41f45975d..08235542c640 100644 --- a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx +++ b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx @@ -285,17 +285,15 @@ function WorkspaceCategoriesPage({route}: WorkspaceCategoriesPageProps) { // Show GL Code column only on wide screens for control policies if (isControlPolicyWithWideLayout) { return ( - - - - {translate('common.name')} - - - {translate('workspace.categories.glCode')} - - - {translate('common.enabled')} - + + + {translate('common.name')} + + + {translate('workspace.categories.glCode')} + + + {translate('common.enabled')} ); diff --git a/src/pages/workspace/tags/WorkspaceTagsPage.tsx b/src/pages/workspace/tags/WorkspaceTagsPage.tsx index 20c77e96551b..34c804146e13 100644 --- a/src/pages/workspace/tags/WorkspaceTagsPage.tsx +++ b/src/pages/workspace/tags/WorkspaceTagsPage.tsx @@ -384,17 +384,15 @@ function WorkspaceTagsPage({route}: WorkspaceTagsPageProps) { // Show GL Code column only on wide screens for control policies if (isControlPolicyWithWideLayout && !isMultiLevelTags) { return ( - - - - {translate('common.name')} - - - {translate('workspace.tags.glCode')} - - - {translate('common.enabled')} - + + + {translate('common.name')} + + + {translate('workspace.tags.glCode')} + + + {translate('common.enabled')} ); From 448b31bffe664fd890f97cacdd9d9c65b9fda0f6 Mon Sep 17 00:00:00 2001 From: daledah Date: Mon, 15 Dec 2025 10:52:04 +0700 Subject: [PATCH 6/7] move swich component to useMemo --- .../categories/WorkspaceCategoriesPage.tsx | 52 ++++++++----------- .../workspace/tags/WorkspaceTagsPage.tsx | 51 ++++++++---------- 2 files changed, 45 insertions(+), 58 deletions(-) diff --git a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx index 08235542c640..3b2dbe994ebc 100644 --- a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx +++ b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx @@ -57,6 +57,7 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import SCREENS from '@src/SCREENS'; +import {PolicyCategory} from '@src/types/onyx'; import type DeepValueOf from '@src/types/utils/DeepValueOf'; type PolicyOption = ListItem & { @@ -183,6 +184,25 @@ function WorkspaceCategoriesPage({route}: WorkspaceCategoriesPageProps) { const glCodeTextStyle = useMemo(() => [styles.alignSelfStart], [styles.alignSelfStart]); const switchContainerStyle = useMemo(() => [StyleUtils.getMinimumWidth(variables.w72)], [StyleUtils]); + const switchComponent = useMemo( + () => (value: PolicyCategory) => ( + { + if (isDisablingOrDeletingLastEnabledCategory(policy, policyCategories, [value])) { + setIsCannotDeleteOrDisableLastCategoryModalVisible(true); + return; + } + updateWorkspaceCategoryEnabled(newValue, value.name); + }} + showLockIcon={isDisablingOrDeletingLastEnabledCategory(policy, policyCategories, [value])} + /> + ), + [policy, policyCategories, translate, updateWorkspaceCategoryEnabled, setIsCannotDeleteOrDisableLastCategoryModalVisible], + ); + const categoryList = useMemo(() => { const categories = Object.values(policyCategories ?? {}); return categories.reduce((acc, value) => { @@ -208,42 +228,16 @@ function WorkspaceCategoriesPage({route}: WorkspaceCategoriesPageProps) { {value['GL Code']} - - { - if (isDisablingOrDeletingLastEnabledCategory(policy, policyCategories, [value])) { - setIsCannotDeleteOrDisableLastCategoryModalVisible(true); - return; - } - updateWorkspaceCategoryEnabled(newValue, value.name); - }} - showLockIcon={isDisablingOrDeletingLastEnabledCategory(policy, policyCategories, [value])} - /> - + {switchComponent(value)} ) : ( - { - if (isDisablingOrDeletingLastEnabledCategory(policy, policyCategories, [value])) { - setIsCannotDeleteOrDisableLastCategoryModalVisible(true); - return; - } - updateWorkspaceCategoryEnabled(newValue, value.name); - }} - showLockIcon={isDisablingOrDeletingLastEnabledCategory(policy, policyCategories, [value])} - /> + <>{switchComponent(value)} ), }); return acc; }, []); - }, [policyCategories, isOffline, translate, updateWorkspaceCategoryEnabled, policy, isControlPolicyWithWideLayout, glCodeContainerStyle, glCodeTextStyle, switchContainerStyle]); + }, [policyCategories, isOffline, isControlPolicyWithWideLayout, glCodeContainerStyle, glCodeTextStyle, switchContainerStyle, switchComponent]); const filterCategory = useCallback((categoryOption: PolicyOption, searchInput: string) => { const results = tokenizedSearch([categoryOption], searchInput, (option) => [option.text ?? '', option.alternateText ?? '']); diff --git a/src/pages/workspace/tags/WorkspaceTagsPage.tsx b/src/pages/workspace/tags/WorkspaceTagsPage.tsx index 34c804146e13..341d541df632 100644 --- a/src/pages/workspace/tags/WorkspaceTagsPage.tsx +++ b/src/pages/workspace/tags/WorkspaceTagsPage.tsx @@ -222,6 +222,25 @@ function WorkspaceTagsPage({route}: WorkspaceTagsPageProps) { const glCodeTextStyle = useMemo(() => [styles.alignSelfStart], [styles.alignSelfStart]); const switchContainerStyle = useMemo(() => [StyleUtils.getMinimumWidth(variables.w72)], [StyleUtils]); + const switchComponent = useMemo( + () => (value: PolicyTag) => ( + { + if (isDisablingOrDeletingLastEnabledTag(policyTagLists.at(0), [value])) { + setIsCannotDeleteOrDisableLastTagModalVisible(true); + return; + } + updateWorkspaceTagEnabled(newValue, value.name); + }} + showLockIcon={isDisablingOrDeletingLastEnabledTag(policyTagLists.at(0), [value])} + /> + ), + [policyTagLists, translate, updateWorkspaceTagEnabled, setIsCannotDeleteOrDisableLastTagModalVisible], + ); + const tagList = useMemo(() => { if (isMultiLevelTags) { return policyTagLists.map((policyTagList) => { @@ -282,36 +301,10 @@ function WorkspaceTagsPage({route}: WorkspaceTagsPageProps) { {tag['GL Code']} - - { - if (isDisablingOrDeletingLastEnabledTag(policyTagLists.at(0), [tag])) { - setIsCannotDeleteOrDisableLastTagModalVisible(true); - return; - } - updateWorkspaceTagEnabled(newValue, tag.name); - }} - showLockIcon={isDisablingOrDeletingLastEnabledTag(policyTagLists.at(0), [tag])} - /> - + {switchComponent(tag)} ) : ( - { - if (isDisablingOrDeletingLastEnabledTag(policyTagLists.at(0), [tag])) { - setIsCannotDeleteOrDisableLastTagModalVisible(true); - return; - } - updateWorkspaceTagEnabled(newValue, tag.name); - }} - showLockIcon={isDisablingOrDeletingLastEnabledTag(policyTagLists.at(0), [tag])} - /> + <>{switchComponent(tag)} ), })); }, [ @@ -322,11 +315,11 @@ function WorkspaceTagsPage({route}: WorkspaceTagsPageProps) { policy, policyTags, updateWorkspaceRequiresTag, - updateWorkspaceTagEnabled, isControlPolicyWithWideLayout, glCodeContainerStyle, glCodeTextStyle, switchContainerStyle, + switchComponent, ]); const filterTag = useCallback((tag: TagListItem, searchInput: string) => { From 4f517289de45fed4938239edcfe6e3b0cc66fa28 Mon Sep 17 00:00:00 2001 From: daledah Date: Mon, 15 Dec 2025 11:06:14 +0700 Subject: [PATCH 7/7] Revert "move swich component to useMemo" This reverts commit 448b31bffe664fd890f97cacdd9d9c65b9fda0f6. --- .../categories/WorkspaceCategoriesPage.tsx | 52 +++++++++++-------- .../workspace/tags/WorkspaceTagsPage.tsx | 51 ++++++++++-------- 2 files changed, 58 insertions(+), 45 deletions(-) diff --git a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx index 3b2dbe994ebc..08235542c640 100644 --- a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx +++ b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx @@ -57,7 +57,6 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import SCREENS from '@src/SCREENS'; -import {PolicyCategory} from '@src/types/onyx'; import type DeepValueOf from '@src/types/utils/DeepValueOf'; type PolicyOption = ListItem & { @@ -184,25 +183,6 @@ function WorkspaceCategoriesPage({route}: WorkspaceCategoriesPageProps) { const glCodeTextStyle = useMemo(() => [styles.alignSelfStart], [styles.alignSelfStart]); const switchContainerStyle = useMemo(() => [StyleUtils.getMinimumWidth(variables.w72)], [StyleUtils]); - const switchComponent = useMemo( - () => (value: PolicyCategory) => ( - { - if (isDisablingOrDeletingLastEnabledCategory(policy, policyCategories, [value])) { - setIsCannotDeleteOrDisableLastCategoryModalVisible(true); - return; - } - updateWorkspaceCategoryEnabled(newValue, value.name); - }} - showLockIcon={isDisablingOrDeletingLastEnabledCategory(policy, policyCategories, [value])} - /> - ), - [policy, policyCategories, translate, updateWorkspaceCategoryEnabled, setIsCannotDeleteOrDisableLastCategoryModalVisible], - ); - const categoryList = useMemo(() => { const categories = Object.values(policyCategories ?? {}); return categories.reduce((acc, value) => { @@ -228,16 +208,42 @@ function WorkspaceCategoriesPage({route}: WorkspaceCategoriesPageProps) { {value['GL Code']} - {switchComponent(value)} + + { + if (isDisablingOrDeletingLastEnabledCategory(policy, policyCategories, [value])) { + setIsCannotDeleteOrDisableLastCategoryModalVisible(true); + return; + } + updateWorkspaceCategoryEnabled(newValue, value.name); + }} + showLockIcon={isDisablingOrDeletingLastEnabledCategory(policy, policyCategories, [value])} + /> + ) : ( - <>{switchComponent(value)} + { + if (isDisablingOrDeletingLastEnabledCategory(policy, policyCategories, [value])) { + setIsCannotDeleteOrDisableLastCategoryModalVisible(true); + return; + } + updateWorkspaceCategoryEnabled(newValue, value.name); + }} + showLockIcon={isDisablingOrDeletingLastEnabledCategory(policy, policyCategories, [value])} + /> ), }); return acc; }, []); - }, [policyCategories, isOffline, isControlPolicyWithWideLayout, glCodeContainerStyle, glCodeTextStyle, switchContainerStyle, switchComponent]); + }, [policyCategories, isOffline, translate, updateWorkspaceCategoryEnabled, policy, isControlPolicyWithWideLayout, glCodeContainerStyle, glCodeTextStyle, switchContainerStyle]); const filterCategory = useCallback((categoryOption: PolicyOption, searchInput: string) => { const results = tokenizedSearch([categoryOption], searchInput, (option) => [option.text ?? '', option.alternateText ?? '']); diff --git a/src/pages/workspace/tags/WorkspaceTagsPage.tsx b/src/pages/workspace/tags/WorkspaceTagsPage.tsx index 341d541df632..34c804146e13 100644 --- a/src/pages/workspace/tags/WorkspaceTagsPage.tsx +++ b/src/pages/workspace/tags/WorkspaceTagsPage.tsx @@ -222,25 +222,6 @@ function WorkspaceTagsPage({route}: WorkspaceTagsPageProps) { const glCodeTextStyle = useMemo(() => [styles.alignSelfStart], [styles.alignSelfStart]); const switchContainerStyle = useMemo(() => [StyleUtils.getMinimumWidth(variables.w72)], [StyleUtils]); - const switchComponent = useMemo( - () => (value: PolicyTag) => ( - { - if (isDisablingOrDeletingLastEnabledTag(policyTagLists.at(0), [value])) { - setIsCannotDeleteOrDisableLastTagModalVisible(true); - return; - } - updateWorkspaceTagEnabled(newValue, value.name); - }} - showLockIcon={isDisablingOrDeletingLastEnabledTag(policyTagLists.at(0), [value])} - /> - ), - [policyTagLists, translate, updateWorkspaceTagEnabled, setIsCannotDeleteOrDisableLastTagModalVisible], - ); - const tagList = useMemo(() => { if (isMultiLevelTags) { return policyTagLists.map((policyTagList) => { @@ -301,10 +282,36 @@ function WorkspaceTagsPage({route}: WorkspaceTagsPageProps) { {tag['GL Code']} - {switchComponent(tag)} + + { + if (isDisablingOrDeletingLastEnabledTag(policyTagLists.at(0), [tag])) { + setIsCannotDeleteOrDisableLastTagModalVisible(true); + return; + } + updateWorkspaceTagEnabled(newValue, tag.name); + }} + showLockIcon={isDisablingOrDeletingLastEnabledTag(policyTagLists.at(0), [tag])} + /> + ) : ( - <>{switchComponent(tag)} + { + if (isDisablingOrDeletingLastEnabledTag(policyTagLists.at(0), [tag])) { + setIsCannotDeleteOrDisableLastTagModalVisible(true); + return; + } + updateWorkspaceTagEnabled(newValue, tag.name); + }} + showLockIcon={isDisablingOrDeletingLastEnabledTag(policyTagLists.at(0), [tag])} + /> ), })); }, [ @@ -315,11 +322,11 @@ function WorkspaceTagsPage({route}: WorkspaceTagsPageProps) { policy, policyTags, updateWorkspaceRequiresTag, + updateWorkspaceTagEnabled, isControlPolicyWithWideLayout, glCodeContainerStyle, glCodeTextStyle, switchContainerStyle, - switchComponent, ]); const filterTag = useCallback((tag: TagListItem, searchInput: string) => {