Add tooltip to Save button if no Integrations found (#5130)

frontend/pages/software/ManageSoftwarePage/components/ManageAutomationsModal/ManageAutomationsModal.tsx

@@ -11,6 +11,7 @@ import {
 import { IConfig } from "interfaces/config";
 import configAPI from "services/entities/config";
 
+import ReactTooltip from "react-tooltip";
 // @ts-ignore
 import Dropdown from "components/forms/fields/Dropdown";
 import Modal from "components/Modal";
@@ -69,7 +70,7 @@ const ManageAutomationsModal = ({
   currentDestinationUrl,
   recentVulnerabilityMaxAge,
 }: IManageAutomationsModalProps): JSX.Element => {
-  const [destination_url, setDestinationUrl] = useState<string>(
+  const [destinationUrl, setDestinationUrl] = useState<string>(
     currentDestinationUrl || ""
   );
   const [errors, setErrors] = useState<{ [key: string]: string }>({});
@@ -89,10 +90,10 @@ const ManageAutomationsModal = ({
   ] = useState<IJiraIntegration>();
 
   useDeepEffect(() => {
-    if (destination_url) {
+    if (destinationUrl) {
       setErrors({});
     }
-  }, [destination_url]);
+  }, [destinationUrl]);
 
   const { data: integrations } = useQuery<IConfig, Error, IJiraIntegration[]>(
     ["integrations"],
@@ -126,7 +127,7 @@ const ManageAutomationsModal = ({
     evt.preventDefault();
 
     const { valid: validUrl, errors: newErrors } = validateWebhookURL(
-      destination_url
+      destinationUrl
     );
     setErrors({
       ...errors,
@@ -137,7 +138,7 @@ const ManageAutomationsModal = ({
     const configSoftwareAutomations: ISoftwareAutomations = {
       webhook_settings: {
         vulnerabilities_webhook: {
-          destination_url,
+          destination_url: destinationUrl,
           enable_vulnerabilities_webhook: softwareVulnerabilityWebhookEnabled,
         },
       },
@@ -278,7 +279,7 @@ const ManageAutomationsModal = ({
           name="webhook-url"
           label={"Destination URL"}
           type={"text"}
-          value={destination_url}
+          value={destinationUrl}
           onChange={onURLChange}
           error={errors.url}
           hint={
@@ -356,15 +357,51 @@ const ManageAutomationsModal = ({
           >
             Cancel
           </Button>
-          <Button
-            className={`${baseClass}__btn`}
-            type="submit"
-            variant="brand"
-            onClick={handleSaveAutomation}
-            disabled={jiraEnabled && !selectedIntegration}
+          <div
+            data-tip
+            data-for="save-automation-button"
+            data-tip-disable={
+              !(
+                integrationsIndexed &&
+                integrationsIndexed.length === 0 &&
+                jiraEnabled &&
+                softwareAutomationsEnabled
+              )
+            }
           >
-            Save
-          </Button>
+            <Button
+              className={`${baseClass}__btn`}
+              type="submit"
+              variant="brand"
+              onClick={handleSaveAutomation}
+              disabled={
+                (softwareAutomationsEnabled &&
+                  jiraEnabled &&
+                  !selectedIntegration) ||
+                (softwareAutomationsEnabled &&
+                  !jiraEnabled &&
+                  destinationUrl === "")
+              }
+            >
+              Save
+            </Button>
+          </div>
+          <ReactTooltip
+            className={`save-automation-button-tooltip`}
+            place="bottom"
+            type="dark"
+            effect="solid"
+            backgroundColor="#3e4771"
+            id="save-automation-button"
+            data-html
+          >
+            <div
+              className={`tooltip`}
+              style={{ width: "152px", textAlign: "center" }}
+            >
+              Add an integration to create tickets for vulnerability automations
+            </div>
+          </ReactTooltip>
         </div>
       </div>
     </Modal>