Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-09-05 17:53:12 +02:00
Code Issues Projects Releases Wiki Activity

chore: make create feature flag button in unknown flags a text button (#10592)

Browse Source 
https://linear.app/unleash/issue/2-3835/make-create-feature-flag-a-variant=text-button-instead-of-an-icon

Makes "create feature flag" button in unknown flags a text button.

<img width="1130" height="480" alt="image"
src="https://github.com/user-attachments/assets/2a5cb8f9-d0d1-486e-aaf9-cc02f39a2b6f"
/>
This commit is contained in:
Nuno Góis 2025-09-02 11:52:43 +01:00 committed by GitHub
parent c70c864b81
commit 597456d4b5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 48 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
frontend/src/component/unknownFlags/UnknownFlagsActionsCell.tsx
View File

@ -1,13 +1,9 @@
import Add from '@mui/icons-material/Add';
import { Box, styled } from '@mui/material';
import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
import { CREATE_FEATURE } from 'component/providers/AccessProvider/permissions';
import type { UnknownFlag } from './hooks/useUnknownFlags.js';
import { Link } from 'react-router-dom';
import useProjects from 'hooks/api/getters/useProjects/useProjects.js';
import { DEFAULT_PROJECT_ID } from 'hooks/api/getters/useDefaultProject/useDefaultProjectId.js';
import AccessContext from 'contexts/AccessContext.js';
import { useContext } from 'react';
import { useNavigate } from 'react-router-dom';
import PermissionButton from 'component/common/PermissionButton/PermissionButton.js';
import type { ProjectSchema } from 'openapi/index.js';
const StyledBox = styled(Box)(() => ({
display: 'flex',
@ -16,39 +12,32 @@ const StyledBox = styled(Box)(() => ({
interface IUnknownFlagsActionsCellProps {
unknownFlag: UnknownFlag;
suggestedProject?: ProjectSchema;
}
export const UnknownFlagsActionsCell = ({
unknownFlag,
suggestedProject,
}: IUnknownFlagsActionsCellProps) => {
const { projects } = useProjects();
const { hasAccess } = useContext(AccessContext);
const navigate = useNavigate();
let project =
projects.find(({ id }) => id === DEFAULT_PROJECT_ID) || projects[0];
if (!hasAccess(CREATE_FEATURE, project?.id)) {
for (const proj of projects) {
if (hasAccess(CREATE_FEATURE, proj.id)) {
project = proj;
break;
}
}
}
if (!suggestedProject) return null;
return (
<StyledBox>
<PermissionIconButton
component={Link}
data-loading
to={`/projects/${project?.id}?create=true&name=${unknownFlag.name}`}
<PermissionButton
variant='text'
size='small'
permission={CREATE_FEATURE}
projectId={project?.id}
tooltipProps={{
title: 'Create feature flag',
}}
projectId={suggestedProject.id}
onClick={() =>
navigate(
`/projects/${suggestedProject.id}?create=true&name=${unknownFlag.name}`,
)
}
>
<Add />
</PermissionIconButton>
Create flag
</PermissionButton>
</StyledBox>
);
};

34
frontend/src/component/unknownFlags/UnknownFlagsTable.tsx
View File

@ -1,4 +1,4 @@
import { useMemo, useState } from 'react';
import { useContext, useMemo, useState } from 'react';
import { TablePlaceholder, VirtualizedTable } from 'component/common/Table';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { PageContent } from 'component/common/PageContent/PageContent';
@ -19,6 +19,10 @@ import { UnknownFlagsLastEventCell } from './UnknownFlagsLastEventCell.js';
import { HelpIcon } from 'component/common/HelpIcon/HelpIcon.js';
import { UnknownFlagsActionsCell } from './UnknownFlagsActionsCell.js';
import { UnknownFlagsLastReportedCell } from './UnknownFlagsLastReportedCell.js';
import useProjects from 'hooks/api/getters/useProjects/useProjects.js';
import AccessContext from 'contexts/AccessContext.js';
import { DEFAULT_PROJECT_ID } from 'hooks/api/getters/useDefaultProject/useDefaultProjectId.js';
import { CREATE_FEATURE } from 'component/providers/AccessProvider/permissions.js';
const StyledAlert = styled(Alert)(({ theme }) => ({
marginBottom: theme.spacing(3),
@ -43,6 +47,23 @@ export const UnknownFlagsTable = () => {
const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
const { projects } = useProjects();
const { hasAccess } = useContext(AccessContext);
const suggestedProject = useMemo(() => {
let project =
projects.find(({ id }) => id === DEFAULT_PROJECT_ID) || projects[0];
if (!hasAccess(CREATE_FEATURE, project?.id)) {
for (const proj of projects) {
if (hasAccess(CREATE_FEATURE, proj.id)) {
project = proj;
break;
}
}
}
return project;
}, [projects, hasAccess]);
const columns = useMemo(
() => [
{
@ -95,8 +116,13 @@ export const UnknownFlagsTable = () => {
row: { original: unknownFlag },
}: {
row: { original: UnknownFlag };
}) => <UnknownFlagsActionsCell unknownFlag={unknownFlag} />,
width: 100,
}) => (
<UnknownFlagsActionsCell
unknownFlag={unknownFlag}
suggestedProject={suggestedProject}
/>
),
width: 120,
disableSortBy: true,
},
// Always hidden -- for search
@ -121,7 +147,7 @@ export const UnknownFlagsTable = () => {
searchable: true,
},
],
[],
[suggestedProject],
);
const [initialState] = useState({