From 6b7fda458bb0d9aadff8d638557fff150aa3f9d0 Mon Sep 17 00:00:00 2001
From: Pavel Makarichev <vixtir90@gmail.com>
Date: Mon, 18 Mar 2024 23:45:44 +0600
Subject: [PATCH] FE: Add forms for an ACL creating (#188)

Co-authored-by: Pavel Makarichev <pavel.makarichev@almatech.dev>
Co-authored-by: Roman Zabaluev <gpg@haarolean.dev>
---
 .../components/ACLPage/Form/AclFormContext.ts |   8 ++
 .../ACLPage/Form/CustomACL/Form.tsx           | 100 ++++++++++++++++
 .../ACLPage/Form/CustomACL/constants.ts       |  48 ++++++++
 .../components/ACLPage/Form/CustomACL/lib.ts  |  26 ++++
 .../ACLPage/Form/CustomACL/schema.ts          |  13 ++
 .../ACLPage/Form/CustomACL/types.ts           |  16 +++
 .../ACLPage/Form/ForConsumers/Form.tsx        | 112 ++++++++++++++++++
 .../ACLPage/Form/ForConsumers/lib.ts          |  14 +++
 .../ACLPage/Form/ForConsumers/schema.ts       |  22 ++++
 .../ACLPage/Form/ForConsumers/types.ts        |  10 ++
 .../ACLPage/Form/ForKafkaStreamApps/Form.tsx  |  75 ++++++++++++
 .../ACLPage/Form/ForKafkaStreamApps/lib.ts    |  13 ++
 .../ACLPage/Form/ForKafkaStreamApps/schema.ts |  11 ++
 .../ACLPage/Form/ForKafkaStreamApps/types.ts  |   9 ++
 .../ACLPage/Form/ForProducers/Form.tsx        | 112 ++++++++++++++++++
 .../ACLPage/Form/ForProducers/lib.ts          |  15 +++
 .../ACLPage/Form/ForProducers/schema.ts       |  18 +++
 .../ACLPage/Form/ForProducers/types.ts        |  11 ++
 .../components/ACLPage/Form/Form.styled.ts    |  77 ++++++++++++
 frontend/src/components/ACLPage/Form/Form.tsx |  75 ++++++++++++
 .../Form/components/MatchTypeSelector.tsx     |  38 ++++++
 .../src/components/ACLPage/Form/constants.ts  |  18 +++
 frontend/src/components/ACLPage/Form/types.ts |  21 ++++
 .../components/ACLPage/List/List.styled.ts    |   2 +
 frontend/src/components/ACLPage/List/List.tsx |  53 ++++++---
 .../ACLPage/List/__test__/List.spec.tsx       |  28 ++++-
 .../ACLPage/lib/useConsumerGroupsOptions.ts   |  20 ++++
 .../ACLPage/lib/useTopicsOptions.ts           |  20 ++++
 .../components/common/Input/Input.styled.ts   |   2 +-
 .../common/Input/InputLabel.styled.ts         |   1 +
 .../ControlledMultiSelect/index.tsx           |  31 +++++
 .../common/Radio/ControlledRadio.tsx          |  27 +++++
 .../components/common/Radio/Radio.styled.tsx  |  50 ++++++++
 .../src/components/common/Radio/Radio.tsx     |  34 ++++++
 frontend/src/components/common/Radio/types.ts |  24 ++++
 .../common/Select/ControlledSelect.tsx        |   4 +-
 frontend/src/lib/__test__/isRegex.spec.ts     |  17 +++
 frontend/src/lib/hooks/api/acl.ts             | 107 +++++++++++++++--
 frontend/src/lib/isRegex.ts                   |  11 ++
 frontend/src/theme/theme.ts                   |  74 ++++++++++--
 40 files changed, 1321 insertions(+), 46 deletions(-)
 create mode 100644 frontend/src/components/ACLPage/Form/AclFormContext.ts
 create mode 100644 frontend/src/components/ACLPage/Form/CustomACL/Form.tsx
 create mode 100644 frontend/src/components/ACLPage/Form/CustomACL/constants.ts
 create mode 100644 frontend/src/components/ACLPage/Form/CustomACL/lib.ts
 create mode 100644 frontend/src/components/ACLPage/Form/CustomACL/schema.ts
 create mode 100644 frontend/src/components/ACLPage/Form/CustomACL/types.ts
 create mode 100644 frontend/src/components/ACLPage/Form/ForConsumers/Form.tsx
 create mode 100644 frontend/src/components/ACLPage/Form/ForConsumers/lib.ts
 create mode 100644 frontend/src/components/ACLPage/Form/ForConsumers/schema.ts
 create mode 100644 frontend/src/components/ACLPage/Form/ForConsumers/types.ts
 create mode 100644 frontend/src/components/ACLPage/Form/ForKafkaStreamApps/Form.tsx
 create mode 100644 frontend/src/components/ACLPage/Form/ForKafkaStreamApps/lib.ts
 create mode 100644 frontend/src/components/ACLPage/Form/ForKafkaStreamApps/schema.ts
 create mode 100644 frontend/src/components/ACLPage/Form/ForKafkaStreamApps/types.ts
 create mode 100644 frontend/src/components/ACLPage/Form/ForProducers/Form.tsx
 create mode 100644 frontend/src/components/ACLPage/Form/ForProducers/lib.ts
 create mode 100644 frontend/src/components/ACLPage/Form/ForProducers/schema.ts
 create mode 100644 frontend/src/components/ACLPage/Form/ForProducers/types.ts
 create mode 100644 frontend/src/components/ACLPage/Form/Form.styled.ts
 create mode 100644 frontend/src/components/ACLPage/Form/Form.tsx
 create mode 100644 frontend/src/components/ACLPage/Form/components/MatchTypeSelector.tsx
 create mode 100644 frontend/src/components/ACLPage/Form/constants.ts
 create mode 100644 frontend/src/components/ACLPage/Form/types.ts
 create mode 100644 frontend/src/components/ACLPage/lib/useConsumerGroupsOptions.ts
 create mode 100644 frontend/src/components/ACLPage/lib/useTopicsOptions.ts
 create mode 100644 frontend/src/components/common/MultiSelect/ControlledMultiSelect/index.tsx
 create mode 100644 frontend/src/components/common/Radio/ControlledRadio.tsx
 create mode 100644 frontend/src/components/common/Radio/Radio.styled.tsx
 create mode 100644 frontend/src/components/common/Radio/Radio.tsx
 create mode 100644 frontend/src/components/common/Radio/types.ts
 create mode 100644 frontend/src/lib/__test__/isRegex.spec.ts
 create mode 100644 frontend/src/lib/isRegex.ts

diff --git a/frontend/src/components/ACLPage/Form/AclFormContext.ts b/frontend/src/components/ACLPage/Form/AclFormContext.ts
new file mode 100644
index 000000000..dee6bbfb6
--- /dev/null
+++ b/frontend/src/components/ACLPage/Form/AclFormContext.ts
@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+
+interface ACLFormContextProps {
+  close: () => void;
+}
+const ACLFormContext = createContext<ACLFormContextProps | null>(null);
+
+export default ACLFormContext;
diff --git a/frontend/src/components/ACLPage/Form/CustomACL/Form.tsx b/frontend/src/components/ACLPage/Form/CustomACL/Form.tsx
new file mode 100644
index 000000000..a0cf8d0ba
--- /dev/null
+++ b/frontend/src/components/ACLPage/Form/CustomACL/Form.tsx
@@ -0,0 +1,100 @@
+import React, { FC, useContext } from 'react';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { FormProvider, useForm } from 'react-hook-form';
+import { useCreateCustomAcl } from 'lib/hooks/api/acl';
+import ControlledRadio from 'components/common/Radio/ControlledRadio';
+import Input from 'components/common/Input/Input';
+import ControlledSelect from 'components/common/Select/ControlledSelect';
+import { matchTypeOptions } from 'components/ACLPage/Form/constants';
+import useAppParams from 'lib/hooks/useAppParams';
+import { ClusterName } from 'redux/interfaces';
+import * as S from 'components/ACLPage/Form/Form.styled';
+import ACLFormContext from 'components/ACLPage/Form/AclFormContext';
+import { AclDetailedFormProps } from 'components/ACLPage/Form/types';
+
+import formSchema from './schema';
+import { FormValues } from './types';
+import { toRequest } from './lib';
+import {
+  defaultValues,
+  operations,
+  permissions,
+  resourceTypes,
+} from './constants';
+
+const CustomACLForm: FC<AclDetailedFormProps> = ({ formRef }) => {
+  const context = useContext(ACLFormContext);
+
+  const methods = useForm<FormValues>({
+    mode: 'all',
+    resolver: yupResolver(formSchema),
+    defaultValues: { ...defaultValues },
+  });
+
+  const { clusterName } = useAppParams<{ clusterName: ClusterName }>();
+  const create = useCreateCustomAcl(clusterName);
+
+  const onSubmit = async (data: FormValues) => {
+    try {
+      const resource = toRequest(data);
+      await create.createResource(resource);
+      context?.close();
+    } catch (e) {
+      // no custom error
+    }
+  };
+
+  return (
+    <FormProvider {...methods}>
+      <S.Form ref={formRef} onSubmit={methods.handleSubmit(onSubmit)}>
+        <hr />
+        <S.Field>
+          <S.Label htmlFor="principal">Principal</S.Label>
+          <Input
+            name="principal"
+            id="principal"
+            placeholder="Principal"
+            withError
+          />
+        </S.Field>
+
+        <S.Field>
+          <S.Label htmlFor="host">Host restriction</S.Label>
+          <Input name="host" id="host" placeholder="Host" withError />
+        </S.Field>
+        <hr />
+
+        <S.Field>
+          <S.Label htmlFor="resourceType">Resource type</S.Label>
+          <ControlledSelect options={resourceTypes} name="resourceType" />
+        </S.Field>
+
+        <S.Field>
+          <S.Label>Operations</S.Label>
+          <S.ControlList>
+            <ControlledRadio name="permission" options={permissions} />
+            <ControlledSelect options={operations} name="operation" />
+          </S.ControlList>
+        </S.Field>
+
+        <S.Field>
+          <S.Field>Matching pattern</S.Field>
+          <S.ControlList>
+            <ControlledRadio
+              name="namePatternType"
+              options={matchTypeOptions}
+            />
+            <Input
+              name="resourceName"
+              id="resourceName"
+              placeholder="Matching pattern"
+              withError
+            />
+          </S.ControlList>
+        </S.Field>
+      </S.Form>
+    </FormProvider>
+  );
+};
+
+export default React.memo(CustomACLForm);
diff --git a/frontend/src/components/ACLPage/Form/CustomACL/constants.ts b/frontend/src/components/ACLPage/Form/CustomACL/constants.ts
new file mode 100644
index 000000000..ec443da13
--- /dev/null
+++ b/frontend/src/components/ACLPage/Form/CustomACL/constants.ts
@@ -0,0 +1,48 @@
+import { SelectOption } from 'components/common/Select/Select';
+import {
+  KafkaAclOperationEnum,
+  KafkaAclPermissionEnum,
+  KafkaAclResourceType,
+} from 'generated-sources';
+import { RadioOption } from 'components/common/Radio/types';
+
+import { FormValues } from './types';
+
+function toOptionsArray<T extends string>(
+  list: T[],
+  unknown: T
+): SelectOption<T>[] {
+  return list.reduce<SelectOption<T>[]>((acc, cur) => {
+    if (cur !== unknown) {
+      acc.push({ label: cur, value: cur });
+    }
+
+    return acc;
+  }, []);
+}
+
+export const resourceTypes = toOptionsArray(
+  Object.values(KafkaAclResourceType),
+  KafkaAclResourceType.UNKNOWN
+);
+
+export const operations = toOptionsArray(
+  Object.values(KafkaAclOperationEnum),
+  KafkaAclOperationEnum.UNKNOWN
+);
+
+export const permissions: RadioOption[] = [
+  {
+    value: KafkaAclPermissionEnum.ALLOW,
+    itemType: 'green',
+  },
+  {
+    value: KafkaAclPermissionEnum.DENY,
+    itemType: 'red',
+  },
+];
+
+export const defaultValues: Partial<FormValues> = {
+  resourceType: resourceTypes[0].value as KafkaAclResourceType,
+  operation: operations[0].value as KafkaAclOperationEnum,
+};
diff --git a/frontend/src/components/ACLPage/Form/CustomACL/lib.ts b/frontend/src/components/ACLPage/Form/CustomACL/lib.ts
new file mode 100644
index 000000000..3048b6056
--- /dev/null
+++ b/frontend/src/components/ACLPage/Form/CustomACL/lib.ts
@@ -0,0 +1,26 @@
+import { KafkaAcl, KafkaAclNamePatternType } from 'generated-sources';
+import isRegex from 'lib/isRegex';
+import { MatchType } from 'components/ACLPage/Form/types';
+
+import { FormValues } from './types';
+
+export function toRequest(formValue: FormValues): KafkaAcl {
+  let namePatternType: KafkaAclNamePatternType;
+  if (formValue.namePatternType === MatchType.PREFIXED) {
+    namePatternType = KafkaAclNamePatternType.PREFIXED;
+  } else if (isRegex(formValue.resourceName)) {
+    namePatternType = KafkaAclNamePatternType.MATCH;
+  } else {
+    namePatternType = KafkaAclNamePatternType.LITERAL;
+  }
+
+  return {
+    resourceType: formValue.resourceType,
+    resourceName: formValue.resourceName,
+    namePatternType,
+    principal: formValue.principal,
+    host: formValue.host,
+    operation: formValue.operation,
+    permission: formValue.permission,
+  };
+}
diff --git a/frontend/src/components/ACLPage/Form/CustomACL/schema.ts b/frontend/src/components/ACLPage/Form/CustomACL/schema.ts
new file mode 100644
index 000000000..8bb4e756d
--- /dev/null
+++ b/frontend/src/components/ACLPage/Form/CustomACL/schema.ts
@@ -0,0 +1,13 @@
+import { object, string } from 'yup';
+
+const formSchema = object({
+  resourceType: string().required(),
+  resourceName: string().required(),
+  namePatternType: string().required(),
+  principal: string().required(),
+  host: string().required(),
+  operation: string().required(),
+  permission: string().required(),
+});
+
+export default formSchema;
diff --git a/frontend/src/components/ACLPage/Form/CustomACL/types.ts b/frontend/src/components/ACLPage/Form/CustomACL/types.ts
new file mode 100644
index 000000000..fa40f955c
--- /dev/null
+++ b/frontend/src/components/ACLPage/Form/CustomACL/types.ts
@@ -0,0 +1,16 @@
+import {
+  KafkaAclOperationEnum,
+  KafkaAclPermissionEnum,
+  KafkaAclResourceType,
+} from 'generated-sources';
+import { MatchType } from 'components/ACLPage/Form/types';
+
+export interface FormValues {
+  resourceType: KafkaAclResourceType;
+  resourceName: string;
+  namePatternType: MatchType;
+  principal: string;
+  host: string;
+  operation: KafkaAclOperationEnum;
+  permission: KafkaAclPermissionEnum;
+}
diff --git a/frontend/src/components/ACLPage/Form/ForConsumers/Form.tsx b/frontend/src/components/ACLPage/Form/ForConsumers/Form.tsx
new file mode 100644
index 000000000..febd75e08
--- /dev/null
+++ b/frontend/src/components/ACLPage/Form/ForConsumers/Form.tsx
@@ -0,0 +1,112 @@
+import React, { FC, useContext } from 'react';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { FormProvider, useForm } from 'react-hook-form';
+import { ClusterName } from 'redux/interfaces';
+import { useCreateConsumersAcl } from 'lib/hooks/api/acl';
+import useAppParams from 'lib/hooks/useAppParams';
+import ControlledMultiSelect from 'components/common/MultiSelect/ControlledMultiSelect';
+import Input from 'components/common/Input/Input';
+import * as S from 'components/ACLPage/Form/Form.styled';
+import { AclDetailedFormProps, MatchType } from 'components/ACLPage/Form/types';
+import useTopicsOptions from 'components/ACLPage/lib/useTopicsOptions';
+import useConsumerGroupsOptions from 'components/ACLPage/lib/useConsumerGroupsOptions';
+import ACLFormContext from 'components/ACLPage/Form/AclFormContext';
+import MatchTypeSelector from 'components/ACLPage/Form/components/MatchTypeSelector';
+
+import formSchema from './schema';
+import { toRequest } from './lib';
+import { FormValues } from './types';
+
+const ForConsumersForm: FC<AclDetailedFormProps> = ({ formRef }) => {
+  const context = useContext(ACLFormContext);
+  const { clusterName } = useAppParams<{ clusterName: ClusterName }>();
+  const create = useCreateConsumersAcl(clusterName);
+  const methods = useForm<FormValues>({
+    mode: 'all',
+    resolver: yupResolver(formSchema),
+  });
+
+  const { setValue } = methods;
+
+  const onSubmit = async (data: FormValues) => {
+    try {
+      await create.createResource(toRequest(data));
+      context?.close();
+    } catch (e) {
+      // no custom error
+    }
+  };
+
+  const topics = useTopicsOptions(clusterName);
+  const consumerGroups = useConsumerGroupsOptions(clusterName);
+
+  const onTopicTypeChange = (value: string) => {
+    if (value === MatchType.EXACT) {
+      setValue('topicsPrefix', undefined);
+    } else {
+      setValue('topics', undefined);
+    }
+  };
+
+  const onConsumerGroupTypeChange = (value: string) => {
+    if (value === MatchType.EXACT) {
+      setValue('consumerGroupsPrefix', undefined);
+    } else {
+      setValue('consumerGroups', undefined);
+    }
+  };
+
+  return (
+    <FormProvider {...methods}>
+      <S.Form ref={formRef} onSubmit={methods.handleSubmit(onSubmit)}>
+        <hr />
+        <S.Field>
+          <S.Label htmlFor="principal">Principal</S.Label>
+          <Input
+            name="principal"
+            id="principal"
+            placeholder="Principal"
+            withError
+          />
+        </S.Field>
+
+        <S.Field>
+          <S.Label htmlFor="host">Host restriction</S.Label>
+          <Input name="host" id="host" placeholder="Host" withError />
+        </S.Field>
+        <hr />
+
+        <S.Field>
+          <S.Label>From Topic(s)</S.Label>
+          <S.ControlList>
+            <MatchTypeSelector
+              exact={<ControlledMultiSelect name="topics" options={topics} />}
+              prefixed={<Input name="topicsPrefix" placeholder="Prefix..." />}
+              onChange={onTopicTypeChange}
+            />
+          </S.ControlList>
+        </S.Field>
+
+        <S.Field>
+          <S.Field>Consumer group(s)</S.Field>
+          <S.ControlList>
+            <MatchTypeSelector
+              exact={
+                <ControlledMultiSelect
+                  name="consumerGroups"
+                  options={consumerGroups}
+                />
+              }
+              prefixed={
+                <Input name="consumerGroupsPrefix" placeholder="Prefix..." />
+              }
+              onChange={onConsumerGroupTypeChange}
+            />
+          </S.ControlList>
+        </S.Field>
+      </S.Form>
+    </FormProvider>
+  );
+};
+
+export default React.memo(ForConsumersForm);
diff --git a/frontend/src/components/ACLPage/Form/ForConsumers/lib.ts b/frontend/src/components/ACLPage/Form/ForConsumers/lib.ts
new file mode 100644
index 000000000..b7980e52b
--- /dev/null
+++ b/frontend/src/components/ACLPage/Form/ForConsumers/lib.ts
@@ -0,0 +1,14 @@
+import { CreateConsumerAcl } from 'generated-sources/models/CreateConsumerAcl';
+
+import { FormValues } from './types';
+
+export const toRequest = (formValues: FormValues): CreateConsumerAcl => {
+  return {
+    principal: formValues.principal,
+    host: formValues.host,
+    consumerGroups: formValues.consumerGroups?.map((opt) => opt.value),
+    consumerGroupsPrefix: formValues.consumerGroupsPrefix,
+    topics: formValues.topics?.map((opt) => opt.value),
+    topicsPrefix: formValues.topicsPrefix,
+  };
+};
diff --git a/frontend/src/components/ACLPage/Form/ForConsumers/schema.ts b/frontend/src/components/ACLPage/Form/ForConsumers/schema.ts
new file mode 100644
index 000000000..f9c175c48
--- /dev/null
+++ b/frontend/src/components/ACLPage/Form/ForConsumers/schema.ts
@@ -0,0 +1,22 @@
+import { array, object, string } from 'yup';
+
+const formSchema = object({
+  principal: string().required(),
+  host: string().required(),
+  topics: array().of(
+    object().shape({
+      label: string().required(),
+      value: string().required(),
+    })
+  ),
+  topicsPrefix: string(),
+  consumerGroups: array().of(
+    object().shape({
+      label: string().required(),
+      value: string().required(),
+    })
+  ),
+  consumerGroupsPrefix: string(),
+});
+
+export default formSchema;
diff --git a/frontend/src/components/ACLPage/Form/ForConsumers/types.ts b/frontend/src/components/ACLPage/Form/ForConsumers/types.ts
new file mode 100644
index 000000000..97fc73484
--- /dev/null
+++ b/frontend/src/components/ACLPage/Form/ForConsumers/types.ts
@@ -0,0 +1,10 @@
+import { Option } from 'react-multi-select-component';
+
+export interface FormValues {
+  principal: string;
+  host: string;
+  topics?: Option[];
+  topicsPrefix?: string;
+  consumerGroups?: Option[];
+  consumerGroupsPrefix?: string;
+}
diff --git a/frontend/src/components/ACLPage/Form/ForKafkaStreamApps/Form.tsx b/frontend/src/components/ACLPage/Form/ForKafkaStreamApps/Form.tsx
new file mode 100644
index 000000000..7a747de4e
--- /dev/null
+++ b/frontend/src/components/ACLPage/Form/ForKafkaStreamApps/Form.tsx
@@ -0,0 +1,75 @@
+import React, { FC, useContext } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { ClusterName } from 'redux/interfaces';
+import { useCreateStreamAppAcl } from 'lib/hooks/api/acl';
+import useAppParams from 'lib/hooks/useAppParams';
+import Input from 'components/common/Input/Input';
+import ControlledMultiSelect from 'components/common/MultiSelect/ControlledMultiSelect';
+import * as S from 'components/ACLPage/Form/Form.styled';
+import { AclDetailedFormProps } from 'components/ACLPage/Form/types';
+import useTopicsOptions from 'components/ACLPage/lib/useTopicsOptions';
+import ACLFormContext from 'components/ACLPage/Form/AclFormContext';
+
+import { toRequest } from './lib';
+import formSchema from './schema';
+import { FormValues } from './types';
+
+const ForKafkaStreamAppsForm: FC<AclDetailedFormProps> = ({ formRef }) => {
+  const context = useContext(ACLFormContext);
+  const methods = useForm<FormValues>({
+    mode: 'all',
+    resolver: yupResolver(formSchema),
+  });
+
+  const { clusterName } = useAppParams<{ clusterName: ClusterName }>();
+  const create = useCreateStreamAppAcl(clusterName);
+  const topics = useTopicsOptions(clusterName);
+
+  const onSubmit = async (data: FormValues) => {
+    try {
+      const resource = toRequest(data);
+      await create.createResource(resource);
+      context?.close();
+    } catch (e) {
+      // no custom error
+    }
+  };
+
+  return (
+    <FormProvider {...methods}>
+      <S.Form ref={formRef} onSubmit={methods.handleSubmit(onSubmit)}>
+        <hr />
+        <S.Field>
+          <S.Label htmlFor="principal">Principal</S.Label>
+          <Input
+            name="principal"
+            id="principal"
+            placeholder="Principal"
+            withError
+          />
+        </S.Field>
+
+        <S.Field>
+          <S.Label htmlFor="host">Host restriction</S.Label>
+          <Input name="host" id="host" placeholder="Host" withError />
+        </S.Field>
+        <hr />
+        <S.Field>
+          <S.Label>From topic(s)</S.Label>
+          <ControlledMultiSelect name="inputTopics" options={topics} />
+        </S.Field>
+        <S.Field>
+          <S.Label>To topic(s)</S.Label>
+          <ControlledMultiSelect name="outputTopics" options={topics} />
+        </S.Field>
+        <S.Field>
+          <S.Label>Application.id</S.Label>
+          <Input name="applicationId" placeholder="Application ID" />
+        </S.Field>
+      </S.Form>
+    </FormProvider>
+  );
+};
+
+export default ForKafkaStreamAppsForm;
diff --git a/frontend/src/components/ACLPage/Form/ForKafkaStreamApps/lib.ts b/frontend/src/components/ACLPage/Form/ForKafkaStreamApps/lib.ts
new file mode 100644
index 000000000..dce01c66b
--- /dev/null
+++ b/frontend/src/components/ACLPage/Form/ForKafkaStreamApps/lib.ts
@@ -0,0 +1,13 @@
+import { CreateStreamAppAcl } from 'generated-sources/models/CreateStreamAppAcl';
+
+import { FormValues } from './types';
+
+export const toRequest = (formValues: FormValues): CreateStreamAppAcl => {
+  return {
+    principal: formValues.principal,
+    host: formValues.host,
+    inputTopics: formValues.inputTopics.map((opt) => opt.value),
+    outputTopics: formValues.outputTopics.map((opt) => opt.value),
+    applicationId: formValues.applicationId,
+  };
+};
diff --git a/frontend/src/components/ACLPage/Form/ForKafkaStreamApps/schema.ts b/frontend/src/components/ACLPage/Form/ForKafkaStreamApps/schema.ts
new file mode 100644
index 000000000..4d6495889
--- /dev/null
+++ b/frontend/src/components/ACLPage/Form/ForKafkaStreamApps/schema.ts
@@ -0,0 +1,11 @@
+import { array, object, string } from 'yup';
+
+const formSchema = object({
+  principal: string().required(),
+  host: string().required(),
+  inputTopics: array().of(string()).required(),
+  outputTopics: array().of(string()).required(),
+  applicationId: string().required(),
+});
+
+export default formSchema;
diff --git a/frontend/src/components/ACLPage/Form/ForKafkaStreamApps/types.ts b/frontend/src/components/ACLPage/Form/ForKafkaStreamApps/types.ts
new file mode 100644
index 000000000..adeee573c
--- /dev/null
+++ b/frontend/src/components/ACLPage/Form/ForKafkaStreamApps/types.ts
@@ -0,0 +1,9 @@
+import { Option } from 'react-multi-select-component';
+
+export interface FormValues {
+  principal: string;
+  host: string;
+  inputTopics: Option[];
+  outputTopics: Option[];
+  applicationId: string;
+}
diff --git a/frontend/src/components/ACLPage/Form/ForProducers/Form.tsx b/frontend/src/components/ACLPage/Form/ForProducers/Form.tsx
new file mode 100644
index 000000000..cd84aa674
--- /dev/null
+++ b/frontend/src/components/ACLPage/Form/ForProducers/Form.tsx
@@ -0,0 +1,112 @@
+import React, { FC, useContext } from 'react';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useCreateProducerAcl } from 'lib/hooks/api/acl';
+import { FormProvider, useForm } from 'react-hook-form';
+import useAppParams from 'lib/hooks/useAppParams';
+import { ClusterName } from 'redux/interfaces';
+import Input from 'components/common/Input/Input';
+import ControlledMultiSelect from 'components/common/MultiSelect/ControlledMultiSelect';
+import Checkbox from 'components/common/Checkbox/Checkbox';
+import * as S from 'components/ACLPage/Form/Form.styled';
+import { AclDetailedFormProps, MatchType } from 'components/ACLPage/Form/types';
+import useTopicsOptions from 'components/ACLPage/lib/useTopicsOptions';
+import ACLFormContext from 'components/ACLPage/Form/AclFormContext';
+import MatchTypeSelector from 'components/ACLPage/Form/components/MatchTypeSelector';
+
+import { toRequest } from './lib';
+import { FormValues } from './types';
+import formSchema from './schema';
+
+const ForProducersForm: FC<AclDetailedFormProps> = ({ formRef }) => {
+  const context = useContext(ACLFormContext);
+  const methods = useForm<FormValues>({
+    mode: 'all',
+    resolver: yupResolver(formSchema),
+  });
+  const { setValue } = methods;
+
+  const { clusterName } = useAppParams<{ clusterName: ClusterName }>();
+  const create = useCreateProducerAcl(clusterName);
+  const topics = useTopicsOptions(clusterName);
+
+  const onTopicTypeChange = (value: string) => {
+    if (value === MatchType.EXACT) {
+      setValue('topicsPrefix', undefined);
+    } else {
+      setValue('topics', undefined);
+    }
+  };
+
+  const onTransactionIdTypeChange = (value: string) => {
+    if (value === MatchType.EXACT) {
+      setValue('transactionsIdPrefix', undefined);
+    } else {
+      setValue('transactionalId', undefined);
+    }
+  };
+
+  const onSubmit = async (data: FormValues) => {
+    try {
+      await create.createResource(toRequest(data));
+      context?.close();
+    } catch (e) {
+      // no custom error
+    }
+  };
+
+  return (
+    <FormProvider {...methods}>
+      <S.Form ref={formRef} onSubmit={methods.handleSubmit(onSubmit)}>
+        <hr />
+        <S.Field>
+          <S.Label htmlFor="principal">Principal</S.Label>
+          <Input
+            name="principal"
+            id="principal"
+            placeholder="Principal"
+            withError
+          />
+        </S.Field>
+
+        <S.Field>
+          <S.Label htmlFor="host">Host restriction</S.Label>
+          <Input name="host" id="host" placeholder="Host" withError />
+        </S.Field>
+        <hr />
+        <S.Field>
+          <S.Label>To Topic(s)</S.Label>
+          <S.ControlList>
+            <MatchTypeSelector
+              exact={<ControlledMultiSelect name="topics" options={topics} />}
+              prefixed={<Input name="topicsPrefix" placeholder="Prefix..." />}
+              onChange={onTopicTypeChange}
+            />
+          </S.ControlList>
+        </S.Field>
+
+        <S.Field>
+          <S.Field>Transaction ID</S.Field>
+          <S.ControlList>
+            <MatchTypeSelector
+              exact={
+                <Input name="transactionalId" placeholder="Transactional ID" />
+              }
+              prefixed={
+                <Input name="transactionsIdPrefix" placeholder="Prefix..." />
+              }
+              onChange={onTransactionIdTypeChange}
+            />
+          </S.ControlList>
+        </S.Field>
+        <hr />
+        <Checkbox
+          name="idempotent"
+          label="Idempotent"
+          hint="Check it if using enable idempotence=true"
+        />
+      </S.Form>
+    </FormProvider>
+  );
+};
+
+export default ForProducersForm;
diff --git a/frontend/src/components/ACLPage/Form/ForProducers/lib.ts b/frontend/src/components/ACLPage/Form/ForProducers/lib.ts
new file mode 100644
index 000000000..ccfc57f65
--- /dev/null
+++ b/frontend/src/components/ACLPage/Form/ForProducers/lib.ts
@@ -0,0 +1,15 @@
+import { CreateProducerAcl } from 'generated-sources/models/CreateProducerAcl';
+
+import { FormValues } from './types';
+
+export const toRequest = (formValues: FormValues): CreateProducerAcl => {
+  return {
+    principal: formValues.principal,
+    host: formValues.host,
+    topics: formValues.topics?.map((opt) => opt.value),
+    topicsPrefix: formValues.topicsPrefix,
+    transactionalId: formValues.transactionalId,
+    transactionsIdPrefix: formValues.transactionsIdPrefix,
+    idempotent: formValues.indemponent,
+  };
+};
diff --git a/frontend/src/components/ACLPage/Form/ForProducers/schema.ts b/frontend/src/components/ACLPage/Form/ForProducers/schema.ts
new file mode 100644
index 000000000..b8bb3e526
--- /dev/null
+++ b/frontend/src/components/ACLPage/Form/ForProducers/schema.ts
@@ -0,0 +1,18 @@
+import { array, boolean, object, string } from 'yup';
+
+const formSchema = object({
+  principal: string().required(),
+  host: string().required(),
+  topics: array().of(
+    object().shape({
+      label: string().required(),
+      value: string().required(),
+    })
+  ),
+  topicsPrefix: string(),
+  transactionalId: string(),
+  transactionsIdPrefix: string(),
+  idempotent: boolean(),
+});
+
+export default formSchema;
diff --git a/frontend/src/components/ACLPage/Form/ForProducers/types.ts b/frontend/src/components/ACLPage/Form/ForProducers/types.ts
new file mode 100644
index 000000000..b6a4e38e0
--- /dev/null
+++ b/frontend/src/components/ACLPage/Form/ForProducers/types.ts
@@ -0,0 +1,11 @@
+import { Option } from 'react-multi-select-component';
+
+export interface FormValues {
+  principal: string;
+  host: string;
+  topics?: Option[];
+  topicsPrefix?: string;
+  transactionalId?: string;
+  transactionsIdPrefix?: string;
+  indemponent: boolean;
+}
diff --git a/frontend/src/components/ACLPage/Form/Form.styled.ts b/frontend/src/components/ACLPage/Form/Form.styled.ts
new file mode 100644
index 000000000..340695981
--- /dev/null
+++ b/frontend/src/components/ACLPage/Form/Form.styled.ts
@@ -0,0 +1,77 @@
+import { StyledForm } from 'components/common/Form/Form.styled';
+import { Input } from 'components/common/Input/Input.styled';
+import MultiSelect from 'components/common/MultiSelect/MultiSelect.styled';
+import styled from 'styled-components';
+
+export const Wrapper = styled.div<{ $open?: boolean }>(
+  ({ theme, $open }) => `
+  background-color: ${theme.default.backgroundColor};
+  position: fixed;
+  top: ${theme.layout.navBarHeight};
+  bottom: 0;
+  width: 37vw;
+  right: calc(${$open ? '0px' : theme.layout.rightSidebarWidth} * -1);
+  box-shadow: -1px 0px 10px 0px rgba(0, 0, 0, 0.2);
+  transition: right 0.3s linear;
+  z-index: 200;
+  display: flex;
+  flex-direction: column;
+
+  h3 {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid ${theme.layout.stuffBorderColor};
+    padding: 16px;
+  }
+`
+);
+
+export const Form = styled(StyledForm)`
+  margin-top: 16px;
+  padding: 0px;
+
+  ${MultiSelect} {
+    min-width: 270px;
+  }
+
+  ${Input} {
+    min-width: 270px;
+  }
+`;
+
+export const Field = styled.div`
+  ${({ theme }) => theme.input.label};
+  display: flex;
+  justify-content: space-between;
+
+  & ul {
+    width: 100%;
+  }
+`;
+
+export const Label = styled.label`
+  line-height: 32px;
+`;
+
+export const ControlList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+
+export const Footer = styled.div`
+  display: flex;
+  justify-content: end;
+  gap: 8px;
+  padding: 16px;
+`;
+export const Content = styled.div`
+  flex: auto;
+  padding: 16px;
+`;
+
+export const CloseSidebar = styled.div`
+  cursor: pointer;
+`;
+export const Title = styled.span``;
diff --git a/frontend/src/components/ACLPage/Form/Form.tsx b/frontend/src/components/ACLPage/Form/Form.tsx
new file mode 100644
index 000000000..1242335d8
--- /dev/null
+++ b/frontend/src/components/ACLPage/Form/Form.tsx
@@ -0,0 +1,75 @@
+import React, { FC, Suspense, useContext, useRef, useState } from 'react';
+import Select from 'components/common/Select/Select';
+import Heading from 'components/common/heading/Heading.styled';
+import CloseIcon from 'components/common/Icons/CloseIcon';
+import { Button } from 'components/common/Button/Button';
+
+import { ACLFormProps, ACLType, AclDetailedFormProps } from './types';
+import { ACLTypeOptions } from './constants';
+import * as S from './Form.styled';
+import ACLFormContext from './AclFormContext';
+
+const DETAILED_FORM_COMPONENTS: Record<
+  keyof typeof ACLType,
+  FC<AclDetailedFormProps>
+> = {
+  [ACLType.CUSTOM_ACL]: React.lazy(() => import('./CustomACL/Form')),
+  [ACLType.FOR_CONSUMERS]: React.lazy(() => import('./ForConsumers/Form')),
+  [ACLType.FOR_PRODUCERS]: React.lazy(() => import('./ForProducers/Form')),
+  [ACLType.FOR_KAFKA_STREAM_APPS]: React.lazy(
+    () => import('./ForKafkaStreamApps/Form')
+  ),
+};
+
+const ACLForm: FC<ACLFormProps> = ({ isOpen: open }) => {
+  const [aclType, setAclType] = useState(ACLType.CUSTOM_ACL);
+  const formContext = useContext(ACLFormContext);
+
+  const formRef = useRef<HTMLFormElement>(null);
+  const DetailedForm = DETAILED_FORM_COMPONENTS[aclType];
+
+  return (
+    <S.Wrapper data-testid="aclForm" $open={open}>
+      <Heading level={3}>
+        <S.Title>Create ACL</S.Title>
+        <S.CloseSidebar onClick={formContext?.close}>
+          <CloseIcon />
+        </S.CloseSidebar>
+      </Heading>
+      <S.Content>
+        <S.Field>
+          <S.Label>Select ACL type</S.Label>
+          <Select
+            minWidth="270px"
+            selectSize="L"
+            value={aclType}
+            options={ACLTypeOptions}
+            onChange={(option) => setAclType(option as ACLType)}
+          />
+        </S.Field>
+        <Suspense fallback={<div />}>
+          <DetailedForm formRef={formRef} />
+        </Suspense>
+      </S.Content>
+      <hr />
+      <S.Footer>
+        <Button
+          buttonSize="M"
+          buttonType="secondary"
+          onClick={formContext?.close}
+        >
+          Cancel
+        </Button>
+        <Button
+          buttonSize="M"
+          buttonType="primary"
+          onClick={() => formRef.current?.requestSubmit()}
+        >
+          Submit
+        </Button>
+      </S.Footer>
+    </S.Wrapper>
+  );
+};
+
+export default React.memo(ACLForm);
diff --git a/frontend/src/components/ACLPage/Form/components/MatchTypeSelector.tsx b/frontend/src/components/ACLPage/Form/components/MatchTypeSelector.tsx
new file mode 100644
index 000000000..2fccf0a75
--- /dev/null
+++ b/frontend/src/components/ACLPage/Form/components/MatchTypeSelector.tsx
@@ -0,0 +1,38 @@
+import React, { FC, ReactElement, useState } from 'react';
+import Radio from 'components/common/Radio/Radio';
+import { MatchType } from 'components/ACLPage/Form/types';
+import { matchTypeOptions } from 'components/ACLPage/Form/constants';
+
+interface MatchTypeSelectorProps {
+  exact: ReactElement;
+  prefixed: ReactElement;
+  onChange?: (matchType: MatchType) => void;
+}
+
+const MatchTypeSelector: FC<MatchTypeSelectorProps> = ({
+  exact,
+  prefixed,
+  onChange,
+}) => {
+  const [matchType, setMatchType] = useState(MatchType.EXACT);
+
+  const handleChange = (value: MatchType) => {
+    setMatchType(value);
+    onChange?.(value);
+  };
+
+  const content = matchType === MatchType.EXACT ? exact : prefixed;
+
+  return (
+    <>
+      <Radio
+        value={matchType}
+        options={matchTypeOptions}
+        onChange={(v) => handleChange(v as MatchType)}
+      />
+      <div>{content}</div>
+    </>
+  );
+};
+
+export default MatchTypeSelector;
diff --git a/frontend/src/components/ACLPage/Form/constants.ts b/frontend/src/components/ACLPage/Form/constants.ts
new file mode 100644
index 000000000..6a6d024ed
--- /dev/null
+++ b/frontend/src/components/ACLPage/Form/constants.ts
@@ -0,0 +1,18 @@
+import { SelectOption } from 'components/common/Select/Select';
+import { RadioOption } from 'components/common/Radio/types';
+
+import { ACLType, MatchType } from './types';
+
+export const matchTypeOptions: RadioOption[] = [
+  {
+    value: MatchType.EXACT,
+  },
+  { value: MatchType.PREFIXED },
+];
+
+export const ACLTypeOptions: SelectOption<ACLType>[] = [
+  { label: 'Custom ACL', value: ACLType.CUSTOM_ACL },
+  { label: 'For Consumers', value: ACLType.FOR_CONSUMERS },
+  { label: 'For Producers', value: ACLType.FOR_PRODUCERS },
+  { label: 'For Kafka Stream Apps', value: ACLType.FOR_KAFKA_STREAM_APPS },
+];
diff --git a/frontend/src/components/ACLPage/Form/types.ts b/frontend/src/components/ACLPage/Form/types.ts
new file mode 100644
index 000000000..fcac9682e
--- /dev/null
+++ b/frontend/src/components/ACLPage/Form/types.ts
@@ -0,0 +1,21 @@
+import { RefObject } from 'react';
+
+export interface AclDetailedFormProps {
+  formRef: RefObject<HTMLFormElement> | null;
+}
+
+export interface ACLFormProps {
+  isOpen: boolean;
+}
+
+export enum MatchType {
+  EXACT = 'EXACT',
+  PREFIXED = 'PREFIXED',
+}
+
+export enum ACLType {
+  CUSTOM_ACL = 'CUSTOM_ACL',
+  FOR_CONSUMERS = 'FOR_CONSUMERS',
+  FOR_PRODUCERS = 'FOR_PRODUCERS',
+  FOR_KAFKA_STREAM_APPS = 'FOR_KAFKA_STREAM_APPS',
+}
diff --git a/frontend/src/components/ACLPage/List/List.styled.ts b/frontend/src/components/ACLPage/List/List.styled.ts
index 287214e1e..b1e8afead 100644
--- a/frontend/src/components/ACLPage/List/List.styled.ts
+++ b/frontend/src/components/ACLPage/List/List.styled.ts
@@ -1,5 +1,7 @@
 import styled from 'styled-components';
 
+export const Container = styled.div``;
+
 export const EnumCell = styled.div`
   text-transform: capitalize;
 `;
diff --git a/frontend/src/components/ACLPage/List/List.tsx b/frontend/src/components/ACLPage/List/List.tsx
index 2d4af3463..ddf60d419 100644
--- a/frontend/src/components/ACLPage/List/List.tsx
+++ b/frontend/src/components/ACLPage/List/List.tsx
@@ -1,9 +1,7 @@
 import React from 'react';
 import { ColumnDef, Row } from '@tanstack/react-table';
-import { useTheme } from 'styled-components';
 import PageHeading from 'components/common/PageHeading/PageHeading';
 import Table from 'components/common/NewTable';
-import DeleteIcon from 'components/common/Icons/DeleteIcon';
 import { useConfirm } from 'lib/hooks/useConfirm';
 import useAppParams from 'lib/hooks/useAppParams';
 import { useAcls, useDeleteAcl } from 'lib/hooks/api/acl';
@@ -13,19 +11,30 @@ import {
   KafkaAclNamePatternType,
   KafkaAclPermissionEnum,
 } from 'generated-sources';
+import useBoolean from 'lib/hooks/useBoolean';
+import { Button } from 'components/common/Button/Button';
+import ACLForm from 'components/ACLPage/Form/Form';
+import DeleteIcon from 'components/common/Icons/DeleteIcon';
+import { useTheme } from 'styled-components';
+import ACLFormContext from 'components/ACLPage/Form/AclFormContext';
+import PlusIcon from 'components/common/Icons/PlusIcon';
 
 import * as S from './List.styled';
 
 const ACList: React.FC = () => {
   const { clusterName } = useAppParams<{ clusterName: ClusterName }>();
-  const theme = useTheme();
   const { data: aclList } = useAcls(clusterName);
   const { deleteResource } = useDeleteAcl(clusterName);
   const modal = useConfirm(true);
-
+  const theme = useTheme();
+  const {
+    value: isFormOpen,
+    setFalse: closeForm,
+    setTrue: openFrom,
+  } = useBoolean();
   const [rowId, setRowId] = React.useState('');
 
-  const onDeleteClick = (acl: KafkaAcl | null) => {
+  const handleDeleteClick = (acl: KafkaAcl | null) => {
     if (acl) {
       modal('Are you sure want to delete this ACL record?', () =>
         deleteResource(acl)
@@ -33,6 +42,12 @@ const ACList: React.FC = () => {
     }
   };
 
+  const handleRowHover = (value: Row<KafkaAcl>) => {
+    if (value) {
+      setRowId(value.id);
+    }
+  };
+
   const columns = React.useMemo<ColumnDef<KafkaAcl>[]>(
     () => [
       {
@@ -115,7 +130,7 @@ const ACList: React.FC = () => {
         // eslint-disable-next-line react/no-unstable-nested-components
         cell: ({ row }) => {
           return (
-            <S.DeleteCell onClick={() => onDeleteClick(row.original)}>
+            <S.DeleteCell onClick={() => handleDeleteClick(row.original)}>
               <DeleteIcon
                 fill={
                   rowId === row.id ? theme.acl.table.deleteIcon : 'transparent'
@@ -130,23 +145,29 @@ const ACList: React.FC = () => {
     [rowId]
   );
 
-  const onRowHover = (value: Row<KafkaAcl>) => {
-    if (value) {
-      setRowId(value.id);
-    }
-  };
-
   return (
-    <>
-      <PageHeading text="Access Control List" />
+    <S.Container>
+      <PageHeading text="Access Control List">
+        <Button buttonType="primary" buttonSize="M" onClick={openFrom}>
+          <PlusIcon /> Create ACL
+        </Button>
+      </PageHeading>
       <Table
         columns={columns}
         data={aclList ?? []}
         emptyMessage="No ACL items found"
-        onRowHover={onRowHover}
+        onRowHover={handleRowHover}
         onMouseLeave={() => setRowId('')}
+        enableSorting
       />
-    </>
+      <ACLFormContext.Provider
+        value={{
+          close: closeForm,
+        }}
+      >
+        {isFormOpen && <ACLForm isOpen={isFormOpen} />}
+      </ACLFormContext.Provider>
+    </S.Container>
   );
 };
 
diff --git a/frontend/src/components/ACLPage/List/__test__/List.spec.tsx b/frontend/src/components/ACLPage/List/__test__/List.spec.tsx
index 0c39681bb..88a5a9575 100644
--- a/frontend/src/components/ACLPage/List/__test__/List.spec.tsx
+++ b/frontend/src/components/ACLPage/List/__test__/List.spec.tsx
@@ -4,12 +4,13 @@ import { screen } from '@testing-library/dom';
 import userEvent from '@testing-library/user-event';
 import { clusterACLPath } from 'lib/paths';
 import ACList from 'components/ACLPage/List/List';
-import { useAcls, useDeleteAcl } from 'lib/hooks/api/acl';
+import { useAcls, useCreateCustomAcl, useDeleteAcl } from 'lib/hooks/api/acl';
 import { aclPayload } from 'lib/fixtures/acls';
 
 jest.mock('lib/hooks/api/acl', () => ({
   useAcls: jest.fn(),
   useDeleteAcl: jest.fn(),
+  useCreateCustomAcl: jest.fn(),
 }));
 
 describe('ACLList Component', () => {
@@ -33,6 +34,9 @@ describe('ACLList Component', () => {
         (useDeleteAcl as jest.Mock).mockImplementation(() => ({
           deleteResource: jest.fn(),
         }));
+        (useCreateCustomAcl as jest.Mock).mockImplementation(() => ({
+          createResource: jest.fn(),
+        }));
       });
 
       it('renders ACLList with records', async () => {
@@ -50,6 +54,28 @@ describe('ACLList Component', () => {
           fill: 'transparent',
         });
       });
+
+      it('header has button for create ACL', () => {
+        renderComponent();
+        const button = screen.getByText('Create ACL');
+        expect(button).toBeInTheDocument();
+      });
+
+      it('form not in the document', async () => {
+        renderComponent();
+        const form = screen.queryByTestId('aclForm');
+        expect(form).not.toBeInTheDocument();
+      });
+
+      describe('after acl button click', () => {
+        it('form is in the document', async () => {
+          renderComponent();
+          const button = screen.getByText('Create ACL');
+          await userEvent.click(button);
+          const form = screen.queryByTestId('aclForm');
+          expect(form).toBeInTheDocument();
+        });
+      });
     });
 
     describe('when it has no acls', () => {
diff --git a/frontend/src/components/ACLPage/lib/useConsumerGroupsOptions.ts b/frontend/src/components/ACLPage/lib/useConsumerGroupsOptions.ts
new file mode 100644
index 000000000..335dfc585
--- /dev/null
+++ b/frontend/src/components/ACLPage/lib/useConsumerGroupsOptions.ts
@@ -0,0 +1,20 @@
+import { useConsumerGroups } from 'lib/hooks/api/consumers';
+import { useMemo } from 'react';
+
+const useConsumerGroupsOptions = (clusterName: string) => {
+  const { data } = useConsumerGroups({ clusterName, search: '' });
+  const consumerGroups = useMemo(() => {
+    return (
+      data?.consumerGroups?.map((cg) => {
+        return {
+          value: cg.groupId,
+          label: cg.groupId,
+        };
+      }) || []
+    );
+  }, [data]);
+
+  return consumerGroups;
+};
+
+export default useConsumerGroupsOptions;
diff --git a/frontend/src/components/ACLPage/lib/useTopicsOptions.ts b/frontend/src/components/ACLPage/lib/useTopicsOptions.ts
new file mode 100644
index 000000000..441686e4b
--- /dev/null
+++ b/frontend/src/components/ACLPage/lib/useTopicsOptions.ts
@@ -0,0 +1,20 @@
+import { useTopics } from 'lib/hooks/api/topics';
+import { useMemo } from 'react';
+
+const useTopicsOptions = (clusterName: string) => {
+  const { data } = useTopics({ clusterName });
+  const topics = useMemo(() => {
+    return (
+      data?.topics?.map((topic) => {
+        return {
+          label: topic.name,
+          value: topic.name,
+        };
+      }) || []
+    );
+  }, [data]);
+
+  return topics;
+};
+
+export default useTopicsOptions;
diff --git a/frontend/src/components/common/Input/Input.styled.ts b/frontend/src/components/common/Input/Input.styled.ts
index f21962fe6..2ff36c230 100644
--- a/frontend/src/components/common/Input/Input.styled.ts
+++ b/frontend/src/components/common/Input/Input.styled.ts
@@ -96,5 +96,5 @@ export const FormError = styled.p`
 export const InputHint = styled.p`
   font-size: 0.85rem;
   margin-top: 0.25rem;
-  color: ${({ theme }) => theme.clusterConfigForm.inputHintText.secondary};
+  color: ${({ theme }) => theme.checkbox.hint};
 `;
diff --git a/frontend/src/components/common/Input/InputLabel.styled.ts b/frontend/src/components/common/Input/InputLabel.styled.ts
index a33fb1f76..19af510ee 100644
--- a/frontend/src/components/common/Input/InputLabel.styled.ts
+++ b/frontend/src/components/common/Input/InputLabel.styled.ts
@@ -6,6 +6,7 @@ export const InputLabel = styled.label`
   line-height: 20px;
   color: ${({ theme }) => theme.input.label.color};
   input[type='checkbox'] {
+    accent-color: ${({ theme }) => theme.input.icon.color};
     display: inline-block;
     margin-right: 8px;
     vertical-align: text-top;
diff --git a/frontend/src/components/common/MultiSelect/ControlledMultiSelect/index.tsx b/frontend/src/components/common/MultiSelect/ControlledMultiSelect/index.tsx
new file mode 100644
index 000000000..55670c399
--- /dev/null
+++ b/frontend/src/components/common/MultiSelect/ControlledMultiSelect/index.tsx
@@ -0,0 +1,31 @@
+import React, { FC } from 'react';
+import MultiSelect from 'components/common/MultiSelect/MultiSelect.styled';
+import { Controller, useFormContext } from 'react-hook-form';
+import { Option } from 'react-multi-select-component';
+
+type Props = {
+  name: string;
+  options: Option[];
+  label?: string;
+};
+const ControlledMultiSelect: FC<Props> = ({ name, options, label }) => {
+  const { control } = useFormContext();
+
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({ field: { value, onChange } }) => (
+        <MultiSelect
+          height="40px"
+          options={options}
+          value={value ?? []}
+          onChange={onChange}
+          labelledBy={label ?? ''}
+        />
+      )}
+    />
+  );
+};
+
+export default ControlledMultiSelect;
diff --git a/frontend/src/components/common/Radio/ControlledRadio.tsx b/frontend/src/components/common/Radio/ControlledRadio.tsx
new file mode 100644
index 000000000..044816c84
--- /dev/null
+++ b/frontend/src/components/common/Radio/ControlledRadio.tsx
@@ -0,0 +1,27 @@
+import React, { FC } from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+
+import { ControlledRadioProps } from './types';
+import { Radio } from './Radio';
+
+const ControlledRadio: FC<ControlledRadioProps> = ({ name, options }) => {
+  const { control } = useFormContext();
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field: { onChange, value } }) => {
+        return (
+          <Radio
+            options={options}
+            onChange={onChange}
+            value={value ?? options[0]?.value}
+          />
+        );
+      }}
+    />
+  );
+};
+
+export default ControlledRadio;
diff --git a/frontend/src/components/common/Radio/Radio.styled.tsx b/frontend/src/components/common/Radio/Radio.styled.tsx
new file mode 100644
index 000000000..163b49763
--- /dev/null
+++ b/frontend/src/components/common/Radio/Radio.styled.tsx
@@ -0,0 +1,50 @@
+import styled, { css } from 'styled-components';
+
+import { RadioItemType } from './types';
+
+export const Item = styled.div<{
+  $isActive?: boolean;
+  $itemType: RadioItemType;
+}>`
+  ${({ theme, $itemType }) => css`
+    background-color: ${theme.acl.create.radioButtons[$itemType].normal
+      .background};
+    border: 1px solid ${theme.acl.create.radioButtons[$itemType].normal.border};
+    color: ${theme.acl.create.radioButtons[$itemType].normal.text};
+    padding: 0 16px;
+    cursor: pointer;
+    height: 32px;
+    line-height: 32px;
+  `}
+
+  ${({ $isActive, $itemType, theme }) => {
+    if ($isActive) {
+      return css`
+        color: ${theme.acl.create.radioButtons[$itemType].active.text};
+        background-color: ${theme.acl.create.radioButtons[$itemType].active.background};
+        border-color: ${theme.acl.create.radioButtons[$itemType].active.background}};
+      `;
+    }
+    return css`
+      &:hover {
+        background: ${theme.acl.create.radioButtons[$itemType].hover
+          .background};
+        border: 1px solid
+          ${theme.acl.create.radioButtons[$itemType].hover.border};
+        color: ${theme.acl.create.radioButtons[$itemType].hover.text};
+      }
+    `;
+  }}
+`;
+
+export const Container = styled.div`
+  display: flex;
+
+  ${Item}:first-child {
+    border-radius: 4px 0px 0px 4px;
+  }
+
+  ${Item}:last-child {
+    border-radius: 0px 4px 4px 0px;
+  }
+`;
diff --git a/frontend/src/components/common/Radio/Radio.tsx b/frontend/src/components/common/Radio/Radio.tsx
new file mode 100644
index 000000000..d23c61a09
--- /dev/null
+++ b/frontend/src/components/common/Radio/Radio.tsx
@@ -0,0 +1,34 @@
+import React, { FC, useEffect, useState } from 'react';
+
+import * as S from './Radio.styled';
+import { RadioProps } from './types';
+
+export const Radio: FC<RadioProps> = ({ options, onChange, value }) => {
+  const [selectedValue, setSelectedValue] = useState(value);
+
+  useEffect(() => {
+    onChange(value);
+  });
+
+  const handleChange = (v: string) => {
+    setSelectedValue(v);
+    onChange(v);
+  };
+
+  return (
+    <S.Container>
+      {options.map((option) => (
+        <S.Item
+          key={option.value}
+          onClick={() => handleChange(option.value)}
+          $isActive={selectedValue === option.value}
+          $itemType={option.itemType || 'gray'}
+        >
+          {option.value}
+        </S.Item>
+      ))}
+    </S.Container>
+  );
+};
+
+export default Radio;
diff --git a/frontend/src/components/common/Radio/types.ts b/frontend/src/components/common/Radio/types.ts
new file mode 100644
index 000000000..c05347ee0
--- /dev/null
+++ b/frontend/src/components/common/Radio/types.ts
@@ -0,0 +1,24 @@
+import { PropsWithChildren } from 'react';
+import { ThemeType } from 'theme/theme';
+
+export type ActiveState = {
+  background: string;
+  color: string;
+};
+export type RadioItemType = keyof ThemeType['acl']['create']['radioButtons'];
+
+export type RadioOption = {
+  value: string;
+  itemType?: RadioItemType;
+};
+
+export interface RadioProps extends PropsWithChildren {
+  value: string;
+  options: ReadonlyArray<RadioOption>;
+  onChange: (value: string) => void;
+}
+
+export interface ControlledRadioProps {
+  name: string;
+  options: ReadonlyArray<RadioOption>;
+}
diff --git a/frontend/src/components/common/Select/ControlledSelect.tsx b/frontend/src/components/common/Select/ControlledSelect.tsx
index 54174fd4c..a34782652 100644
--- a/frontend/src/components/common/Select/ControlledSelect.tsx
+++ b/frontend/src/components/common/Select/ControlledSelect.tsx
@@ -8,7 +8,7 @@ import Select, { SelectOption } from './Select';
 
 interface ControlledSelectProps<T> {
   name: string;
-  label: React.ReactNode;
+  label?: React.ReactNode;
   hint?: string;
   options: SelectOption<T>[];
   onChange?: (val: T) => void;
@@ -28,7 +28,7 @@ const ControlledSelect = <T,>({
 
   return (
     <div>
-      <InputLabel htmlFor={id}>{label}</InputLabel>
+      {label && <InputLabel htmlFor={id}>{label}</InputLabel>}
       <Controller
         name={name}
         render={({ field }) => {
diff --git a/frontend/src/lib/__test__/isRegex.spec.ts b/frontend/src/lib/__test__/isRegex.spec.ts
new file mode 100644
index 000000000..02b16d5c8
--- /dev/null
+++ b/frontend/src/lib/__test__/isRegex.spec.ts
@@ -0,0 +1,17 @@
+import isRegex from 'lib/isRegex';
+
+describe('isValidRegexp', () => {
+  describe('returns true when', () => {
+    const table = ['foo/', 'foo+', 'foo[]', 'foo*'];
+    test.each(table)('got %s', (str) => {
+      expect(isRegex(str)).toBe(true);
+    });
+  });
+
+  describe('returns false when', () => {
+    it('got simple string', () => {
+      const expected = isRegex('simple string');
+      expect(expected).toBeFalsy();
+    });
+  });
+});
diff --git a/frontend/src/lib/hooks/api/acl.ts b/frontend/src/lib/hooks/api/acl.ts
index da6a463ff..498b34191 100644
--- a/frontend/src/lib/hooks/api/acl.ts
+++ b/frontend/src/lib/hooks/api/acl.ts
@@ -1,8 +1,18 @@
 import { aclApiClient as api } from 'lib/api';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+  QueryClient,
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from '@tanstack/react-query';
 import { ClusterName } from 'redux/interfaces';
 import { showSuccessAlert } from 'lib/errorHandling';
-import { KafkaAcl } from 'generated-sources';
+import {
+  CreateConsumerAcl,
+  CreateProducerAcl,
+  CreateStreamAppAcl,
+  KafkaAcl,
+} from 'generated-sources';
 
 export function useAcls(clusterName: ClusterName) {
   return useQuery(
@@ -14,29 +24,100 @@ export function useAcls(clusterName: ClusterName) {
   );
 }
 
-export function useCreateAclMutation(clusterName: ClusterName) {
-  return useMutation(
-    (data: KafkaAcl) =>
+const onCreateAclSuccess = (queryClient: QueryClient, clusterName: string) => {
+  showSuccessAlert({
+    message: 'Your ACL was created successfully',
+  });
+  queryClient.invalidateQueries(['clusters', clusterName, 'acls']);
+};
+
+export function useCreateCustomAcl(clusterName: ClusterName) {
+  const queryClient = useQueryClient();
+  const mutate = useMutation(
+    (kafkaAcl: KafkaAcl) =>
       api.createAcl({
         clusterName,
-        kafkaAcl: data,
+        kafkaAcl,
       }),
     {
       onSuccess() {
-        showSuccessAlert({
-          message: 'Your ACL was created successfully',
-        });
+        onCreateAclSuccess(queryClient, clusterName);
       },
     }
   );
+
+  return {
+    createResource: async (acl: KafkaAcl) => {
+      return mutate.mutateAsync(acl);
+    },
+    ...mutate,
+  };
 }
 
-export function useCreateAcl(clusterName: ClusterName) {
-  const mutate = useCreateAclMutation(clusterName);
+export function useCreateConsumersAcl(clusterName: ClusterName) {
+  const queryClient = useQueryClient();
+  const mutate = useMutation(
+    (createConsumerAcl: CreateConsumerAcl) =>
+      api.createConsumerAcl({
+        clusterName,
+        createConsumerAcl,
+      }),
+    {
+      onSuccess() {
+        onCreateAclSuccess(queryClient, clusterName);
+      },
+    }
+  );
 
   return {
-    createResource: async (param: KafkaAcl) => {
-      return mutate.mutateAsync(param);
+    createResource: async (acl: CreateConsumerAcl) => {
+      return mutate.mutateAsync(acl);
+    },
+    ...mutate,
+  };
+}
+
+export function useCreateProducerAcl(clusterName: ClusterName) {
+  const queryClient = useQueryClient();
+  const mutate = useMutation(
+    (createProducerAcl: CreateProducerAcl) =>
+      api.createProducerAcl({
+        clusterName,
+        createProducerAcl,
+      }),
+    {
+      onSuccess() {
+        onCreateAclSuccess(queryClient, clusterName);
+      },
+    }
+  );
+
+  return {
+    createResource: async (acl: CreateProducerAcl) => {
+      return mutate.mutateAsync(acl);
+    },
+    ...mutate,
+  };
+}
+
+export function useCreateStreamAppAcl(clusterName: ClusterName) {
+  const queryClient = useQueryClient();
+  const mutate = useMutation(
+    (createStreamAppAcl: CreateStreamAppAcl) =>
+      api.createStreamAppAcl({
+        clusterName,
+        createStreamAppAcl,
+      }),
+    {
+      onSuccess() {
+        onCreateAclSuccess(queryClient, clusterName);
+      },
+    }
+  );
+
+  return {
+    createResource: async (acl: CreateStreamAppAcl) => {
+      return mutate.mutateAsync(acl);
     },
     ...mutate,
   };
diff --git a/frontend/src/lib/isRegex.ts b/frontend/src/lib/isRegex.ts
new file mode 100644
index 000000000..0c65bf604
--- /dev/null
+++ b/frontend/src/lib/isRegex.ts
@@ -0,0 +1,11 @@
+function isRegex(value: string): boolean {
+  try {
+    const PATTERN = /\*|\(|\)|\[|\]|\[|\]|\?|\+|\||\//gm;
+
+    return PATTERN.test(value);
+  } catch (e) {
+    return false;
+  }
+}
+
+export default isRegex;
diff --git a/frontend/src/theme/theme.ts b/frontend/src/theme/theme.ts
index 9bbd57fcb..ba1cc357f 100644
--- a/frontend/src/theme/theme.ts
+++ b/frontend/src/theme/theme.ts
@@ -126,6 +126,10 @@ const baseTheme = {
     backgroundColor: Colors.neutral[5],
     color: Colors.red[55],
   },
+  checkbox: {
+    label: Colors.neutral[50],
+    hint: Colors.neutral[50],
+  },
   layout: {
     minWidth: '1200px',
     navBarWidth: '201px',
@@ -718,31 +722,53 @@ export const theme = {
           normal: {
             background: Colors.neutral[0],
             text: Colors.neutral[50],
+            border: Colors.neutral[10],
           },
           active: {
             background: Colors.green[50],
             text: Colors.neutral[0],
+            border: Colors.green[50],
           },
           hover: {
-            background: Colors.green[10],
-            text: Colors.neutral[90],
+            background: Colors.green[50],
+            text: Colors.neutral[0],
+            border: Colors.green[50],
           },
         },
         gray: {
           normal: {
             background: Colors.neutral[0],
             text: Colors.neutral[50],
+            border: Colors.neutral[10],
           },
           active: {
             background: Colors.neutral[10],
             text: Colors.neutral[90],
+            border: Colors.neutral[10],
           },
           hover: {
-            background: Colors.neutral[5],
-            text: Colors.neutral[90],
+            background: Colors.neutral[10],
+            text: Colors.neutral[50],
+            border: Colors.neutral[10],
+          },
+        },
+        red: {
+          normal: {
+            background: Colors.neutral[0],
+            text: Colors.neutral[50],
+            border: Colors.neutral[10],
+          },
+          active: {
+            background: Colors.red[50],
+            text: Colors.neutral[0],
+            border: Colors.red[50],
+          },
+          hover: {
+            background: Colors.red[50],
+            text: Colors.neutral[0],
+            border: Colors.red[50],
           },
         },
-        red: {},
       },
     },
   },
@@ -1217,33 +1243,55 @@ export const darkTheme: ThemeType = {
       radioButtons: {
         green: {
           normal: {
-            background: Colors.neutral[0],
+            background: Colors.neutral[90],
             text: Colors.neutral[50],
+            border: Colors.neutral[80],
           },
           active: {
             background: Colors.green[50],
             text: Colors.neutral[0],
+            border: Colors.green[50],
           },
           hover: {
-            background: Colors.green[10],
+            background: Colors.green[50],
             text: Colors.neutral[0],
+            border: Colors.green[50],
           },
         },
         gray: {
           normal: {
-            background: Colors.neutral[0],
+            background: Colors.neutral[90],
             text: Colors.neutral[50],
+            border: Colors.neutral[80],
           },
           active: {
-            background: Colors.neutral[10],
-            text: Colors.neutral[90],
+            background: Colors.neutral[80],
+            text: Colors.neutral[0],
+            border: Colors.neutral[80],
           },
           hover: {
-            background: Colors.neutral[5],
-            text: Colors.neutral[90],
+            background: Colors.neutral[85],
+            text: Colors.neutral[0],
+            border: Colors.neutral[85],
+          },
+        },
+        red: {
+          normal: {
+            background: Colors.neutral[90],
+            text: Colors.neutral[50],
+            border: Colors.neutral[80],
+          },
+          active: {
+            background: Colors.red[50],
+            text: Colors.neutral[0],
+            border: Colors.red[50],
+          },
+          hover: {
+            background: Colors.red[50],
+            text: Colors.neutral[0],
+            border: Colors.red[50],
           },
         },
-        red: {},
       },
     },
   },