Make inputs for websites on listing page URL (#4520)

* Make inputs for websites on listing page URL * Fix URL validation on listing page
canonical · Feb 2, 2024 · 08fd8da · 08fd8da
1 parent f3cb895
commit 08fd8da
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 25 deletions.
diff --git a/static/js/publisher/listing/components/App/App.tsx b/static/js/publisher/listing/components/App/App.tsx
@@ -1,10 +1,6 @@
 import { useState, useEffect } from "react";
 import { useForm } from "react-hook-form";
-import {
-  Form,
-  Strip,
-  Notification
-} from "@canonical/react-components";
+import { Form, Strip, Notification } from "@canonical/react-components";
 
 import {
   getChanges,
@@ -34,10 +30,11 @@ function App() {
 
   const [isSaving, setIsSaving] = useState(false);
   const [hasSaved, setHasSaved] = useState(false);
-  const [savedError, setSavedError] = useState<boolean | {code: string, message: string}[] >(false);
-  const [showMetadataWarningModal, setShowMetadataWarningModal] = useState(
-    false
-  );
+  const [savedError, setSavedError] = useState<
+    boolean | { code: string; message: string }[]
+  >(false);
+  const [showMetadataWarningModal, setShowMetadataWarningModal] =
+    useState(false);
   const [formData, setFormData] = useState({});
   const [updateMetadataOnRelease, setUpdateMetadataOnRelease] = useState(
     listingData?.update_metadata_on_release
@@ -213,8 +210,11 @@ function App() {
                   setSavedError(false);
                 }}
               >
-              Changes have not been saved.<br />
-              {savedError === true ? "Something went wrong." : savedError.map((error) => `${error.message}`).join("\n")}
+                Changes have not been saved.
+                <br />
+                {savedError === true
+                  ? "Something went wrong."
+                  : savedError.map((error) => `${error.message}`).join("\n")}
               </Notification>
             </div>
           )}

diff --git a/static/js/publisher/listing/components/MultipleInputs/MultipleInputs.tsx b/static/js/publisher/listing/components/MultipleInputs/MultipleInputs.tsx
@@ -2,19 +2,31 @@ import React from "react";
 import { useFieldArray } from "react-hook-form";
 import { Row, Col, Button, Icon } from "@canonical/react-components";
 
+import UrlInput from "../UrlInput";
+
 type Props = {
   fieldName: string;
   label: string;
   register: Function;
   control: any;
+  getFieldState: Function;
 };
 
-function MultipleInputs({ fieldName, label, register, control }: Props) {
+function MultipleInputs({
+  fieldName,
+  label,
+  register,
+  control,
+  getFieldState,
+}: Props) {
   const { fields, append, remove } = useFieldArray({
     control,
     name: fieldName,
   });
 
+  const urlFieldNames = ["websites", "donations", "source-code", "issues"];
+  const isUrl = urlFieldNames.includes(fieldName);
+
   return (
     <Row className="p-form__group">
       <Col size={2}>
@@ -24,14 +36,23 @@ function MultipleInputs({ fieldName, label, register, control }: Props) {
         {fields.map((field, index) => (
           <Row key={field.id}>
             <Col size={5}>
-              <div className="p-form__control">
-                <input
-                  type="text"
-                  {...register(`${fieldName}.${index}.url`, {
-                    required: true,
-                  })}
+              {isUrl ? (
+                <UrlInput
+                  fieldName={fieldName}
+                  index={index}
+                  register={register}
+                  getFieldState={getFieldState}
                 />
-              </div>
+              ) : (
+                <div className="p-form__control">
+                  <input
+                    type="text"
+                    {...register(`${fieldName}.${index}.url`, {
+                      required: true,
+                    })}
+                  />
+                </div>
+              )}
             </Col>
             <Col size={2}>
               <Button

diff --git a/static/js/publisher/listing/components/UrlInput/UrlInput.tsx b/static/js/publisher/listing/components/UrlInput/UrlInput.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+
+type Props = {
+  fieldName: string;
+  index: number;
+  register: Function;
+  getFieldState: Function;
+};
+
+function UrlInput({ fieldName, index, register, getFieldState }: Props) {
+  const name = `${fieldName}.${index}.url`;
+  const fieldState = getFieldState(name);
+  const isInvalid = fieldState.invalid;
+
+  return (
+    <div
+      className={`p-form__group ${isInvalid && "p-form-validation is-error"}`}
+    >
+      <input
+        type="url"
+        id={name}
+        className="p-form-validation__input"
+        {...register(name, {
+          required: false,
+          pattern: { value: /^https?:\/\//gi },
+        })}
+      />
+      {fieldState.invalid && (
+        <p className="p-form-validation__message">Please enter a valid URL</p>
+      )}
+    </div>
+  );
+}
+
+export default UrlInput;
diff --git a/static/js/publisher/listing/components/UrlInput/index.ts b/static/js/publisher/listing/components/UrlInput/index.ts
@@ -0,0 +1 @@
+export { default } from "./UrlInput";
diff --git a/static/js/publisher/listing/sections/ContactInformationSection/ContactInformationSection.tsx b/static/js/publisher/listing/sections/ContactInformationSection/ContactInformationSection.tsx
@@ -9,7 +9,11 @@ type Props = {
   control: {};
 };
 
-function ContactInformationSection({ register, control }: Props) {
+function ContactInformationSection({
+  register,
+  control,
+  getFieldState,
+}: Props) {
   return (
     <>
       <div className="u-fixed-width">
@@ -21,34 +25,39 @@ function ContactInformationSection({ register, control }: Props) {
         label="Websites"
         register={register}
         control={control}
+        getFieldState={getFieldState}
       />
 
       <MultipleInputs
         fieldName="contacts"
         label="Contacts"
         register={register}
         control={control}
+        getFieldState={getFieldState}
       />
 
       <MultipleInputs
         fieldName="donations"
         label="Donations"
         register={register}
         control={control}
+        getFieldState={getFieldState}
       />
 
       <MultipleInputs
         fieldName="source-code"
         label="Source code"
         register={register}
         control={control}
+        getFieldState={getFieldState}
       />
 
       <MultipleInputs
         fieldName="issues"
         label="Issues"
         register={register}
         control={control}
+        getFieldState={getFieldState}
       />
     </>
   );

diff --git a/static/js/publisher/listing/utils/getChanges.ts b/static/js/publisher/listing/utils/getChanges.ts
@@ -65,6 +65,10 @@ function getChanges(
     "licenses",
   ];
 
+  const removeEmptyUrls = (urls: Array<{ url: string }>) => {
+    return urls.filter((url) => url.url !== "");
+  };
+
   if (
     dirtyFields.contacts ||
     dirtyFields.donations ||
@@ -75,19 +79,21 @@ function getChanges(
   ) {
     changes.links = {
       contact: data.contacts
-        ? data.contacts.map((url: { url: string }) => url.url)
+        ? removeEmptyUrls(data.contacts).map((url: { url: string }) => url.url)
         : [],
       donations: data.donations
-        ? data.donations.map((url: { url: string }) => url.url)
+        ? removeEmptyUrls(data.donations).map((url: { url: string }) => url.url)
         : [],
       issues: data.issues
-        ? data.issues.map((url: { url: string }) => url.url)
+        ? removeEmptyUrls(data.issues).map((url: { url: string }) => url.url)
         : [],
       website: data.websites
-        ? data.websites.map((url: { url: string }) => url.url)
+        ? removeEmptyUrls(data.websites).map((url: { url: string }) => url.url)
         : [],
       source: data["source-code"]
-        ? data["source-code"].map((url: { url: string }) => url.url)
+        ? removeEmptyUrls(data["source-code"]).map(
+            (url: { url: string }) => url.url
+          )
         : [],
     };
   }