Skip to content

Commit

Permalink
FE: RBAC: Disable topic create button when name doesn't match allowed…
Browse files Browse the repository at this point in the history
… patterns
  • Loading branch information
Haarolean committed Feb 1, 2024
1 parent 7aa83bb commit 391554d
Showing 1 changed file with 18 additions and 2 deletions.
20 changes: 18 additions & 2 deletions frontend/src/components/Topics/shared/Form/TopicForm.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, { useMemo } from 'react';
import { useFormContext, Controller } from 'react-hook-form';
import { NOT_SET, BYTES_IN_GB } from 'lib/constants';
import { ClusterName, TopicConfigParams, TopicName } from 'redux/interfaces';
Expand All @@ -12,6 +12,8 @@ import { StyledForm } from 'components/common/Form/Form.styled';
import { clusterTopicPath } from 'lib/paths';
import { useNavigate } from 'react-router-dom';
import useAppParams from 'lib/hooks/useAppParams';
import { ResourceType } from 'generated-sources';
import { useGetUserInfo } from 'lib/hooks/api/roles';

import CustomParams from './CustomParams/CustomParams';
import TimeToRetain from './TimeToRetain';
Expand Down Expand Up @@ -70,9 +72,11 @@ const TopicForm: React.FC<Props> = ({
reset,
} = useFormContext();
const navigate = useNavigate();
const { data } = useGetUserInfo();
const { clusterName } = useAppParams<{ clusterName: ClusterName }>();
const getCleanUpPolicy =
getCleanUpPolicyValue(cleanUpPolicy) || CleanupPolicyOptions[0].value;
const [topicNameValue, setTopicNameValue] = React.useState(topicName);

const getRetentionBytes =
RetentionBytesOptions.find((option: SelectOption) => {
Expand All @@ -84,6 +88,17 @@ const TopicForm: React.FC<Props> = ({
navigate(clusterTopicPath(clusterName, topicName));
};

const canUpdate = useMemo(() => {
if (!data?.rbacEnabled) return true;
return !!data?.userInfo?.permissions.some((permission) => {
const resourceMatched = permission.resource === ResourceType.TOPIC;
const nameMatched = permission?.value
? topicName?.match(permission?.value)
: false;
return resourceMatched && nameMatched;
});
}, [data, topicNameValue]);

return (
<StyledForm onSubmit={onSubmit} aria-label="topic form">
<fieldset disabled={isSubmitting}>
Expand All @@ -98,6 +113,7 @@ const TopicForm: React.FC<Props> = ({
placeholder="Topic Name"
defaultValue={topicName}
autoComplete="off"
onChange={({ target }) => setTopicNameValue(target?.value)}
/>
<FormError>
<ErrorMessage errors={errors} name="name" />
Expand Down Expand Up @@ -262,7 +278,7 @@ const TopicForm: React.FC<Props> = ({
type="submit"
buttonType="primary"
buttonSize="L"
disabled={!isValid || isSubmitting || !isDirty}
disabled={!isValid || isSubmitting || !isDirty || !canUpdate}
>
{isEditing ? 'Update topic' : 'Create topic'}
</Button>
Expand Down

0 comments on commit 391554d

Please sign in to comment.