feat: Allow users to setup serveraddress

Users can set a `serveraddress` for an image credential

Signed-off-by: Luca Zaninotto <luca.zaninotto@secomind.com>

Author: lusergit

frontend/src/components/ImageCredentialsTable.test.tsx

@@ -63,6 +63,7 @@ const data: Data = {
 const labels = {
   label: "Label",
   username: "Username",
+  serveraddress: "Server Address",
 };
 
 const ComponentWithQuery = () => {
@@ -128,12 +129,15 @@ it("renders Image Credentials data in correct columns", () => {
   const columns = screen.getAllByRole("columnheader");
   const cells = screen.getAllByRole("cell");
 
-  expect(columns).toHaveLength(2);
-  expect(cells).toHaveLength(2);
+  expect(columns).toHaveLength(3);
+  expect(cells).toHaveLength(3);
 
   expect(columns[0]).toHaveTextContent(labels.label);
   expect(cells[0]).toHaveTextContent(record.node.label);
 
   expect(columns[1]).toHaveTextContent(labels.username);
   expect(cells[1]).toHaveTextContent(record.node.username);
+
+  expect(columns[2]).toHaveTextContent(labels.serveraddress);
+  expect(cells[2]).toHaveTextContent("");
 });

frontend/src/components/ImageCredentialsTable.tsx

@@ -47,6 +47,7 @@ const IMAGE_CREDENTIALS_FRAGMENT = graphql`
           id
           label
           username
+          serveraddress
         }
       }
     }
@@ -88,6 +89,15 @@ const columns = [
     ),
     cell: ({ getValue }) => <span className="text-nowrap">{getValue()}</span>,
   }),
+  columnHelper.accessor("serveraddress", {
+    header: () => (
+      <FormattedMessage
+        id="components.ImageCredentialsTable.serveraddressTitle"
+        defaultMessage="Server Address"
+      />
+    ),
+    cell: ({ getValue }) => <span className="text-nowrap">{getValue()}</span>,
+  }),
 ];
 
 type ImageCredentialsTableProps = {

frontend/src/forms/CreateImageCredential.tsx

@@ -39,6 +39,7 @@ const initialData: ImageCredentialFormData = {
   label: "",
   username: "",
   password: "",
+  serveraddress: "",
 };
 
 interface Props {
@@ -147,6 +148,27 @@ const CreateImageCredential = ({ isLoading = false, onSubmit }: Props) => {
           </InputGroup>
         </FormRow>
 
+        <FormRow
+          id="image-credential-form-serveraddress"
+          label={
+            <FormattedMessage
+              id="components.CreateImageCredentialForm.ServeraddressLabel"
+              defaultMessage="Server Address"
+            />
+          }
+        >
+          <Form.Control
+            {...register("serveraddress")}
+            autoComplete="off"
+            isInvalid={!!errors.serveraddress}
+          />
+          <Form.Control.Feedback type="invalid">
+            {errors.serveraddress?.message && (
+              <FormattedMessage id={errors.serveraddress?.message} />
+            )}
+          </Form.Control.Feedback>
+        </FormRow>
+
         <div className="d-flex justify-content-end align-items-center">
           <Button variant="primary" type="submit" disabled={isLoading}>
             {isLoading && <Spinner size="sm" className="me-2" />}

frontend/src/forms/UpdateImageCredential.tsx

@@ -39,6 +39,7 @@ const IMAGE_CREDENTIAL_FRAGMENT = graphql`
     id
     label
     username
+    serveraddress
   }
 `;
 
@@ -49,7 +50,7 @@ interface Props {
 }
 
 const UpdateImageCredentialForm = ({ imageCredentialRef, onDelete }: Props) => {
-  const { id, label, username } = useFragment(
+  const { id, label, username, serveraddress } = useFragment(
     IMAGE_CREDENTIAL_FRAGMENT,
     imageCredentialRef,
   );
@@ -59,8 +60,9 @@ const UpdateImageCredentialForm = ({ imageCredentialRef, onDelete }: Props) => {
       id,
       label,
       username,
+      serveraddress,
     }),
-    [id, label, username],
+    [id, label, username, serveraddress],
   );
 
   const {
@@ -116,6 +118,27 @@ const UpdateImageCredentialForm = ({ imageCredentialRef, onDelete }: Props) => {
             )}
           </Form.Control.Feedback>
         </FormRow>
+        <FormRow
+          id="image-credential-form-serveraddress"
+          label={
+            <FormattedMessage
+              id="forms.UpdateImageCredential.ServeraddressLabel"
+              defaultMessage="Server Address"
+            />
+          }
+        >
+          <Form.Control
+            {...register("serveraddress")}
+            readOnly
+            isInvalid={!!errors.serveraddress}
+          />
+
+          <Form.Control.Feedback type="invalid">
+            {errors.serveraddress?.message && (
+              <FormattedMessage id={errors.serveraddress?.message} />
+            )}
+          </Form.Control.Feedback>
+        </FormRow>
         <Stack
           direction="horizontal"
           gap={3}

frontend/src/i18n/langs/en.json

@@ -454,6 +454,9 @@
   "components.CreateHardwareTypeForm.submitButton": {
     "defaultMessage": "Create"
   },
+  "components.CreateImageCredentialForm.ServeraddressLabel": {
+    "defaultMessage": "Server Address"
+  },
   "components.CreateImageCredentialForm.labelLabel": {
     "defaultMessage": "Label"
   },
@@ -939,6 +942,9 @@
   "components.ImageCredentialsTable.labelTitle": {
     "defaultMessage": "Label"
   },
+  "components.ImageCredentialsTable.serveraddressTitle": {
+    "defaultMessage": "Server Address"
+  },
   "components.ImageCredentialsTable.usernameTitle": {
     "defaultMessage": "Username"
   },
@@ -2166,6 +2172,9 @@
   "forms.UpdateHardwareType.submitButton": {
     "defaultMessage": "Update"
   },
+  "forms.UpdateImageCredential.ServeraddressLabel": {
+    "defaultMessage": "Server Address"
+  },
   "forms.UpdateImageCredential.deleteButton": {
     "defaultMessage": "Delete"
   },