Improve the labels of Inter-Service Relation input fields (Issue #5922,…

… PR #5974)

# Description

Adjusted the labels of the inter-service relation input field to display the attribute name. I added the service entity type in the placeholder, and made the placeholder plural in case it's a multi-select combobox.

closes #5922

changelogs/unreleased/5922-improve-label-interServiceRelation.yml

@@ -0,0 +1,6 @@
+description: "Improve the labels of Inter-Service Relation input fields"
+issue-nr: 5922
+change-type: patch
+destination-branches: [master]
+sections:
+  minor-improvement: "{{description}}"

src/Slices/CreateInstance/UI/CreateInstance.test.tsx

@@ -159,7 +159,7 @@ test("Given the CreateInstance View When creating an instance with Inter-service
   });
 
   const relationInputField = screen.getByPlaceholderText(
-    words("common.serviceInstance.relation"),
+    words("common.serviceInstance.relations")("test_entity"),
   );
 
   await act(async () => {
@@ -224,7 +224,7 @@ test("Given the CreateInstance View When creating an instance with Inter-service
   });
 
   const relationInputField = screen.getByPlaceholderText(
-    words("common.serviceInstance.relation"),
+    words("common.serviceInstance.relations")("test_entity"),
   );
 
   await act(async () => {
@@ -281,7 +281,7 @@ test("Given the CreateInstance View When creating an instance with Inter-service
   });
 
   const relationInputField = screen.getByPlaceholderText(
-    words("common.serviceInstance.relation"),
+    words("common.serviceInstance.relations")("test_entity"),
   );
 
   await act(async () => {

src/UI/Components/ServiceInstanceForm/Components/AutoCompleteInput.tsx

@@ -74,7 +74,7 @@ export const AutoCompleteInput: React.FC<Props> = ({
       {...props}
       isRequired={!isOptional}
       fieldId={attributeName}
-      label={`An instance of ${serviceEntity}`}
+      label={attributeName}
       aria-label={`${attributeName}-select-input`}
     >
       {multi ? (
@@ -84,7 +84,9 @@ export const AutoCompleteInput: React.FC<Props> = ({
           isDisabled={shouldBeDisabled}
           setSelected={handleInputChange}
           selected={selected as string[]}
-          placeholderText={words("common.serviceInstance.relation")}
+          placeholderText={words("common.serviceInstance.relations")(
+            serviceEntity,
+          )}
           onSearchTextChanged={onSearchTextChanged}
           hasChips
         />
@@ -95,7 +97,9 @@ export const AutoCompleteInput: React.FC<Props> = ({
           isDisabled={shouldBeDisabled}
           setSelected={handleInputChange}
           selected={selected as string | null}
-          placeholderText={words("common.serviceInstance.relation")}
+          placeholderText={words("common.serviceInstance.relation")(
+            serviceEntity,
+          )}
           onSearchTextChanged={onSearchTextChanged}
         />
       )}

src/UI/words.tsx

@@ -792,7 +792,10 @@ const dict = {
    */
   "common.serviceInstance.select": (attribute: string) =>
     `Select value for ${attribute}`,
-  "common.serviceInstance.relation": `Select an instance`,
+  "common.serviceInstance.relation": (serviceEntity: string) =>
+    `Select an instance of ${serviceEntity}`,
+  "common.serviceInstance.relations": (serviceEntity: string) =>
+    `Select instances of ${serviceEntity}`,
   "common.environment.select": "Select an environment",
   "common.compileWidget.recompile": "Recompile",
   "common.compileWidget.toast": (update: boolean) =>