chore: Refactor publisher listing app (#4859)

canonical · Oct 2, 2024 · 898fa57 · 898fa57
1 parent 990c06e
commit 898fa57
Show file tree

Hide file tree

Showing 89 changed files with 1,705 additions and 5,235 deletions.
diff --git a/package.json b/package.json
@@ -83,7 +83,7 @@
     "react-dnd": "16.0.1",
     "react-dnd-html5-backend": "16.0.1",
     "react-dom": "18.2.0",
-    "react-hook-form": "7.43.2",
+    "react-hook-form": "7.53.0",
     "react-query": "3.39.3",
     "react-redux": "8.1.3",
     "react-router-dom": "6.21.1",

diff --git a/static/js/publisher/listing/components/AdditionalInformation/AdditionalInformation.tsx b/static/js/publisher/listing/components/AdditionalInformation/AdditionalInformation.tsx
@@ -0,0 +1,106 @@
+import {
+  UseFormRegister,
+  UseFormGetValues,
+  UseFormSetValue,
+  UseFormWatch,
+  FieldValues,
+} from "react-hook-form";
+import { Row, Col } from "@canonical/react-components";
+
+import LicenseInputs from "./LicenseInputs";
+
+import type { Data } from "../../types";
+
+type Props = {
+  data: Data;
+  register: UseFormRegister<FieldValues>;
+  getValues: UseFormGetValues<FieldValues>;
+  setValue: UseFormSetValue<FieldValues>;
+  watch: UseFormWatch<FieldValues>;
+};
+
+function AdditionalInformation({
+  data,
+  register,
+  getValues,
+  setValue,
+  watch,
+}: Props): JSX.Element {
+  return (
+    <>
+      <h2 className="p-heading--4">Additional information</h2>
+
+      <LicenseInputs
+        listingData={data}
+        register={register}
+        setValue={setValue}
+        watch={watch}
+      />
+
+      <Row className="p-form__control">
+        <Col size={2}>
+          <label htmlFor="metrics">Metrics:</label>
+        </Col>
+        <Col size={8}>
+          <p className="u-no-margin--bottom">
+            <label className="p-checkbox">
+              <input
+                type="checkbox"
+                className="p-checkbox__input"
+                aria-labelledby="public-metrics-checkbox"
+                {...register("public_metrics_enabled")}
+                defaultChecked={getValues("public_metrics_enabled")}
+              />
+              <span className="p-checkbox__label" id="public-metrics-checkbox">
+                Display public popularity charts
+              </span>
+            </label>
+          </p>
+          <div className="p-nested-inputs">
+            <p className="u-no-margin--bottom u-no-padding--top">
+              <label className="p-checkbox">
+                <input
+                  type="checkbox"
+                  className="p-checkbox__input"
+                  aria-labelledby="world-map-checkbox"
+                  disabled={!getValues("public_metrics_enabled")}
+                  {...register("public_metrics_territories")}
+                  defaultChecked={getValues("public_metrics_territories")}
+                />
+                <span className="p-checkbox__label" id="world-map-checkbox">
+                  World map
+                </span>
+              </label>
+              <small className="u-text-muted">
+                Displays where your snap is being used by country
+              </small>
+            </p>
+            <p className="u-no-margin--bottom">
+              <label className="p-checkbox">
+                <input
+                  type="checkbox"
+                  className="p-checkbox__input"
+                  aria-labelledby="linux-distributions-checkbox"
+                  disabled={!getValues("public_metrics_enabled")}
+                  {...register("public_metrics_distros")}
+                  defaultChecked={getValues("public_metrics_distros")}
+                />
+                <span
+                  className="p-checkbox__label"
+                  id="linux-distributions-checkbox"
+                >
+                  Linux distributions
+                </span>
+              </label>
+              <small className="u-text-muted">
+                Displays where your snap is being used by distro
+              </small>
+            </p>
+          </div>
+        </Col>
+      </Row>
+    </>
+  );
+}
+
+export default AdditionalInformation;
diff --git a/...omponents/LicenseInputs/LicenseInputs.tsx → ...s/AdditionalInformation/LicenseInputs.tsx b/...omponents/LicenseInputs/LicenseInputs.tsx → ...s/AdditionalInformation/LicenseInputs.tsx
@@ -1,4 +1,10 @@
 import { useState, useEffect } from "react";
+import {
+  UseFormRegister,
+  UseFormSetValue,
+  UseFormWatch,
+  FieldValues,
+} from "react-hook-form";
 import { nanoid } from "nanoid";
 import { Row, Col } from "@canonical/react-components";
 
@@ -10,9 +16,9 @@ type Props = {
     license_type: string;
     licenses: Array<{ key: string; name: string }>;
   };
-  register: Function;
-  setValue: Function;
-  watch: Function;
+  register: UseFormRegister<FieldValues>;
+  setValue: UseFormSetValue<FieldValues>;
+  watch: UseFormWatch<FieldValues>;
 };
 
 function LicenseInputs({ listingData, register, setValue, watch }: Props) {
@@ -98,7 +104,7 @@ function LicenseInputs({ listingData, register, setValue, watch }: Props) {
 
           {licenseType === "custom" && (
             <>
-              <textarea name="license" {...register("license")} />
+              <textarea {...register("license")} />
 
               <small className="u-text-muted">
                 Visit{" "}

diff --git a/...omponents/LicenseInputs/LicenseSearch.tsx → ...s/AdditionalInformation/LicenseSearch.tsx b/...omponents/LicenseInputs/LicenseSearch.tsx → ...s/AdditionalInformation/LicenseSearch.tsx
@@ -1,4 +1,5 @@
 import { useState, SyntheticEvent, useEffect } from "react";
+import { UseFormRegister, UseFormSetValue, FieldValues } from "react-hook-form";
 import Downshift from "downshift";
 
 import debounce from "../../../../libs/debounce";
@@ -11,8 +12,8 @@ type License = {
 type Props = {
   licenses: Array<License>;
   license: string | undefined;
-  register: Function;
-  setValue: Function;
+  register: UseFormRegister<FieldValues>;
+  setValue: UseFormSetValue<FieldValues>;
   setLicense: Function;
   originalLicense: string;
 };
@@ -90,7 +91,6 @@ function LicenseSearch({
         <div>
           <input
             type="hidden"
-            name="license"
             {...register("license", {
               value: license,
             })}

diff --git a/static/js/publisher/listing/components/AdditionalInformation/index.ts b/static/js/publisher/listing/components/AdditionalInformation/index.ts
@@ -0,0 +1 @@
+export { default } from "./AdditionalInformation";