From 0ce66b952dfa27f6418c1876af5171fb621ecf0a Mon Sep 17 00:00:00 2001
From: Gabriel Hernandez <ghernandez345@gmail.com>
Date: Fri, 30 Jun 2023 16:08:26 +0100
Subject: [PATCH] add org support url input to org info form (#12591)

relates to #12568

adds the missing org support URL input on the settings page org info
form.


![image](https://github.com/fleetdm/fleet/assets/1153709/4e7e1fa4-f462-4fc7-ad2d-49a47edded57)


- [x] Changes file added for user-visible changes in `changes/` or
`orbit/changes/`.
See [Changes
files](https://fleetdm.com/docs/contributing/committing-changes#changes-files)
for more information.
- [x] Manual QA for all new/changed functionality
---
 changes/issue-12568-add-org-support-url-input |  1 +
 .../admin/OrgSettingsPage/cards/Info/Info.tsx | 28 +++++++++++++++++--
 .../admin/OrgSettingsPage/cards/constants.ts  |  1 +
 3 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 changes/issue-12568-add-org-support-url-input

diff --git a/changes/issue-12568-add-org-support-url-input b/changes/issue-12568-add-org-support-url-input
new file mode 100644
index 0000000000..586b727ab1
--- /dev/null
+++ b/changes/issue-12568-add-org-support-url-input
@@ -0,0 +1 @@
+- add Organization support URL input on the setting page Organization info form.
diff --git a/frontend/pages/admin/OrgSettingsPage/cards/Info/Info.tsx b/frontend/pages/admin/OrgSettingsPage/cards/Info/Info.tsx
index 181c72049f..b369c04806 100644
--- a/frontend/pages/admin/OrgSettingsPage/cards/Info/Info.tsx
+++ b/frontend/pages/admin/OrgSettingsPage/cards/Info/Info.tsx
@@ -13,6 +13,12 @@ import {
   IAppConfigFormErrors,
 } from "../constants";
 
+interface IOrgInfoFormData {
+  orgName: string;
+  orgLogoURL: string;
+  orgSupportURL: string;
+}
+
 const baseClass = "app-config-form";
 
 const Info = ({
@@ -20,12 +26,14 @@ const Info = ({
   handleSubmit,
   isUpdatingSettings,
 }: IAppConfigFormProps): JSX.Element => {
-  const [formData, setFormData] = useState<any>({
+  const [formData, setFormData] = useState<IOrgInfoFormData>({
     orgName: appConfig.org_info.org_name || "",
     orgLogoURL: appConfig.org_info.org_logo_url || "",
+    orgSupportURL:
+      appConfig.org_info.contact_url || "https://fleetdm.com/company/contact",
   });
 
-  const { orgName, orgLogoURL } = formData;
+  const { orgName, orgLogoURL, orgSupportURL } = formData;
 
   const [formErrors, setFormErrors] = useState<IAppConfigFormErrors>({});
 
@@ -45,6 +53,12 @@ const Info = ({
       errors.org_logo_url = `${orgLogoURL} is not a valid URL`;
     }
 
+    if (!orgSupportURL) {
+      errors.org_support_url = `Organization support URL must be present`;
+    } else if (!validUrl({ url: orgSupportURL, protocol: "http" })) {
+      errors.org_support_url = `${orgSupportURL} is not a valid URL`;
+    }
+
     setFormErrors(errors);
   };
 
@@ -56,6 +70,7 @@ const Info = ({
       org_info: {
         org_logo_url: orgLogoURL,
         org_name: orgName,
+        contact_url: orgSupportURL,
       },
     };
 
@@ -85,6 +100,15 @@ const Info = ({
             onBlur={validateForm}
             error={formErrors.org_logo_url}
           />
+          <InputField
+            label="Organization support URL"
+            onChange={handleInputChange}
+            name="orgSupportURL"
+            value={orgSupportURL}
+            parseTarget
+            onBlur={validateForm}
+            error={formErrors.org_support_url}
+          />
         </div>
         <div className={`${baseClass}__details ${baseClass}__avatar-preview`}>
           <OrgLogoIcon src={orgLogoURL} />
diff --git a/frontend/pages/admin/OrgSettingsPage/cards/constants.ts b/frontend/pages/admin/OrgSettingsPage/cards/constants.ts
index 88c7464afb..8ae0173146 100644
--- a/frontend/pages/admin/OrgSettingsPage/cards/constants.ts
+++ b/frontend/pages/admin/OrgSettingsPage/cards/constants.ts
@@ -22,6 +22,7 @@ export interface IAppConfigFormErrors {
   server_url?: string | null;
   org_name?: string | null;
   org_logo_url?: string | null;
+  org_support_url?: string | null;
   idp_image_url?: string | null;
   sender_address?: string | null;
   server?: string | null;