feat(ui): docs as env (#3022)

.gitignore

@@ -212,10 +212,10 @@ ee/experimental/ai_temp/*
 
 oauth2.cfg
 scripts/keep_slack_bot.py
-keepnew.db
+*.db
 providers_cache.json
 
 tests/provision/*
 grafana/*
 !grafana/provisioning/
-!grafana/dashboards/
+!grafana/dashboards/

keep-ui/app/(keep)/alerts/alert-sidebar.tsx

@@ -13,6 +13,7 @@ import { QuestionMarkCircleIcon } from "@heroicons/react/20/solid";
 import { Link } from "@/components/ui";
 import { useProviders } from "@/utils/hooks/useProviders";
 import AlertMenu from "./alert-menu";
+import { useConfig } from "@/utils/hooks/useConfig";
 
 type AlertSidebarProps = {
   isOpen: boolean;
@@ -45,6 +46,8 @@ const AlertSidebar = ({
     providers?.installed_providers.find((p) => p.id === alert?.providerId)
       ?.display_name || alert?.providerId;
 
+  const { data: config } = useConfig();
+
   const handleRefresh = async () => {
     console.log("Refresh button clicked");
     await mutate();
@@ -140,7 +143,10 @@ const AlertSidebar = ({
                             alert instances in Keep. Every provider declares the
                             fields fingerprints are calculated upon.{" "}
                             <Link
-                              href="https://docs.keephq.dev/providers/fingerprints#fingerprints"
+                              href={`${
+                                config?.KEEP_DOCS_URL ||
+                                "https://docs.keephq.dev"
+                              }/providers/fingerprints#fingerprints`}
                               className="text-white"
                             >
                               Docs

keep-ui/app/(keep)/alerts/alerts-rules-builder.tsx

@@ -20,8 +20,9 @@ import {
 } from "@/entities/alerts/model";
 import { XMarkIcon, TrashIcon } from "@heroicons/react/24/outline";
 import { TbDatabaseImport } from "react-icons/tb";
-import { components, MenuListProps } from "react-select";
+import { components, MenuListProps, GroupBase } from "react-select";
 import { Select } from "@/shared/ui";
+import { useConfig } from "@/utils/hooks/useConfig";
 
 import { IoSearchOutline } from "react-icons/io5";
 import { FiExternalLink } from "react-icons/fi";
@@ -58,10 +59,18 @@ const kbdStyle = {
   fontWeight: "bold",
 };
 
+// Define an interface for the custom props
+interface CustomMenuListProps
+  extends MenuListProps<any, boolean, GroupBase<any>> {
+  docsUrl: string;
+}
+
 // Custom MenuList with a static line at the end
-const CustomMenuList = (props: MenuListProps<{}>) => {
+const CustomMenuList = (props: CustomMenuListProps) => {
+  const { docsUrl, ...menuListProps } = props;
+
   return (
-    <components.MenuList {...props}>
+    <components.MenuList {...menuListProps}>
       {props.children}
       <div
         style={{
@@ -72,7 +81,7 @@ const CustomMenuList = (props: MenuListProps<{}>) => {
           background: "lightgray",
           color: "black",
           fontSize: "0.9em",
-          borderTop: "1px solid #ddd", // Add a separator if you like
+          borderTop: "1px solid #ddd",
         }}
       >
         <span>
@@ -88,7 +97,7 @@ const CustomMenuList = (props: MenuListProps<{}>) => {
           <kbd style={kbdStyle}>Enter</kbd> to update query
         </span>
         <a
-          href="https://docs.keephq.dev/overview/cel"
+          href={`${docsUrl}/overview/cel`}
           target="_blank"
           rel="noopener noreferrer"
           style={{
@@ -294,6 +303,7 @@ export const AlertsRulesBuilder = ({
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
+  const { data: config } = useConfig();
 
   const { deletePreset } = usePresetActions();
 
@@ -600,7 +610,22 @@ export const AlertsRulesBuilder = ({
                     options={staticOptions}
                     onChange={handleSelectChange}
                     menuIsOpen={true}
-                    components={minimal ? undefined : customComponents}
+                    components={
+                      minimal
+                        ? undefined
+                        : {
+                            ...customComponents,
+                            MenuList: (props) => (
+                              <CustomMenuList
+                                {...props}
+                                docsUrl={
+                                  config?.KEEP_DOCS_URL ||
+                                  "https://docs.keephq.dev"
+                                }
+                              />
+                            ),
+                          }
+                    }
                     onBlur={() => setShowSuggestions(false)}
                   />
                 </div>

keep-ui/app/(keep)/deduplication/DeduplicationSidebar.tsx

@@ -25,6 +25,7 @@ import { useApi } from "@/shared/lib/hooks/useApi";
 import { KeepApiError } from "@/shared/api";
 import { Providers } from "@/app/(keep)/providers/providers";
 import SidePanel from "@/components/SidePanel";
+import { useConfig } from "@/utils/hooks/useConfig";
 
 interface ProviderOption {
   value: string;
@@ -72,6 +73,8 @@ const DeduplicationSidebar: React.FC<DeduplicationSidebarProps> = ({
 
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  const { data: config } = useConfig();
+
   const { data: deduplicationFields = {} } = useDeduplicationFields();
   const api = useApi();
 
@@ -226,7 +229,9 @@ const DeduplicationSidebar: React.FC<DeduplicationSidebarProps> = ({
             </Text>
             <br></br>
             <a
-              href="https://docs.keephq.dev/overview/deduplication"
+              href={`${
+                config?.KEEP_DOCS_URL || "https://docs.keephq.dev"
+              }/overview/deduplication`}
               target="_blank"
               className="text-orange-600 hover:underline mt-4"
             >
@@ -245,8 +250,8 @@ const DeduplicationSidebar: React.FC<DeduplicationSidebarProps> = ({
             color="orange"
           >
             <Text>
-              Editing a provisioned deduplication rule is not allowed.
-              Please contact your system administrator for more information.
+              Editing a provisioned deduplication rule is not allowed. Please
+              contact your system administrator for more information.
             </Text>
           </Callout>
         </div>
@@ -319,7 +324,10 @@ const DeduplicationSidebar: React.FC<DeduplicationSidebarProps> = ({
                   render={({ field }) => (
                     <Select
                       {...field}
-                      isDisabled={!!selectedDeduplicationRule?.default || selectedDeduplicationRule?.is_provisioned}
+                      isDisabled={
+                        !!selectedDeduplicationRule?.default ||
+                        selectedDeduplicationRule?.is_provisioned
+                      }
                       options={alertProviders.map((provider) => ({
                         value: `${provider.type}_${provider.id}`,
                         label: provider.details?.name || provider.id || "main",
@@ -431,10 +439,10 @@ const DeduplicationSidebar: React.FC<DeduplicationSidebarProps> = ({
                     name="full_deduplication"
                     control={control}
                     render={({ field }) => (
-                      <Switch 
-                        disabled={!!selectedDeduplicationRule?.is_provisioned} 
+                      <Switch
+                        disabled={!!selectedDeduplicationRule?.is_provisioned}
                         checked={field.value}
-                        onChange={field.onChange} 
+                        onChange={field.onChange}
                       />
                     )}
                   />

keep-ui/app/(keep)/extraction/create-or-update-extraction-rule.tsx

@@ -21,6 +21,7 @@ import { useExtractions } from "utils/hooks/useExtractionRules";
 import { AlertsRulesBuilder } from "@/app/(keep)/alerts/alerts-rules-builder";
 import { useApi } from "@/shared/lib/hooks/useApi";
 import { showErrorToast } from "@/shared/ui";
+import { useConfig } from "@/utils/hooks/useConfig";
 
 interface Props {
   extractionToEdit: ExtractionRule | null;
@@ -41,6 +42,8 @@ export default function CreateOrUpdateExtractionRule({
   const [regex, setRegex] = useState<string>("");
   const [extractedAttributes, setExtractedAttributes] = useState<string[]>([]);
   const [priority, setPriority] = useState<number>(0);
+  const { data: config } = useConfig();
+
   const editMode = extractionToEdit !== null;
 
   useEffect(() => {
@@ -190,7 +193,9 @@ export default function CreateOrUpdateExtractionRule({
         <div className="flex items-center">
           Extraction Definition{" "}
           <a
-            href="https://docs.keephq.dev/overview/enrichment/extraction"
+            href={`${
+              config?.KEEP_DOCS_URL || "https://docs.keephq.dev"
+            }/overview/enrichment/extraction`}
             target="_blank"
           >
             <Icon
@@ -241,7 +246,12 @@ export default function CreateOrUpdateExtractionRule({
       <div className="mt-2.5">
         <Text>
           Condition
-          <a href="https://docs.keephq.dev/overview/presets" target="_blank">
+          <a
+            href={`${
+              config?.KEEP_DOCS_URL || "https://docs.keephq.dev"
+            }/overview/presets`}
+            target="_blank"
+          >
             <Icon
               icon={InformationCircleIcon}
               variant="simple"

keep-ui/app/(keep)/extraction/extractions-table.tsx

@@ -27,6 +27,7 @@ import { HiMiniXMark } from "react-icons/hi2";
 import { useState } from "react";
 import { useApi } from "@/shared/lib/hooks/useApi";
 import { showErrorToast } from "@/shared/ui";
+import { useConfig } from "@/utils/hooks/useConfig";
 
 const columnHelper = createColumnHelper<ExtractionRule>();
 
@@ -52,6 +53,7 @@ export default function RulesTable({
   editCallback,
 }: Props) {
   const api = useApi();
+  const { data: config } = useConfig();
   const { mutate } = useMappings();
   const [expanded, setExpanded] = useState<ExpandedState>({});
 
@@ -144,13 +146,18 @@ export default function RulesTable({
       header: () => (
         <div className="flex items-center">
           Condition{" "}
-          <a href="https://docs.keephq.dev/overview/presets" target="_blank">
+          <a
+            href={`${
+              config?.KEEP_DOCS_URL || "https://docs.keephq.dev"
+            }/overview/enrichment/extraction`}
+            target="_blank"
+          >
             <Icon
               icon={QuestionMarkCircleIcon}
               variant="simple"
               color="gray"
               size="sm"
-              tooltip="CEL based condition"
+              tooltip="See extractions documentation for more information"
             />
           </a>
         </div>

keep-ui/app/(keep)/providers/page.client.tsx

@@ -8,15 +8,13 @@ import { toast } from "react-toastify";
 import { useProviders } from "@/utils/hooks/useProviders";
 import { showErrorToast } from "@/shared/ui";
 import { Link } from "@/components/ui";
-
-const EXTERNAL_URL_DOCS_URL =
-  "https://docs.keephq.dev/development/external-url";
+import { useConfig } from "@/utils/hooks/useConfig";
 
 export const useFetchProviders = () => {
   const [providers, setProviders] = useState<Provider[]>([]);
   const [installedProviders, setInstalledProviders] = useState<Provider[]>([]);
   const [linkedProviders, setLinkedProviders] = useState<Provider[]>([]); // Added state for linkedProviders
-
+  const { data: config } = useConfig();
   const { data, error } = useProviders();
 
   if (error) {
@@ -30,7 +28,9 @@ export const useFetchProviders = () => {
       Webhooks are disabled because Keep is not accessible from the internet.
       <br />
       <Link
-        href={EXTERNAL_URL_DOCS_URL}
+        href={`${
+          config?.KEEP_DOCS_URL || "https://docs.keephq.dev"
+        }/development/external-url`}
         target="_blank"
         rel="noreferrer noopener"
       >
@@ -48,7 +48,11 @@ export const useFetchProviders = () => {
         type: "info",
         position: toast.POSITION.TOP_CENTER,
         autoClose: 10000,
-        onClick: () => window.open(EXTERNAL_URL_DOCS_URL, "_blank"),
+        onClick: () =>
+          window.open(
+            `${config?.KEEP_DOCS_URL || "https://docs.keephq.dev"}`,
+            "_blank"
+          ),
         style: {
           width: "250%", // Set width
           marginLeft: "-75%", // Adjust starting position to left

keep-ui/app/(keep)/providers/provider-form.tsx

@@ -49,6 +49,7 @@ import { useProviders } from "@/utils/hooks/useProviders";
 import { getZodSchema } from "./form-validation";
 import TimeAgo from "react-timeago";
 import { useApi } from "@/shared/lib/hooks/useApi";
+import { useConfig } from "@/utils/hooks/useConfig";
 import { KeepApiError, KeepApiReadOnlyError } from "@/shared/api";
 import { showErrorToast } from "@/shared/ui";
 import {
@@ -145,6 +146,7 @@ const ProviderForm = ({
   );
 
   const api = useApi();
+  const { data: config } = useConfig();
 
   function installWebhook(provider: Provider) {
     return toast.promise(
@@ -514,7 +516,11 @@ const ProviderForm = ({
 
       <div className="w-full mt-2" key="install_webhook">
         {provider.can_setup_webhook && !installedProvidersMode && (
-          <div className={`${isLocalhost ? "bg-gray-100 p-2 rounded-tremor-default" : ""}`}>
+          <div
+            className={`${
+              isLocalhost ? "bg-gray-100 p-2 rounded-tremor-default" : ""
+            }`}
+          >
             <div className="flex items-center">
               <input
                 type="checkbox"
@@ -568,7 +574,9 @@ const ProviderForm = ({
                   color="gray"
                 >
                   <a
-                    href="https://docs.keephq.dev/development/external-url"
+                    href={`${
+                      config?.KEEP_DOCS_URL || "https://docs.keephq.dev"
+                    }/development/external-url`}
                     target="_blank"
                     rel="noopener noreferrer"
                   >
@@ -645,7 +653,9 @@ const ProviderForm = ({
             </Badge>
           )}
           <Link
-            href={`http://docs.keephq.dev/providers/documentation/${provider.type}-provider`}
+            href={`${
+              config?.KEEP_DOCS_URL || "http://docs.keephq.dev"
+            }/providers/documentation/${provider.type}-provider`}
             target="_blank"
           >
             <Icon

keep-ui/app/(keep)/providers/provider-logs.tsx

@@ -4,6 +4,7 @@ import { useProviderLogs, ProviderLog } from "@/utils/hooks/useProviderLogs";
 import { EmptyStateCard } from "@/components/ui/EmptyStateCard";
 import { ArrowPathIcon } from "@heroicons/react/24/outline";
 import { KeepApiError } from "@/shared/api";
+import { useConfig } from "@/utils/hooks/useConfig";
 interface ProviderLogsProps {
   providerId: string;
 }
@@ -18,6 +19,7 @@ const LOG_LEVEL_COLORS = {
 
 const ProviderLogs: React.FC<ProviderLogsProps> = ({ providerId }) => {
   const { logs, isLoading, error, refresh } = useProviderLogs({ providerId });
+  const { data: config } = useConfig();
 
   if (isLoading) {
     return <Text>Loading logs...</Text>;
@@ -31,7 +33,12 @@ const ProviderLogs: React.FC<ProviderLogsProps> = ({ providerId }) => {
             title="Provider Logs Not Enabled"
             description="Provider logs need to be enabled on the backend. Please check the documentation for instructions on how to enable provider logs."
             buttonText="View Documentation"
-            onClick={() => window.open("https://docs.keephq.dev", "_blank")}
+            onClick={() =>
+              window.open(
+                `${config?.KEEP_DOCS_URL || "https://docs.keephq.dev"}`,
+                "_blank"
+              )
+            }
           />
         </div>
       );