handle http URLss gracefully

newrelic · Nov 13, 2023 · 4ba22c6 · 4ba22c6
1 parent 453cf76
commit 4ba22c6
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 14 deletions.
diff --git a/components/status-page.js b/components/status-page.js
@@ -11,6 +11,7 @@ import CurrentIncidents from './current-incidents';
 import FormatService from '../utilities/format-service';
 import { Spinner, Button, Icon, TextField, Link, navigation } from 'nr1';
 
+import TextFieldWrapper from '../nerdlets/status-page-dashboard/TextFieldWrapper/TextFieldWrapper';
 import GitHubLogo from '../assets/logo-github.svg';
 import NewRelicLogo from '../assets/logo-new-relic.png';
 import JiraLogo from '../assets/logo-jira.png';
@@ -50,11 +51,13 @@ export default class StatusPage extends React.PureComponent {
       settingsPopoverActive: false,
       editedServiceName: this.props.hostname.serviceName,
       editedHostName: this.props.hostname.hostName,
+      editedHostNameValidationText: '',
       editedNrqlQuery: this.props.hostname.nrqlQuery,
       editedWorkloadGuid: this.props.hostname.workloadGuid,
       editedSubDomain: this.props.hostname.subDomain,
       editedHostProvider: this.props.hostname.provider,
       editedHostLogo: this.props.hostname.hostLogo,
+      editedHostLogoValidationText: '',
       editedHostId: this.props.hostname.id,
     };
 
@@ -88,6 +91,7 @@ export default class StatusPage extends React.PureComponent {
       editedSubDomain,
     } = this.state;
 
+    console.log('### staus-page.setupDataPolling - editedHostProvider === ', editedHostProvider); // eslint-disable-line prettier/prettier
     if (editedHostProvider === NRQL_PROVIDER_NAME) {
       this.StatusPageNetwork = new NRQLHelper(
         editedNrqlQuery,
@@ -396,10 +400,42 @@ export default class StatusPage extends React.PureComponent {
       id: this.state.editedHostId,
     };
 
-    this.props.editHostName()(hostNameObject);
-    e.stopPropagation();
-    this.handleTileSettingsAnimation();
-    this.setupDataPolling();
+    const validateUrl = (url) => {
+      const urlObject = new URL(url.inputValue);
+      if (urlObject.protocol !== 'https:') {
+        url.validationText =
+          'Please use Secure Socket Layer (HTTPS) protocol for this URL';
+      }
+    };
+
+    const hostName = {
+      inputValue: hostNameObject.hostName,
+      validationText: '',
+    };
+    const hostLogo = {
+      inputValue: hostNameObject.hostLogo,
+      validationText: '',
+    };
+
+    if (hostNameObject.hostName) {
+      validateUrl(hostName);
+    }
+
+    if (hostNameObject.hostLogo) {
+      validateUrl(hostLogo);
+    }
+
+    this.setState({
+      editedHostNameValidationText: hostName.validationText,
+      editedHostLogoValidationText: hostLogo.validationText,
+    });
+
+    if (hostName.validationText === '' && hostLogo.validationText === '') {
+      this.props.editHostName()(hostNameObject);
+      e.stopPropagation();
+      this.handleTileSettingsAnimation();
+      this.setupDataPolling();
+    }
   }
 
   handleSettingsButtonMouseLeave = () => {
@@ -474,6 +510,12 @@ export default class StatusPage extends React.PureComponent {
 
   renderSettings() {
     const { hostname } = this.props;
+    const {
+      editedHostName,
+      editedHostNameValidationText,
+      editedHostLogo,
+      editedHostLogoValidationText,
+    } = this.state;
 
     const providerSettings = (() => {
       if (hostname.provider === NRQL_PROVIDER_NAME) {
@@ -523,22 +565,22 @@ export default class StatusPage extends React.PureComponent {
         );
       } else {
         return (
-          <TextField
+          <TextFieldWrapper
             label="Hostname"
             placeholder="https://status.myservice.com/"
             className="status-page-setting"
-            onChange={() =>
+            onChange={(event) =>
               this.setState((previousState) => ({
                 ...previousState,
                 editedHostName: event.target.value,
               }))
             }
-            defaultValue={hostname.hostName}
+            value={editedHostName}
+            validationText={editedHostNameValidationText}
           />
         );
       }
     })();
-
     return (
       <div
         className="status-page-settings-container"
@@ -557,17 +599,18 @@ export default class StatusPage extends React.PureComponent {
             defaultValue={hostname.serviceName}
           />
           {providerSettings}
-          <TextField
+          <TextFieldWrapper
             label="Service logo"
+            placeholder="https://website.com/logo.png"
             className="status-page-setting"
-            onChange={() =>
+            onChange={(event) =>
               this.setState((previousState) => ({
                 ...previousState,
                 editedHostLogo: event.target.value,
               }))
             }
-            defaultValue={hostname.hostLogo}
-            placeholder="https://website.com/logo.png"
+            value={editedHostLogo}
+            validationText={editedHostLogoValidationText}
           />
         </div>
         <div className="status-page-settings-cta-container">

diff --git a/nerdlets/status-page-dashboard/main-page.js b/nerdlets/status-page-dashboard/main-page.js
@@ -137,15 +137,29 @@ export default class StatusPagesDashboard extends React.PureComponent {
   };
 
   validateFormAndReturnStatus = () => {
+    const validateUrl = (urlField) => {
+      const urlObject = new URL(urlField.inputValue);
+      if (urlObject.protocol !== 'https:') {
+        urlField.validationText += urlField.validationText
+          ? '. Please also '
+          : 'Please ';
+        urlField.validationText +=
+          'use Secure Socket Layer (HTTPS) protocol for this URL';
+      }
+    };
+
     const { formInputs } = this.state;
 
     const updatedFormInputs = { ...formInputs };
-    const inputsList = Object.keys(formInputs).filter((k) => k !== 'logoUrl');
+    const inputsList = Object.keys(formInputs);
     const genericValidationError = 'Please fill this field before saving.';
     let isFormValid = true;
 
     for (const inputName of inputsList) {
-      if (formInputs[inputName].inputValue.length < 2) {
+      if (
+        formInputs[inputName]?.inputValue &&
+        formInputs[inputName]?.inputValue.length < 2
+      ) {
         updatedFormInputs[inputName].validationText = genericValidationError;
         isFormValid = false;
       } else {
@@ -159,6 +173,7 @@ export default class StatusPagesDashboard extends React.PureComponent {
       workloadGuid,
       providerName,
       hostName,
+      logoUrl,
     } = updatedFormInputs;
 
     if (corsProxyAddress && corsProxyAddress.inputValue) {
@@ -203,6 +218,13 @@ export default class StatusPagesDashboard extends React.PureComponent {
       }
     }
 
+    [corsProxyAddress, hostName, logoUrl].forEach((urlField, index) => {
+      if (urlField?.inputValue) {
+        validateUrl(urlField);
+        if (urlField.validationText) isFormValid = false;
+      }
+    });
+
     this.setState({ formInputs: updatedFormInputs });
     return isFormValid;
   };