From 94838f5d7e2fec974c1295ccd7fdc83b2a2523e2 Mon Sep 17 00:00:00 2001
From: Maina Wycliffe <wmmaina7@gmail.com>
Date: Sun, 26 Nov 2023 14:19:14 +0300
Subject: [PATCH] chore: add link to the documentation for canary checker

Closes #965
---
 src/components/Forms/SpecEditorForm.tsx       | 16 ++--
 src/components/Modal/index.tsx                | 30 ++++++-
 .../SpecEditor/HealthSpecEditor.tsx           | 84 ++++++++++++-------
 src/components/SpecEditor/SpecEditor.tsx      | 10 +++
 4 files changed, 103 insertions(+), 37 deletions(-)

diff --git a/src/components/Forms/SpecEditorForm.tsx b/src/components/Forms/SpecEditorForm.tsx
index 86f2fa4d6..3d2f2e573 100644
--- a/src/components/Forms/SpecEditorForm.tsx
+++ b/src/components/Forms/SpecEditorForm.tsx
@@ -1,18 +1,18 @@
+import clsx from "clsx";
 import { Form, Formik } from "formik";
 import React, { useCallback, useMemo, useRef, useState } from "react";
 import { Button } from "../Button";
-import { Tabs, Tab } from "../Tabs/Tabs";
-import { FormikCodeEditor } from "./Formik/FormikCodeEditor";
+import { Icon } from "../Icon";
+import DeleteResource from "../SchemaResourcePage/Delete/DeleteResource";
 import {
   SchemaResourceType,
   schemaResourceTypes
 } from "../SchemaResourcePage/resourceTypes";
-import FormikTextInput from "./Formik/FormikTextInput";
+import { Tab, Tabs } from "../Tabs/Tabs";
 import FormikAutocompleteDropdown from "./Formik/FormikAutocompleteDropdown";
+import { FormikCodeEditor } from "./Formik/FormikCodeEditor";
 import FormikIconPicker from "./Formik/FormikIconPicker";
-import DeleteResource from "../SchemaResourcePage/Delete/DeleteResource";
-import clsx from "clsx";
-import { Icon } from "../Icon";
+import FormikTextInput from "./Formik/FormikTextInput";
 
 type SpecEditorFormProps = {
   loadSpec: () => Record<string, any>;
@@ -206,8 +206,8 @@ export default function SpecEditorForm({
               )}
             </div>
           </div>
-          <div className="flex flex-row bg-gray-100 p-4">
-            <div className="flex flex-1 flex-row space-x-4 justify-end">
+          <div className="flex flex-row  bg-gray-100 p-4">
+            <div className="flex flex-1 flex-row items-center space-x-4 justify-end">
               {!!cantEditMessage && !canEdit && !!initialValues.id && (
                 <div className="flex items-center px-4 space-x-2 flex-1">
                   <Icon name="k8s" />
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
index 696dd80b3..6b77e156c 100644
--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@@ -1,8 +1,19 @@
 import { Dialog, Transition } from "@headlessui/react";
 import { XIcon } from "@heroicons/react/solid";
 import clsx from "clsx";
+import { atom, useAtom } from "jotai";
 import PropTypes from "prop-types";
 import React, { Fragment } from "react";
+import { IoMdHelp } from "react-icons/io";
+
+/**
+ *
+ * An atom that can be used to set the help link for a modal. This is used to
+ * display a help icon in the top right corner of the modal that links to the
+ * documentation for the modal.
+ *
+ */
+export const modalHelpLinkAtom = atom<string | undefined>(undefined);
 
 type ModalSize = "small" | "slightly-small" | "medium" | "large" | "full";
 
@@ -46,6 +57,8 @@ export function Modal({
   dialogClassName = "fixed z-50 inset-0 overflow-y-auto 2xl:my-20",
   ...rest
 }: IModalProps) {
+  const [helpLink] = useAtom(modalHelpLinkAtom);
+
   return (
     /* @ts-ignore */
     <Transition.Root show={open} as={Fragment}>
@@ -90,7 +103,7 @@ export function Modal({
                 modalClassMap[size]
               )}
             >
-              <div className="py-4 px-4 flex item-center rounded-t-lg justify-between bg-gray-100">
+              <div className="py-4 px-4 gap-2 flex item-center rounded-t-lg justify-between bg-gray-100">
                 <h1
                   className={clsx(
                     "font-semibold flex-1 overflow-x-auto text-lg",
@@ -99,6 +112,21 @@ export function Modal({
                 >
                   {title}
                 </h1>
+                {/*
+                If the modal has a help link, display a help icon in the top right
+                corner of the modal that links to the documentation for the modal.
+                */}
+                {helpLink && (
+                  <a
+                    title="Link to documentation"
+                    href={helpLink}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex items-center justify-center text-gray-400 hover:text-gray-500 focus:outline-none"
+                  >
+                    <IoMdHelp size={22} className="inline-block" />
+                  </a>
+                )}
                 {/* top-right close button */}
                 {!hideCloseButton && (
                   <div className="flex pointer-events-none sm:pointer-events-auto">
diff --git a/src/components/SpecEditor/HealthSpecEditor.tsx b/src/components/SpecEditor/HealthSpecEditor.tsx
index 67198f47b..4d371a005 100644
--- a/src/components/SpecEditor/HealthSpecEditor.tsx
+++ b/src/components/SpecEditor/HealthSpecEditor.tsx
@@ -45,7 +45,8 @@ export default function HealthSpecEditor({
           configForm: HTTPHealthFormEditor,
           specsMapField: "http.0",
           rawSpecInput: false,
-          schemaFilePrefix: "canary"
+          schemaFilePrefix: "canary",
+          docsLink: "https://canarychecker.io/reference/http"
         },
         {
           name: "awsConfigRule",
@@ -60,7 +61,8 @@ export default function HealthSpecEditor({
           configForm: null,
           specsMapField: "awsConfigRule.0",
           rawSpecInput: true,
-          schemaFilePrefix: "canary"
+          schemaFilePrefix: "canary",
+          docsLink: "https://canarychecker.io/reference/aws-config-rule"
         },
         {
           name: "awsConfig",
@@ -75,7 +77,8 @@ export default function HealthSpecEditor({
           configForm: null,
           specsMapField: "awsConfig.0",
           rawSpecInput: true,
-          schemaFilePrefix: "canary"
+          schemaFilePrefix: "canary",
+          docsLink: "https://canarychecker.io/reference/aws-config"
         },
         {
           name: "github",
@@ -105,7 +108,8 @@ export default function HealthSpecEditor({
           configForm: null,
           specsMapField: "ec2.0",
           rawSpecInput: true,
-          schemaFilePrefix: "canary"
+          schemaFilePrefix: "canary",
+          docsLink: "https://canarychecker.io/reference/ec2"
         },
         {
           name: "ldap",
@@ -120,7 +124,8 @@ export default function HealthSpecEditor({
           configForm: null,
           specsMapField: "ldap.0",
           rawSpecInput: true,
-          schemaFilePrefix: "canary"
+          schemaFilePrefix: "canary",
+          docsLink: "https://canarychecker.io/reference/ldap"
         },
         {
           name: "pod",
@@ -135,7 +140,8 @@ export default function HealthSpecEditor({
           configForm: null,
           specsMapField: "pod.0",
           rawSpecInput: true,
-          schemaFilePrefix: "canary"
+          schemaFilePrefix: "canary",
+          docsLink: "https://canarychecker.io/reference/pod"
         },
         {
           name: "exec",
@@ -150,7 +156,8 @@ export default function HealthSpecEditor({
           configForm: ExecHealthFormEditor,
           specsMapField: "exec.0",
           rawSpecInput: false,
-          schemaFilePrefix: "canary"
+          schemaFilePrefix: "canary",
+          docsLink: "https://canarychecker.io/reference/exec"
         },
         {
           name: "alertManager",
@@ -165,7 +172,8 @@ export default function HealthSpecEditor({
           configForm: AlertmanagerHealthFormEditor,
           specsMapField: "alertManager.0",
           rawSpecInput: false,
-          schemaFilePrefix: "canary"
+          schemaFilePrefix: "canary",
+          docsLink: "https://canarychecker.io/reference/alert-manager"
         },
         {
           name: "cloudwatch",
@@ -180,7 +188,8 @@ export default function HealthSpecEditor({
           configForm: null,
           specsMapField: "cloudwatch.0",
           rawSpecInput: true,
-          schemaFilePrefix: "canary"
+          schemaFilePrefix: "canary",
+          docsLink: "https://canarychecker.io/reference/cloudwatch"
         },
         {
           name: "elasticsearch",
@@ -195,7 +204,8 @@ export default function HealthSpecEditor({
           configForm: ElasticsearchHealthFormEditor,
           specsMapField: "elasticsearch.0",
           rawSpecInput: false,
-          schemaFilePrefix: "canary"
+          schemaFilePrefix: "canary",
+          docsLink: "https://canarychecker.io/reference/elasticsearch"
         },
         {
           name: "redis",
@@ -210,7 +220,8 @@ export default function HealthSpecEditor({
           configForm: RedisHealthFormEditor,
           specsMapField: "redis.0",
           rawSpecInput: false,
-          schemaFilePrefix: "canary"
+          schemaFilePrefix: "canary",
+          docsLink: "https://canarychecker.io/reference/redis"
         },
         {
           name: "mongo",
@@ -225,7 +236,8 @@ export default function HealthSpecEditor({
           configForm: MongoHealthFormEditor,
           specsMapField: "mongo.0",
           rawSpecInput: false,
-          schemaFilePrefix: "canary"
+          schemaFilePrefix: "canary",
+          docsLink: "https://canarychecker.io/reference/mongo"
         },
         {
           name: "dns",
@@ -240,7 +252,8 @@ export default function HealthSpecEditor({
           configForm: null,
           specsMapField: "dns.0",
           rawSpecInput: true,
-          schemaFilePrefix: "canary"
+          schemaFilePrefix: "canary",
+          docsLink: "https://canarychecker.io/reference/dns"
         },
         {
           name: "ping",
@@ -254,7 +267,8 @@ export default function HealthSpecEditor({
           icon: "icmp",
           configForm: ICMPHealthFormEditor,
           specsMapField: "icmp.0",
-          schemaFilePrefix: "canary"
+          schemaFilePrefix: "canary",
+          docsLink: "https://canarychecker.io/reference/icmp"
         },
         {
           name: "gcs",
@@ -269,7 +283,8 @@ export default function HealthSpecEditor({
           configForm: null,
           specsMapField: "gcs.0",
           rawSpecInput: true,
-          schemaFilePrefix: "canary"
+          schemaFilePrefix: "canary",
+          docsLink: "https://canarychecker.io/reference/gcs-bucket"
         },
         {
           name: "s3",
@@ -284,7 +299,8 @@ export default function HealthSpecEditor({
           configForm: null,
           specsMapField: "s3.0",
           rawSpecInput: true,
-          schemaFilePrefix: "canary"
+          schemaFilePrefix: "canary",
+          docsLink: "https://canarychecker.io/reference/s3-bucket"
         },
         {
           name: "smb",
@@ -299,7 +315,8 @@ export default function HealthSpecEditor({
           configForm: null,
           specsMapField: "smb.0",
           rawSpecInput: true,
-          schemaFilePrefix: "canary"
+          schemaFilePrefix: "canary",
+          docsLink: "https://canarychecker.io/reference/smb"
         },
         {
           name: "sftp",
@@ -314,7 +331,8 @@ export default function HealthSpecEditor({
           configForm: null,
           specsMapField: "sftp.0",
           rawSpecInput: true,
-          schemaFilePrefix: "canary"
+          schemaFilePrefix: "canary",
+          docsLink: "https://canarychecker.io/reference/sftp"
         },
         {
           name: "folder",
@@ -329,7 +347,8 @@ export default function HealthSpecEditor({
           configForm: FolderHealthFormEditor,
           specsMapField: "folder.0",
           rawSpecInput: false,
-          schemaFilePrefix: "canary"
+          schemaFilePrefix: "canary",
+          docsLink: "https://canarychecker.io/reference/folder"
         },
         {
           name: "prometheus",
@@ -344,7 +363,8 @@ export default function HealthSpecEditor({
           configForm: null,
           specsMapField: "prometheus.0",
           rawSpecInput: true,
-          schemaFilePrefix: "canary"
+          schemaFilePrefix: "canary",
+          docsLink: "https://canarychecker.io/reference/prometheus"
         },
         {
           name: "kubernetes",
@@ -359,7 +379,8 @@ export default function HealthSpecEditor({
           configForm: null,
           specsMapField: "kubernetes.0",
           rawSpecInput: true,
-          schemaFilePrefix: "canary"
+          schemaFilePrefix: "canary",
+          docsLink: "https://canarychecker.io/reference/kubernetes"
         },
         {
           name: "sql",
@@ -374,7 +395,8 @@ export default function HealthSpecEditor({
           configForm: null,
           specsMapField: "sql.0",
           rawSpecInput: true,
-          schemaFilePrefix: "canary"
+          schemaFilePrefix: "canary",
+          docsLink: "https://canarychecker.io/reference/postgres"
         },
         {
           name: "configDB",
@@ -389,7 +411,8 @@ export default function HealthSpecEditor({
           configForm: null,
           specsMapField: "configDB.0",
           rawSpecInput: true,
-          schemaFilePrefix: "canary"
+          schemaFilePrefix: "canary",
+          docsLink: "https://canarychecker.io/reference/configdb"
         },
         {
           name: "azureDevops",
@@ -404,7 +427,8 @@ export default function HealthSpecEditor({
           configForm: null,
           specsMapField: "azureDevops.0",
           rawSpecInput: true,
-          schemaFilePrefix: "canary"
+          schemaFilePrefix: "canary",
+          docsLink: "https://canarychecker.io/reference/azure-devops"
         },
         {
           name: "jmeter",
@@ -419,7 +443,8 @@ export default function HealthSpecEditor({
           configForm: null,
           specsMapField: "jmeter.0",
           rawSpecInput: true,
-          schemaFilePrefix: "canary"
+          schemaFilePrefix: "canary",
+          docsLink: "https://canarychecker.io/reference/jmeter"
         },
         {
           name: "junit",
@@ -434,7 +459,8 @@ export default function HealthSpecEditor({
           configForm: null,
           specsMapField: "junit.0",
           rawSpecInput: true,
-          schemaFilePrefix: "canary"
+          schemaFilePrefix: "canary",
+          docsLink: "https://canarychecker.io/reference/junit"
         },
         {
           name: "dynatrace",
@@ -464,7 +490,8 @@ export default function HealthSpecEditor({
           configForm: null,
           specsMapField: "namespace.0",
           rawSpecInput: true,
-          schemaFilePrefix: "canary"
+          schemaFilePrefix: "canary",
+          docsLinks: "https://canarychecker.io/reference/kubernetes"
         },
         {
           name: "tcp",
@@ -479,7 +506,8 @@ export default function HealthSpecEditor({
           configForm: TCPHealthFormEditor,
           specsMapField: "tcp.0",
           rawSpecInput: false,
-          schemaFilePrefix: "canary"
+          schemaFilePrefix: "canary",
+          docsLink: "https://canarychecker.io/reference/tcp"
         },
         {
           name: "custom",
diff --git a/src/components/SpecEditor/SpecEditor.tsx b/src/components/SpecEditor/SpecEditor.tsx
index a3983a047..384fcb3a2 100644
--- a/src/components/SpecEditor/SpecEditor.tsx
+++ b/src/components/SpecEditor/SpecEditor.tsx
@@ -2,6 +2,8 @@ import React, { useEffect, useState } from "react";
 import { Icon } from "../Icon";
 import SpecEditorForm from "../Forms/SpecEditorForm";
 import { SchemaResourceType } from "../SchemaResourcePage/resourceTypes";
+import { useAtom } from "jotai";
+import { modalHelpLinkAtom } from "../Modal";
 
 export type SpecType = {
   name: string;
@@ -27,6 +29,7 @@ export type SpecType = {
   specsMapField: string;
   rawSpecInput?: boolean;
   schemaFilePrefix: "component" | "canary" | "system" | "scrape_config";
+  docsLink?: string;
 };
 
 type SpecEditorProps = {
@@ -46,6 +49,8 @@ export default function SpecEditor({
   canEdit = false,
   cantEditMessage
 }: SpecEditorProps) {
+  const [, setModalHelpLink] = useAtom(modalHelpLinkAtom);
+
   const [selectedSpecItem, setSelectedSpecItem] = useState<
     SpecType | undefined
   >(() => {
@@ -72,6 +77,11 @@ export default function SpecEditor({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [types]);
 
+  // when the selectedSpecItem changes, we need to update the modalHelpLink
+  useEffect(() => {
+    setModalHelpLink(selectedSpecItem?.docsLink);
+  }, [selectedSpecItem, setModalHelpLink]);
+
   return (
     <div className="flex flex-col w-full flex-1 h-full overflow-y-auto">
       {selectedSpecItem ? (