[FE] Fix cleanup policy submit/display (#3067)

* TopicForm CleanupPolicy default value clash in the edit page

* minor code import modification in topicsParamsTransformer

Co-authored-by: Roman Zabaluev <rzabaluev@provectus.com>

Author: Mgrdich

kafka-ui-react-app/src/components/Topics/Topic/Edit/topicParamsTransformer.ts

@@ -4,6 +4,7 @@ import {
   TOPIC_CUSTOM_PARAMS_PREFIX,
 } from 'lib/constants';
 import { TOPIC_EDIT_FORM_DEFAULT_PROPS } from 'components/Topics/Topic/Edit/Edit';
+import { getCleanUpPolicyValue } from 'components/Topics/shared/Form/TopicForm';
 import { Topic, TopicConfig } from 'generated-sources';
 
 export const getValue = (
@@ -30,6 +31,9 @@ const topicParamsTransformer = (topic?: Topic, config?: TopicConfig[]) => {
     replicationFactor: topic.replicationFactor,
     partitions:
       topic.partitionCount || TOPIC_EDIT_FORM_DEFAULT_PROPS.partitions,
+    cleanupPolicy:
+      getCleanUpPolicyValue(topic.cleanUpPolicy) ||
+      TOPIC_EDIT_FORM_DEFAULT_PROPS.cleanupPolicy,
     maxMessageBytes: getValue(config, 'max.message.bytes', 1000012),
     minInSyncReplicas: getValue(config, 'min.insync.replicas', 1),
     retentionBytes: getValue(config, 'retention.bytes', -1),

kafka-ui-react-app/src/components/Topics/shared/Form/TopicForm.tsx

@@ -36,6 +36,17 @@ const CleanupPolicyOptions: Array<SelectOption> = [
   { value: 'compact,delete', label: 'Compact,Delete' },
 ];
 
+export const getCleanUpPolicyValue = (cleanUpPolicy?: string) => {
+  if (!cleanUpPolicy) return undefined;
+
+  return CleanupPolicyOptions.find((option: SelectOption) => {
+    return (
+      option.value.toString().replace(/,/g, '_') ===
+      cleanUpPolicy?.toLowerCase()
+    );
+  })?.value.toString();
+};
+
 const RetentionBytesOptions: Array<SelectOption> = [
   { value: NOT_SET, label: 'Not Set' },
   { value: BYTES_IN_GB, label: '1 GB' },
@@ -61,12 +72,7 @@ const TopicForm: React.FC<Props> = ({
   const navigate = useNavigate();
   const { clusterName } = useAppParams<{ clusterName: ClusterName }>();
   const getCleanUpPolicy =
-    CleanupPolicyOptions.find((option: SelectOption) => {
-      return (
-        option.value.toString().replace(/,/g, '_') ===
-        cleanUpPolicy?.toLowerCase()
-      );
-    })?.value || CleanupPolicyOptions[0].value;
+    getCleanUpPolicyValue(cleanUpPolicy) || CleanupPolicyOptions[0].value;
 
   const getRetentionBytes =
     RetentionBytesOptions.find((option: SelectOption) => {
@@ -97,8 +103,8 @@ const TopicForm: React.FC<Props> = ({
             </S.NameField>
           </S.Column>
 
-          {!isEditing && (
-            <S.Column>
+          <S.Column>
+            {!isEditing && (
               <div>
                 <InputLabel htmlFor="topicFormNumberOfPartitions">
                   Number of partitions *
@@ -114,32 +120,33 @@ const TopicForm: React.FC<Props> = ({
                   <ErrorMessage errors={errors} name="partitions" />
                 </FormError>
               </div>
-              <div>
-                <InputLabel
-                  id="topicFormCleanupPolicyLabel"
-                  htmlFor="topicFormCleanupPolicy"
-                >
-                  Cleanup policy
-                </InputLabel>
-                <Controller
-                  defaultValue={CleanupPolicyOptions[0].value}
-                  control={control}
-                  name="cleanupPolicy"
-                  render={({ field: { name, onChange } }) => (
-                    <Select
-                      id="topicFormCleanupPolicy"
-                      aria-labelledby="topicFormCleanupPolicyLabel"
-                      name={name}
-                      value={getCleanUpPolicy}
-                      onChange={onChange}
-                      minWidth="250px"
-                      options={CleanupPolicyOptions}
-                    />
-                  )}
-                />
-              </div>
-            </S.Column>
-          )}
+            )}
+
+            <div>
+              <InputLabel
+                id="topicFormCleanupPolicyLabel"
+                htmlFor="topicFormCleanupPolicy"
+              >
+                Cleanup policy
+              </InputLabel>
+              <Controller
+                defaultValue={CleanupPolicyOptions[0].value}
+                control={control}
+                name="cleanupPolicy"
+                render={({ field: { name, onChange } }) => (
+                  <Select
+                    id="topicFormCleanupPolicy"
+                    aria-labelledby="topicFormCleanupPolicyLabel"
+                    name={name}
+                    value={getCleanUpPolicy}
+                    onChange={onChange}
+                    minWidth="250px"
+                    options={CleanupPolicyOptions}
+                  />
+                )}
+              />
+            </div>
+          </S.Column>
         </fieldset>
 
         <S.Column>