fix(coral): Add more explicit UI instead of empty space for topic name

Signed-off-by: Mathieu Anderson <mathieu.anderson@aiven.io>

coral/src/app/features/topics/acl-request/fields/TopicNameOrPrefixField.test.tsx

@@ -25,6 +25,26 @@ describe("TopicNameOrPrefixField", () => {
     onError.mockClear();
   });
 
+  it("renders a readonly field with information when no pattern type is chosen", () => {
+    const result = renderForm(
+      <TopicNameOrPrefixField
+        topicNames={mockedTopicNames}
+        aclPatternType={undefined}
+      />,
+      {
+        schema: producerSchema,
+        onSubmit,
+        onError,
+      }
+    );
+    const field = result.getByRole("textbox");
+    expect(field).toBeVisible();
+    expect(field).toHaveAttribute("readonly");
+    expect(field).toHaveValue(
+      "Select environment and topic pattern type first"
+    );
+  });
+
   it("renders a TopicNameField (producer form)", () => {
     const result = renderForm(
       <TopicNameOrPrefixField

coral/src/app/features/topics/acl-request/fields/TopicNameOrPrefixField.tsx

@@ -4,7 +4,7 @@ import { CreateAclRequestTopicTypeProducer } from "src/domain/acl";
 
 interface TopicNameOrPrefixFieldProps {
   topicNames: string[];
-  aclPatternType: CreateAclRequestTopicTypeProducer["aclPatternType"];
+  aclPatternType?: CreateAclRequestTopicTypeProducer["aclPatternType"];
   readOnly?: boolean;
 }
 
@@ -17,7 +17,18 @@ const TopicNameOrPrefixField = ({
     return <TopicNameField topicNames={topicNames} readOnly={readOnly} />;
   }
 
-  return <TextInput name="topicname" labelText="Prefix" required />;
+  if (aclPatternType === "PREFIXED") {
+    return <TextInput name="topicname" labelText="Prefix" required />;
+  }
+
+  return (
+    <TextInput
+      name="topicname"
+      labelText="Topic name or prefix"
+      defaultValue="Select environment and topic pattern type first"
+      readOnly
+    />
+  );
 };
 
 export default TopicNameOrPrefixField;