mirror of
https://github.com/Unleash/unleash.git
synced 2025-09-10 17:53:36 +02:00
move stale-unstale selected to separate menu
This commit is contained in:
parent
a8f66dc772
commit
0906ba736b
@ -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>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
@ -1,11 +1,12 @@
|
|||||||
import { useMemo, useState, VFC } from 'react';
|
import { useMemo, useState, VFC } from 'react';
|
||||||
import { Box, Button, Paper, styled, Typography } from '@mui/material';
|
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 type { FeatureSchema } from 'openapi';
|
||||||
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
|
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
|
||||||
import { ExportDialog } from 'component/feature/FeatureToggleList/ExportDialog';
|
import { ExportDialog } from 'component/feature/FeatureToggleList/ExportDialog';
|
||||||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
||||||
import { ArchiveButton } from './ArchiveButton/ArchiveButton';
|
import { ArchiveButton } from './ArchiveButton/ArchiveButton';
|
||||||
|
import { MoreActions } from './MoreActions/MoreActions';
|
||||||
|
|
||||||
interface ISelectionActionsBarProps {
|
interface ISelectionActionsBarProps {
|
||||||
selectedIds: string[];
|
selectedIds: string[];
|
||||||
@ -75,14 +76,6 @@ export const SelectionActionsBar: VFC<ISelectionActionsBarProps> = ({
|
|||||||
 selected
|
 selected
|
||||||
</StyledText>
|
</StyledText>
|
||||||
<ArchiveButton projectId={projectId} features={selectedIds} />
|
<ArchiveButton projectId={projectId} features={selectedIds} />
|
||||||
<Button
|
|
||||||
disabled
|
|
||||||
startIcon={<WatchLater />}
|
|
||||||
variant="outlined"
|
|
||||||
size="small"
|
|
||||||
>
|
|
||||||
Mark as stale
|
|
||||||
</Button>
|
|
||||||
<Button
|
<Button
|
||||||
startIcon={<FileDownload />}
|
startIcon={<FileDownload />}
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
@ -99,6 +92,7 @@ export const SelectionActionsBar: VFC<ISelectionActionsBarProps> = ({
|
|||||||
>
|
>
|
||||||
Tags
|
Tags
|
||||||
</Button>
|
</Button>
|
||||||
|
<MoreActions projectId={projectId} />
|
||||||
</StyledBar>
|
</StyledBar>
|
||||||
<ConditionallyRender
|
<ConditionallyRender
|
||||||
condition={Boolean(uiConfig?.flags?.featuresExportImport)}
|
condition={Boolean(uiConfig?.flags?.featuresExportImport)}
|
||||||
|
Loading…
Reference in New Issue
Block a user