Repository: provectus/kafka-ui
Issue: [FE] Fix cleanup policy submit/display
Labels: type/bug
scope/frontend
status/accepted
status/confirmed

**Describe the bug**
All of our topics have a custom retention.ms (usually 1h-10h). When using this UI to edit topic settings, the UI always shows cluster default for retention.ms (604800000), which we need to remember to set to correct value (even if this field not supposed to change).


**Set up**
1. Running current stable release (0.4.0) as docker-compose service


**Steps to Reproduce**
Steps to reproduce the behavior:

1. Create topic with retention.ms different from cluster default
2. Go to edit topic settings
3. Check the retention.ms field value

**Expected behavior**
Expected behavior -- the field always show the retention.ms of the topic correctly.

**Actual behavior**
The field always show cluster default value.

**Screenshots**

![Screenshot from 2022-11-07 14-05-32](https://user-images.githubusercontent.com/985805/200218070-2eabd56f-4ee2-4b44-aede-fd8386b7b021.png)
![Screenshot from 2022-11-07 14-05-14](https://user-images.githubusercontent.com/985805/200218073-3bb3417b-03c7-47cf-88de-f41d5cc126c6.png)

**Note**
After more testing, same behavior is for `max.message.bytes`, `min.insync.replicas` and `cleanup.policy`. Which makes it seems that all non "custom parameters" behave like this.

Issue comments:
For context -- we had an outage where the topic config was edited, but the person did not notice that this field was showing value different from the one was actually intended for the topic (because they were editing a different parameter), therefore on "save" topic retention.ms was changed from 60s to 7d.
Hey Alex,

could you check if that's still an issue on `master`-labeled image? I think we've done fixing something like this previously. 
Thanks.
@Haarolean Yes this appears to be fixed at [fce4c23](https://github.com/provectus/kafka-ui/commit/fce4c23276ebd798f182a2af7150cabffb2d63db).

Can this please be backported to 0.4.x. We can't use unstable version in our production environment and current stable release can easily cause outage (also it's been 6 months since last release, and I guess the changes coming in new version are large, hence I don't know when is the new stable release going to land).
@akamensky hey, I can build a new image just for you, since we don't have workflows to do a minor release branch.
The new release is gonna be out soon (once we're done with #753 frontend and testing)

@Haarolean BTW, we found an issue with the fix. In the form it will show correct value (i.e. cleanup.policy == compact), but when submitting form it will submit "default" value there. It works if manually select correct value in field, if don't touch it even it shows correct value the one that goes to server may break things.
@akamensky thanks, we'll investigate.

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Edit/topicParamsTransformer.ts b/kafka-ui-react-app/src/components/Topics/Topic/Edit/topicParamsTransformer.ts
index e60faf11ccb..910f31a5fd2 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Edit/topicParamsTransformer.ts
+++ b/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),
diff --git a/kafka-ui-react-app/src/components/Topics/shared/Form/TopicForm.tsx b/kafka-ui-react-app/src/components/Topics/shared/Form/TopicForm.tsx
index a44aa266f77..15f60eaaac2 100644
--- a/kafka-ui-react-app/src/components/Topics/shared/Form/TopicForm.tsx
+++ b/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>


Test patch: