fix: resolves #169 - add mandatory indicators to Add Service form

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

Hide file tree

Showing 2 changed files with 84 additions and 37 deletions.
diff --git a/nerdlets/status-page-dashboard/main-page.js b/nerdlets/status-page-dashboard/main-page.js
@@ -553,51 +553,87 @@ export default class StatusPagesDashboard extends React.PureComponent {
     const providerInput = (() => {
       if (providerName.inputValue === PROVIDERS.NRQL.value) {
         return (
-          <TextFieldWrapper
-            label="NRQL"
-            placeholder="Put your NRQL query here"
-            onChange={(event) => {
-              this.updateInputValue(event, 'nrqlQuery');
-            }}
-            value={nrqlQuery.inputValue}
-            validationText={nrqlQuery.validationText}
-          />
+          <>
+            <label>
+              NRQL
+              {nrqlQuery.inputValue.length > 2 ? (
+                ''
+              ) : (
+                <span className="mandatory"> * </span>
+              )}
+            </label>
+            <TextFieldWrapper
+              placeholder="Put your NRQL query here"
+              onChange={(event) => {
+                this.updateInputValue(event, 'nrqlQuery');
+              }}
+              value={nrqlQuery.inputValue}
+              validationText={nrqlQuery.validationText}
+            />
+          </>
         );
       } else if (providerName.inputValue === PROVIDERS.WORKLOAD.value) {
         return (
-          <TextFieldWrapper
-            label="Workload Guid"
-            placeholder="Put your Workload Entity guid here"
-            onChange={(event) => {
-              this.updateInputValue(event, 'workloadGuid');
-            }}
-            value={workloadGuid.inputValue}
-            validationText={workloadGuid.validationText}
-          />
+          <>
+            <label>
+              Workload Guid
+              {workloadGuid.inputValue.length > 2 ? (
+                ''
+              ) : (
+                <span className="mandatory"> * </span>
+              )}
+            </label>
+            <TextFieldWrapper
+              placeholder="Put your Workload Entity guid here"
+              onChange={(event) => {
+                this.updateInputValue(event, 'workloadGuid');
+              }}
+              value={workloadGuid.inputValue}
+              validationText={workloadGuid.validationText}
+            />
+          </>
         );
       } else if (providerName.inputValue === PROVIDERS.STATUS_PAL.value) {
         return (
-          <TextFieldWrapper
-            label="Subdomain"
-            placeholder="Put your Statuspal subdomain here"
-            onChange={(event) => {
-              this.updateInputValue(event, 'subDomain');
-            }}
-            value={subDomain.inputValue}
-            validationText={subDomain.validationText}
-          />
+          <>
+            <label>
+              Subdomain
+              {subDomain.inputValue.length > 2 ? (
+                ''
+              ) : (
+                <span className="mandatory"> * </span>
+              )}
+            </label>
+            <TextFieldWrapper
+              placeholder="Put your Statuspal subdomain here"
+              onChange={(event) => {
+                this.updateInputValue(event, 'subDomain');
+              }}
+              value={subDomain.inputValue}
+              validationText={subDomain.validationText}
+            />
+          </>
         );
       } else {
         return (
-          <TextFieldWrapper
-            label="Hostname"
-            placeholder="https://status.myservice.com/"
-            onChange={(event) => {
-              this.updateInputValue(event, 'hostName');
-            }}
-            value={hostName.inputValue}
-            validationText={hostName.validationText}
-          />
+          <>
+            <label>
+              Hostname
+              {hostName.inputValue.length > 2 ? (
+                ''
+              ) : (
+                <span className="mandatory"> * </span>
+              )}
+            </label>
+            <TextFieldWrapper
+              placeholder="https://status.myservice.com/"
+              onChange={(event) => {
+                this.updateInputValue(event, 'hostName');
+              }}
+              value={hostName.inputValue}
+              validationText={hostName.validationText}
+            />
+          </>
         );
       }
     })();
@@ -708,7 +744,14 @@ export default class StatusPagesDashboard extends React.PureComponent {
           )}
 
           <div className="select-container">
-            <label>Provider</label>
+            <label>
+              Provider
+              {providerName.inputValue ? (
+                ''
+              ) : (
+                <span className="mandatory"> * </span>
+              )}
+            </label>
             <select
               onChange={this.handleProviderChange}
               value={providerName.inputValue}

diff --git a/nerdlets/status-page-dashboard/styles.scss b/nerdlets/status-page-dashboard/styles.scss
@@ -925,6 +925,10 @@ button[class*='Dropdown-trigger'],
   }
 }
 
+.mandatory {
+  color: rgb(232, 16, 16);
+}
+
 [class*='InnerModal-content'] {
   button[class*='Dropdown-trigger'] {
     width: 100%;