chore: Add validation for retention size and time

packages/ui/src/components/Topic/EditTopicProperties/EditTopicProperties.tsx

@@ -1,4 +1,4 @@
-import { PageSection } from "@patternfly/react-core";
+import { PageSection, ValidatedOptions } from "@patternfly/react-core";
 import type { FunctionComponent } from "react";
 import { useState } from "react";
 import type { Topic } from "ui-models/src/models/topic";
@@ -29,6 +29,11 @@ export const EditTopicProperties: FunctionComponent<
   const millisecondsToTimeValue = millisecondsToTime(
     topic["retention.ms"].value
   );
+  const [initialPartitions] = useState<number>(topic.partitions.length);
+  const [retentionTimeValidated, setRetentionTimeValidated] =
+    useState<ValidatedOptions>(ValidatedOptions.default);
+  const [retentionSizeValidated, setRetentionSizeValidated] =
+    useState<ValidatedOptions>(ValidatedOptions.default);
   const bytesToSizeValue = bytesToMemorySize(topic["retention.bytes"].value);
   const [customTimeValue, setCustomTimeValue] = useState<CustomSelect>({
     unit:
@@ -70,19 +75,53 @@ export const EditTopicProperties: FunctionComponent<
 
   const [warningModalOpen, setWarningModalOpen] = useState<boolean>(false);
 
+  const validateRetentionTime = () => {
+    switch (radioTimeSelectValue) {
+      case "custom":
+        return customTimeValue.value == 0 ? false : true;
+      default:
+        return true;
+    }
+  };
+  const validateRetentionSize = () => {
+    switch (radioSizeSelectValue) {
+      case "custom":
+        return customRetentionSizeValue.value == 0 ? false : true;
+      default:
+        return true;
+    }
+  };
+
   const onConfirmSave = () => {
-    if (partitions >= availablePartitionLimit) setWarningModalOpen(true);
-    else onTransform();
+    const isRetentionTimeValid = validateRetentionTime();
+    const isRetentionSizeValid = validateRetentionSize();
+    if (!isRetentionTimeValid)
+      setRetentionTimeValidated(ValidatedOptions.error);
+    if (!isRetentionSizeValid)
+      setRetentionSizeValidated(ValidatedOptions.error);
+    if (
+      isRetentionTimeValid &&
+      isRetentionSizeValid &&
+      partitions > initialPartitions
+    )
+      setWarningModalOpen(true);
+    else if (isRetentionTimeValid && isRetentionSizeValid) onTransform();
   };
 
+  const retentionTimeTransform: CustomSelect =
+    radioTimeSelectValue == "unlimited"
+      ? { value: -1, unit: "unlimited" }
+      : radioTimeSelectValue == "day"
+      ? { value: 1, unit: "days" }
+      : radioTimeSelectValue == "week"
+      ? { value: 1, unit: "weeks" }
+      : customTimeValue;
+
   const onTransform = () => {
     const topicValues: TopicForm = {
       name: topicName,
       partitions: partitions,
-      retentionTime:
-        radioTimeSelectValue == "unlimited"
-          ? { value: -1, unit: "unlimited" }
-          : customTimeValue,
+      retentionTime: retentionTimeTransform,
       retentionSize:
         radioSizeSelectValue == "unlimited"
           ? { value: -1, unit: "unlimited" }
@@ -121,6 +160,11 @@ export const EditTopicProperties: FunctionComponent<
         onPartitionsChange={setPartitions}
         cleanupPolicy={cleanupPolicy}
         isSaving={isSaving}
+        retentionTimeValidated={retentionTimeValidated}
+        retentionSizeValidated={retentionSizeValidated}
+        onChangeRetentionSizeValidated={setRetentionSizeValidated}
+        onChangeRetentionTimeValidated={setRetentionTimeValidated}
+        initialPartitions={initialPartitions}
       />
       {warningModalOpen && (
         <PartitionLimitWarning

packages/ui/src/components/Topic/components/CoreConfiguration.tsx

@@ -15,7 +15,6 @@ import {
   useTranslation,
 } from "@rhoas/app-services-ui-components";
 import type { FunctionComponent } from "react";
-import { useState } from "react";
 import { useCallback } from "react";
 import type { Topic } from "ui-models/src/models/topic";
 import { CustomRetentionMessage } from "./CustomRetentionMessage";
@@ -51,6 +50,11 @@ export type CoreConfigurationProps = {
   setTopicName: (value: string) => void;
   partitions: number;
   setPartitions: (value: number) => void;
+  retentionTimeValidated: ValidatedOptions;
+  retentionSizeValidated: ValidatedOptions;
+  onChangeRetentionSizeValidated: (value: ValidatedOptions) => void;
+  onChangeRetentionTimeValidated: (value: ValidatedOptions) => void;
+  initialPartitions: number;
 };
 
 const CoreConfiguration: FunctionComponent<CoreConfigurationProps> = ({
@@ -73,9 +77,14 @@ const CoreConfiguration: FunctionComponent<CoreConfigurationProps> = ({
   setPartitions,
   setTopicName,
   partitions,
+  retentionSizeValidated,
+  retentionTimeValidated,
+  onChangeRetentionSizeValidated,
+  onChangeRetentionTimeValidated,
+  initialPartitions,
 }) => {
   const { t } = useTranslation(["create-topic"]);
-  const [initialPartitions] = useState<number>(topicData.partitions.length);
+
   const { validateName } = useValidateTopic();
   const validationCheck = useCallback(
     (value: string) => {
@@ -128,6 +137,8 @@ const CoreConfiguration: FunctionComponent<CoreConfigurationProps> = ({
       customTimeValue={customTimeValue}
       setCustomTimeValue={setCustomTimeValue}
       setRadioTimeSelectValue={setRadioTimeSelectValue}
+      retentionTimeValidated={retentionTimeValidated}
+      onChangeRetentionTimeValidated={onChangeRetentionTimeValidated}
     />
   );
 
@@ -136,6 +147,8 @@ const CoreConfiguration: FunctionComponent<CoreConfigurationProps> = ({
       customRetentionSizeValue={customRetentionSizeValue}
       setCustomRetentionSizeValue={setCustomRetentionSizeValue}
       setRadioSizeSelectValue={setRadioSizeSelectValue}
+      retentionSizeValidated={retentionSizeValidated}
+      onChangeRetentionSizeValidated={onChangeRetentionSizeValidated}
     />
   );
 

packages/ui/src/components/Topic/components/CreateTopicWizard.tsx

@@ -72,9 +72,12 @@ export const CreateTopicWizard: React.FC<CreateTopicWizardProps> = ({
   );
   const [topicNameValidated, setTopicNameValidated] =
     useState<ValidatedOptions>(ValidatedOptions.default);
+  const [retentionTimeValidated, setRetentionTimeValidated] =
+    useState<ValidatedOptions>(ValidatedOptions.default);
+  const [retentionSizeValidated, setRetentionSizeValidated] =
+    useState<ValidatedOptions>(ValidatedOptions.default);
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [invalidText, setInvalidText] = useState<string>("");
-  //const [topicData] = useState<Topic>(initialFieldsValue);
   const [warningModalOpen, setWarningModalOpen] = useState<boolean>(false);
   const [radioTimeSelectValue, setRadioTimeSelectValue] =
     useState<RadioSelectType>("week");
@@ -130,6 +133,10 @@ export const CreateTopicWizard: React.FC<CreateTopicWizardProps> = ({
           setRadioTimeSelectValue={setRadioTimeSelectValue}
           radioSizeSelectValue={radioSizeSelectValue}
           setRadioSizeSelectValue={setRadioSizeSelectValue}
+          retentionSizeValidated={retentionSizeValidated}
+          retentionTimeValidated={retentionTimeValidated}
+          onChangeRetentionSizeValidated={setRetentionSizeValidated}
+          onChangeRetentionTimeValidated={setRetentionTimeValidated}
         />
       ),
       isDisabled: isSaving,
@@ -150,14 +157,20 @@ export const CreateTopicWizard: React.FC<CreateTopicWizardProps> = ({
 
   const title = t("wizard_title");
 
+  const retentionTimeTransform: CustomSelect =
+    radioTimeSelectValue == "unlimited"
+      ? { value: -1, unit: "unlimited" }
+      : radioTimeSelectValue == "day"
+      ? { value: 1, unit: "days" }
+      : radioTimeSelectValue == "week"
+      ? { value: 1, unit: "weeks" }
+      : customTimeValue;
+
   const onTransform = () => {
     const topicValues: TopicForm = {
       name: topicName,
       partitions: partitions,
-      retentionTime:
-        radioTimeSelectValue == "unlimited"
-          ? { value: -1, unit: "unlimited" }
-          : customTimeValue,
+      retentionTime: retentionTimeTransform,
       retentionSize:
         radioSizeSelectValue == "unlimited"
           ? { value: -1, unit: "unlimited" }
@@ -169,8 +182,19 @@ export const CreateTopicWizard: React.FC<CreateTopicWizardProps> = ({
   };
 
   const onConfirmSave = () => {
-    if (partitions >= availablePartitionLimit) setWarningModalOpen(true);
-    else onTransform();
+    const isRetentionTimeValid = validateRetentionTime();
+    const isRetentionSizeValid = validateRetentionSize();
+    if (!isRetentionTimeValid)
+      setRetentionTimeValidated(ValidatedOptions.error);
+    if (!isRetentionSizeValid)
+      setRetentionSizeValidated(ValidatedOptions.error);
+    if (
+      isRetentionTimeValid &&
+      isRetentionSizeValid &&
+      partitions >= availablePartitionLimit
+    )
+      setWarningModalOpen(true);
+    else if (isRetentionTimeValid && isRetentionSizeValid) onTransform();
   };
 
   const onValidate: IWizardFooter["onValidate"] = (onNext) => {
@@ -188,6 +212,31 @@ export const CreateTopicWizard: React.FC<CreateTopicWizardProps> = ({
       } else onNext();
     }
   };
+  const validateRetentionTime = () => {
+    switch (radioTimeSelectValue) {
+      case "custom":
+        return customTimeValue.value == 0 ? false : true;
+      default:
+        return true;
+    }
+  };
+  const validateRetentionSize = () => {
+    switch (radioSizeSelectValue) {
+      case "custom":
+        return customRetentionSizeValue.value == 0 ? false : true;
+      default:
+        return true;
+    }
+  };
+  const onValidateRetentionValues: IWizardFooter["onValidate"] = (onNext) => {
+    const isRetentionTimeValid = validateRetentionTime();
+    const isRetentionSizeValid = validateRetentionSize();
+    if (isRetentionTimeValid && isRetentionSizeValid) onNext();
+    if (!isRetentionTimeValid)
+      setRetentionTimeValidated(ValidatedOptions.error);
+    if (!isRetentionSizeValid)
+      setRetentionSizeValidated(ValidatedOptions.error);
+  };
 
   return (
     <>
@@ -223,6 +272,11 @@ export const CreateTopicWizard: React.FC<CreateTopicWizardProps> = ({
                 setRadioSizeSelectValue={setRadioSizeSelectValue}
                 topicData={topicData}
                 isSaving={isSaving}
+                retentionSizeValidated={retentionSizeValidated}
+                retentionTimeValidated={retentionTimeValidated}
+                onChangeRetentionSizeValidated={setRetentionSizeValidated}
+                onChangeRetentionTimeValidated={setRetentionTimeValidated}
+                initialPartitions={1}
               />
             }
             {warningModalOpen && (
@@ -257,6 +311,11 @@ export const CreateTopicWizard: React.FC<CreateTopicWizardProps> = ({
                 topicNameValidated={topicNameValidated}
                 closeWizard={closeWizard}
                 isSaving={isSaving}
+                onValidateRetentionValues={onValidateRetentionValues}
+                retentionSizeValidated={retentionSizeValidated}
+                retentionTimeValidated={retentionTimeValidated}
+                radioTimeSelectValue={radioTimeSelectValue}
+                radioSizeSelectValue={radioSizeSelectValue}
               />
             }
           />

packages/ui/src/components/Topic/components/CustomRetentionMessage.tsx

@@ -1,7 +1,9 @@
 import type { SelectProps } from "@patternfly/react-core";
+import { FormGroup } from "@patternfly/react-core";
 import { TextInput } from "@patternfly/react-core";
 import {
   Flex,
+  ValidatedOptions,
   FlexItem,
   Select,
   SelectOption,
@@ -10,20 +12,26 @@ import {
 import type React from "react";
 import { useState } from "react";
 import type { CustomSelect, TimeUnit, RadioSelectType } from "./types";
+import { useTranslation } from "@rhoas/app-services-ui-components";
 import { retentionTimeSelectOptions } from "./types";
 
 export type CustomRetentionMessageProps = {
   id?: string;
   customTimeValue: CustomSelect;
   setCustomTimeValue: (data: CustomSelect) => void;
   setRadioTimeSelectValue?: (value: RadioSelectType) => void;
+  retentionTimeValidated: ValidatedOptions;
+  onChangeRetentionTimeValidated: (value: ValidatedOptions) => void;
 };
 
 const CustomRetentionMessage: React.FC<CustomRetentionMessageProps> = ({
   customTimeValue,
   setCustomTimeValue,
   setRadioTimeSelectValue,
+  retentionTimeValidated,
+  onChangeRetentionTimeValidated,
 }) => {
+  const { t } = useTranslation(["create-topic"]);
   const [isRetentionTimeSelectOpen, setIsRetentionTimeSelectOpen] =
     useState<boolean>(false);
 
@@ -32,12 +40,12 @@ const CustomRetentionMessage: React.FC<CustomRetentionMessageProps> = ({
   };
 
   const onSelect: SelectProps["onSelect"] = (event, value) => {
+    onChangeRetentionTimeValidated(ValidatedOptions.default);
     const inputUnit: CustomSelect = {
       unit: value as TimeUnit,
       value: 1,
     };
     setCustomTimeValue(inputUnit);
-
     onRetentionTimeToggle(false);
   };
 
@@ -46,7 +54,10 @@ const CustomRetentionMessage: React.FC<CustomRetentionMessageProps> = ({
       ...customTimeValue,
       value: Number(input),
     };
-    if (inputValue.value > -1) setCustomTimeValue(inputValue);
+    if (inputValue.value > -1) {
+      onChangeRetentionTimeValidated(ValidatedOptions.default);
+      setCustomTimeValue(inputValue);
+    }
     setRadioTimeSelectValue && setRadioTimeSelectValue("custom");
   };
 
@@ -75,13 +86,19 @@ const CustomRetentionMessage: React.FC<CustomRetentionMessageProps> = ({
           </Select>
         </FlexItem>
         <FlexItem>
-          <TextInput
-            aria-label={"Retention time"}
-            type="number"
-            value={customTimeValue.value == 0 ? "" : customTimeValue.value}
-            onChange={onChange}
-            min={1}
-          />
+          <FormGroup
+            helperTextInvalid={t("common:required")}
+            validated={retentionTimeValidated}
+          >
+            <TextInput
+              aria-label={"Retention time"}
+              type="number"
+              value={customTimeValue.value == 0 ? "" : customTimeValue.value}
+              onChange={onChange}
+              min={1}
+              validated={retentionTimeValidated}
+            />
+          </FormGroup>
         </FlexItem>
       </Flex>
     </div>