feat: Add temporary focus to enabled option in workspace initial page

src/components/MenuItem.tsx

@@ -148,6 +148,12 @@ type MenuItemBaseProps = {
     /** Whether item is focused or active */
     focused?: boolean;
 
+    /** Temporarily focus the item indicating an action (like setting enable) occured */
+    shouldFocusTemporarily?: boolean;
+
+    /** The duration to focus the item temporarily */
+    temporaryFocusDuration?: number;
+
     /** Should we disable this menu item? */
     disabled?: boolean;
 
@@ -276,6 +282,8 @@ function MenuItem(
         success = false,
         focused = false,
         disabled = false,
+        shouldFocusTemporarily = false,
+        temporaryFocusDuration = 3000,
         title,
         subtitle,
         shouldShowBasicTitle,
@@ -315,7 +323,9 @@ function MenuItem(
     const {isSmallScreenWidth} = useWindowDimensions();
     const [html, setHtml] = useState('');
     const titleRef = useRef('');
+    const tempFocusTimeoutRef = useRef<NodeJS.Timeout>();
     const {isExecuting, singleExecution, waitForNavigate} = useContext(MenuItemGroupContext) ?? {};
+    const [temporaryilyFocused, setTemporaryilyFocused] = useState(false);
 
     const isDeleted = style && Array.isArray(style) ? style.includes(styles.offlineFeedback.deleted) : false;
     const descriptionVerticalMargin = shouldShowDescriptionOnTop ? styles.mb1 : styles.mt1;
@@ -342,6 +352,25 @@ function MenuItem(
         isDeleted ? styles.offlineFeedback.deleted : {},
     ]);
 
+    useEffect(() => {
+        if (!shouldFocusTemporarily) {
+            return;
+        }
+        setTemporaryilyFocused(true);
+        tempFocusTimeoutRef.current = setTimeout(() => setTemporaryilyFocused(false), temporaryFocusDuration);
+    }, [shouldFocusTemporarily, temporaryFocusDuration]);
+
+    useEffect(
+        () => () => {
+            if (!tempFocusTimeoutRef.current) {
+                return;
+            }
+
+            clearTimeout(tempFocusTimeoutRef.current);
+        },
+        [],
+    );
+
     useEffect(() => {
         if (!title || (titleRef.current.length && titleRef.current === title) || !shouldParseTitle) {
             return;
@@ -417,7 +446,7 @@ function MenuItem(
                             errorText ? styles.pb5 : {},
                             combinedStyle,
                             !interactive && styles.cursorDefault,
-                            StyleUtils.getButtonBackgroundColorStyle(getButtonState(focused || isHovered, pressed, success, disabled, interactive), true),
+                            StyleUtils.getButtonBackgroundColorStyle(getButtonState(temporaryilyFocused || focused || isHovered, pressed, success, disabled, interactive), true),
                             !focused && (isHovered || pressed) && hoverAndPressStyle,
                             ...(Array.isArray(wrapperStyle) ? wrapperStyle : [wrapperStyle]),
                             shouldGreyOutWhenDisabled && disabled && styles.buttonOpacityDisabled,

src/pages/workspace/WorkspaceInitialPage.tsx

@@ -226,6 +226,9 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, policyMembers, r
 
     const prevPolicy = usePrevious(policy);
 
+    const prevProtectedMenuItems = usePrevious(protectedCollectPolicyMenuItems);
+    const enabledItems = protectedCollectPolicyMenuItems.filter((curItem) => !prevProtectedMenuItems.some((prevItem) => curItem.translationKey === prevItem.translationKey));
+
     // eslint-disable-next-line rulesdir/no-negated-variables
     const shouldShowNotFoundPage =
         isEmptyObject(policy) ||
@@ -287,6 +290,7 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, policyMembers, r
                                     brickRoadIndicator={item.brickRoadIndicator}
                                     wrapperStyle={styles.sectionMenuItem}
                                     focused={!!(item.routeName && activeRoute?.startsWith(item.routeName))}
+                                    shouldFocusTemporarily={enabledItems.length === 1 && enabledItems[0].translationKey === item.translationKey}
                                     hoverAndPressStyle={styles.hoveredComponentBG}
                                     isPaneMenu
                                 />