Disable configure buttons if there are no permissions
This commit is contained in:
parent
838fb604d5
commit
a7f41fd851
3 changed files with 41 additions and 11 deletions
|
@ -1,17 +1,33 @@
|
||||||
import React from 'react';
|
import React, { useMemo } from 'react';
|
||||||
import { Cluster } from 'generated-sources';
|
import { Cluster, ResourceType } from 'generated-sources';
|
||||||
import { CellContext } from '@tanstack/react-table';
|
import { CellContext } from '@tanstack/react-table';
|
||||||
import { Button } from 'components/common/Button/Button';
|
|
||||||
import { clusterConfigPath } from 'lib/paths';
|
import { clusterConfigPath } from 'lib/paths';
|
||||||
|
import { useGetUserInfo } from 'lib/hooks/api/roles';
|
||||||
|
import { ActionCanButton } from 'components/common/ActionComponent';
|
||||||
|
|
||||||
type Props = CellContext<Cluster, unknown>;
|
type Props = CellContext<Cluster, unknown>;
|
||||||
|
|
||||||
const ClusterTableActionsCell: React.FC<Props> = ({ row }) => {
|
const ClusterTableActionsCell: React.FC<Props> = ({ row }) => {
|
||||||
const { name } = row.original;
|
const { name } = row.original;
|
||||||
|
const { data } = useGetUserInfo();
|
||||||
|
|
||||||
|
const isApplicationConfig = useMemo(() => {
|
||||||
return (
|
return (
|
||||||
<Button buttonType="secondary" buttonSize="S" to={clusterConfigPath(name)}>
|
data?.userInfo?.permissions.some(
|
||||||
|
(permission) => permission.resource === ResourceType.APPLICATIONCONFIG
|
||||||
|
) || false
|
||||||
|
);
|
||||||
|
}, [data]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ActionCanButton
|
||||||
|
buttonType="secondary"
|
||||||
|
buttonSize="S"
|
||||||
|
to={clusterConfigPath(name)}
|
||||||
|
canDoAction={isApplicationConfig}
|
||||||
|
>
|
||||||
Configure
|
Configure
|
||||||
</Button>
|
</ActionCanButton>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -1,23 +1,25 @@
|
||||||
import React, { useEffect } from 'react';
|
import React, { useEffect, useMemo } from 'react';
|
||||||
import PageHeading from 'components/common/PageHeading/PageHeading';
|
import PageHeading from 'components/common/PageHeading/PageHeading';
|
||||||
import * as Metrics from 'components/common/Metrics';
|
import * as Metrics from 'components/common/Metrics';
|
||||||
import { Tag } from 'components/common/Tag/Tag.styled';
|
import { Tag } from 'components/common/Tag/Tag.styled';
|
||||||
import Switch from 'components/common/Switch/Switch';
|
import Switch from 'components/common/Switch/Switch';
|
||||||
import { useClusters } from 'lib/hooks/api/clusters';
|
import { useClusters } from 'lib/hooks/api/clusters';
|
||||||
import { Cluster, ServerStatus } from 'generated-sources';
|
import { Cluster, ResourceType, ServerStatus } from 'generated-sources';
|
||||||
import { ColumnDef } from '@tanstack/react-table';
|
import { ColumnDef } from '@tanstack/react-table';
|
||||||
import Table, { SizeCell } from 'components/common/NewTable';
|
import Table, { SizeCell } from 'components/common/NewTable';
|
||||||
import useBoolean from 'lib/hooks/useBoolean';
|
import useBoolean from 'lib/hooks/useBoolean';
|
||||||
import { Button } from 'components/common/Button/Button';
|
|
||||||
import { clusterNewConfigPath } from 'lib/paths';
|
import { clusterNewConfigPath } from 'lib/paths';
|
||||||
import { GlobalSettingsContext } from 'components/contexts/GlobalSettingsContext';
|
import { GlobalSettingsContext } from 'components/contexts/GlobalSettingsContext';
|
||||||
import { useNavigate } from 'react-router-dom';
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import { ActionCanButton } from 'components/common/ActionComponent';
|
||||||
|
import { useGetUserInfo } from 'lib/hooks/api/roles';
|
||||||
|
|
||||||
import * as S from './Dashboard.styled';
|
import * as S from './Dashboard.styled';
|
||||||
import ClusterName from './ClusterName';
|
import ClusterName from './ClusterName';
|
||||||
import ClusterTableActionsCell from './ClusterTableActionsCell';
|
import ClusterTableActionsCell from './ClusterTableActionsCell';
|
||||||
|
|
||||||
const Dashboard: React.FC = () => {
|
const Dashboard: React.FC = () => {
|
||||||
|
const { data } = useGetUserInfo();
|
||||||
const clusters = useClusters();
|
const clusters = useClusters();
|
||||||
const { value: showOfflineOnly, toggle } = useBoolean(false);
|
const { value: showOfflineOnly, toggle } = useBoolean(false);
|
||||||
const appInfo = React.useContext(GlobalSettingsContext);
|
const appInfo = React.useContext(GlobalSettingsContext);
|
||||||
|
@ -62,6 +64,13 @@ const Dashboard: React.FC = () => {
|
||||||
}
|
}
|
||||||
}, [clusters, appInfo.hasDynamicConfig]);
|
}, [clusters, appInfo.hasDynamicConfig]);
|
||||||
|
|
||||||
|
const isApplicationConfig = useMemo(() => {
|
||||||
|
return (
|
||||||
|
data?.userInfo?.permissions.some(
|
||||||
|
(permission) => permission.resource === ResourceType.APPLICATIONCONFIG
|
||||||
|
) || false
|
||||||
|
);
|
||||||
|
}, [data]);
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<PageHeading text="Dashboard" />
|
<PageHeading text="Dashboard" />
|
||||||
|
@ -87,9 +96,14 @@ const Dashboard: React.FC = () => {
|
||||||
<label>Only offline clusters</label>
|
<label>Only offline clusters</label>
|
||||||
</div>
|
</div>
|
||||||
{appInfo.hasDynamicConfig && (
|
{appInfo.hasDynamicConfig && (
|
||||||
<Button buttonType="primary" buttonSize="M" to={clusterNewConfigPath}>
|
<ActionCanButton
|
||||||
|
buttonType="primary"
|
||||||
|
buttonSize="M"
|
||||||
|
to={clusterNewConfigPath}
|
||||||
|
canDoAction={isApplicationConfig}
|
||||||
|
>
|
||||||
Configure new cluster
|
Configure new cluster
|
||||||
</Button>
|
</ActionCanButton>
|
||||||
)}
|
)}
|
||||||
</S.Toolbar>
|
</S.Toolbar>
|
||||||
<Table
|
<Table
|
||||||
|
|
|
@ -27,7 +27,7 @@ export interface AddEditFilterContainerProps {
|
||||||
inputDisplayNameDefaultValue?: string;
|
inputDisplayNameDefaultValue?: string;
|
||||||
inputCodeDefaultValue?: string;
|
inputCodeDefaultValue?: string;
|
||||||
isAdd?: boolean;
|
isAdd?: boolean;
|
||||||
submitCallback?: (values: AddMessageFilters) => Promise<void>;
|
submitCallback?: (values: AddMessageFilters) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
const AddEditFilterContainer: React.FC<AddEditFilterContainerProps> = ({
|
const AddEditFilterContainer: React.FC<AddEditFilterContainerProps> = ({
|
||||||
|
|
Loading…
Add table
Reference in a new issue