From 0906ba736bda40feca963f79a3acf8d8ca5a695d Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <tymek+gpg@getunleash.ai>
Date: Tue, 14 Mar 2023 10:59:34 +0100
Subject: [PATCH] move stale-unstale selected to separate menu

---
 .../MoreActions/MoreActions.tsx               | 115 ++++++++++++++++++
 .../SelectionActionsBar.tsx                   |  12 +-
 2 files changed, 118 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/component/project/Project/ProjectFeatureToggles/SelectionActionsBar/MoreActions/MoreActions.tsx

diff --git a/frontend/src/component/project/Project/ProjectFeatureToggles/SelectionActionsBar/MoreActions/MoreActions.tsx b/frontend/src/component/project/Project/ProjectFeatureToggles/SelectionActionsBar/MoreActions/MoreActions.tsx
new file mode 100644
index 0000000000..86b3a62f93
--- /dev/null
+++ b/frontend/src/component/project/Project/ProjectFeatureToggles/SelectionActionsBar/MoreActions/MoreActions.tsx
@@ -0,0 +1,115 @@
+import { useState, VFC } from 'react';
+import {
+    IconButton,
+    ListItemIcon,
+    ListItemText,
+    MenuItem,
+    MenuList,
+    Popover,
+    Tooltip,
+    Typography,
+} from '@mui/material';
+import { PermissionHOC } from 'component/common/PermissionHOC/PermissionHOC';
+import { UPDATE_FEATURE } from 'component/providers/AccessProvider/permissions';
+import { MoreVert, WatchLater } from '@mui/icons-material';
+
+interface IMoreActionsProps {
+    projectId: string;
+}
+
+const menuId = 'selection-actions-menu';
+
+export const MoreActions: VFC<IMoreActionsProps> = ({ projectId }) => {
+    const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+    const open = Boolean(anchorEl);
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
+    return (
+        <>
+            <Tooltip title="Feature toggle actions" arrow describeChild>
+                <IconButton
+                    id={menuId}
+                    aria-controls={open ? menuId : undefined}
+                    aria-haspopup="true"
+                    aria-expanded={open ? 'true' : undefined}
+                    onClick={handleClick}
+                    type="button"
+                >
+                    <MoreVert />
+                </IconButton>
+            </Tooltip>
+            <Popover
+                id={`${menuId}-menu`}
+                anchorEl={anchorEl}
+                open={open}
+                onClose={handleClose}
+                transformOrigin={{ horizontal: 'right', vertical: 'top' }}
+                anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+                disableScrollLock={true}
+                PaperProps={{
+                    sx: theme => ({
+                        borderRadius: theme.shape.borderRadius,
+                        padding: theme.spacing(1, 1.5),
+                    }),
+                }}
+            >
+                <MenuList aria-labelledby={`${menuId}-menu`}>
+                    <PermissionHOC
+                        projectId={projectId}
+                        permission={UPDATE_FEATURE}
+                    >
+                        {({ hasAccess }) => (
+                            <>
+                                <MenuItem
+                                    // sx={defaultBorderRadius}
+                                    // onClick={() => {
+                                    //     handleClose();
+                                    //     onOpenStaleDialog({
+                                    //         featureId,
+                                    //         stale: stale === true,
+                                    //     });
+                                    // }}
+                                    disabled={!hasAccess}
+                                >
+                                    <ListItemIcon>
+                                        <WatchLater />
+                                    </ListItemIcon>
+                                    <ListItemText>
+                                        <Typography variant="body2">
+                                            Mark as stale
+                                        </Typography>
+                                    </ListItemText>
+                                </MenuItem>
+                                <MenuItem
+                                    // sx={defaultBorderRadius}
+                                    // onClick={() => {
+                                    //     handleClose();
+                                    //     onOpenStaleDialog({
+                                    //         featureId,
+                                    //         stale: stale === true,
+                                    //     });
+                                    // }}
+                                    disabled={!hasAccess}
+                                >
+                                    <ListItemIcon>
+                                        <WatchLater />
+                                    </ListItemIcon>
+                                    <ListItemText>
+                                        <Typography variant="body2">
+                                            Un-mark as stale
+                                        </Typography>
+                                    </ListItemText>
+                                </MenuItem>
+                            </>
+                        )}
+                    </PermissionHOC>
+                </MenuList>
+            </Popover>
+        </>
+    );
+};
diff --git a/frontend/src/component/project/Project/ProjectFeatureToggles/SelectionActionsBar/SelectionActionsBar.tsx b/frontend/src/component/project/Project/ProjectFeatureToggles/SelectionActionsBar/SelectionActionsBar.tsx
index 0d496505cb..afd0494cf3 100644
--- a/frontend/src/component/project/Project/ProjectFeatureToggles/SelectionActionsBar/SelectionActionsBar.tsx
+++ b/frontend/src/component/project/Project/ProjectFeatureToggles/SelectionActionsBar/SelectionActionsBar.tsx
@@ -1,11 +1,12 @@
 import { useMemo, useState, VFC } from 'react';
 import { Box, Button, Paper, styled, Typography } from '@mui/material';
-import { FileDownload, Label, WatchLater } from '@mui/icons-material';
+import { FileDownload, Label, MoreVert, WatchLater } from '@mui/icons-material';
 import type { FeatureSchema } from 'openapi';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { ExportDialog } from 'component/feature/FeatureToggleList/ExportDialog';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { ArchiveButton } from './ArchiveButton/ArchiveButton';
+import { MoreActions } from './MoreActions/MoreActions';
 
 interface ISelectionActionsBarProps {
     selectedIds: string[];
@@ -75,14 +76,6 @@ export const SelectionActionsBar: VFC<ISelectionActionsBarProps> = ({
                     &ensp;selected
                 </StyledText>
                 <ArchiveButton projectId={projectId} features={selectedIds} />
-                <Button
-                    disabled
-                    startIcon={<WatchLater />}
-                    variant="outlined"
-                    size="small"
-                >
-                    Mark as stale
-                </Button>
                 <Button
                     startIcon={<FileDownload />}
                     variant="outlined"
@@ -99,6 +92,7 @@ export const SelectionActionsBar: VFC<ISelectionActionsBarProps> = ({
                 >
                     Tags
                 </Button>
+                <MoreActions projectId={projectId} />
             </StyledBar>
             <ConditionallyRender
                 condition={Boolean(uiConfig?.flags?.featuresExportImport)}