static url open doc and analytics around open docs

Author: vsvamsi1

app/client/src/ce/constants/messages.ts

@@ -1949,6 +1949,7 @@ export const ERROR_IN_FETCHING_APP_SLUG_SUGGESTION = () =>
   "Error in fetching app slug suggestion. Please try again.";
 export const ERROR_IN_ENABLING_STATIC_URL = () =>
   "Error in enabling static URL. Please try again.";
+export const STATIC_URL_DOCS_LINK_TEXT = () => "Learn more in docs";
 
 export const PAGE_SETTINGS_PAGE_SLUG_CHECKING_MESSAGE = () =>
   "Checking availability...";

app/client/src/ce/utils/analyticsUtilTypes.ts

@@ -357,7 +357,8 @@ export type EventName =
   | "REQUEST_INTEGRATION_CTA"
   | "REQUEST_INTEGRATION_SUBMITTED"
   | "TABLE_WIDGET_V2_HTML_CELL_USAGE"
-  | PREMIUM_DATASOURCES_EVENTS;
+  | PREMIUM_DATASOURCES_EVENTS
+  | STATIC_URL_EVENTS;
 
 type HOMEPAGE_CREATE_APP_FROM_TEMPLATE_EVENTS =
   | "TEMPLATE_DROPDOWN_CLICK"
@@ -480,3 +481,7 @@ export type PREMIUM_DATASOURCES_EVENTS =
   | "PREMIUM_MODAL_NOT_RELEVANT_SUBMIT"
   | "SOON_INTEGRATION_CTA"
   | "SOON_NOTIFY_REQUEST";
+
+export type STATIC_URL_EVENTS =
+  // User Actions (UI Layer)
+  "STATIC_URL_DOCS_CLICK";

app/client/src/pages/AppIDE/components/AppSettings/components/GeneralSettings.tsx

@@ -23,18 +23,31 @@ import {
   createMessage,
   STATIC_URL_CHANGE_SUCCESS,
   STATIC_URL_DISABLED_SUCCESS,
+  STATIC_URL_DOCS_LINK_TEXT,
 } from "ee/constants/messages";
 import classNames from "classnames";
 import type { AppIconName } from "@appsmith/ads-old";
-import { Input, Switch, Text, Icon, Flex, Button, toast } from "@appsmith/ads";
+import {
+  Input,
+  Switch,
+  Text,
+  Icon,
+  Flex,
+  Button,
+  toast,
+  Tooltip,
+} from "@appsmith/ads";
 import { IconSelector } from "@appsmith/ads-old";
 import React, { useCallback, useMemo, useState } from "react";
 import { useEffect } from "react";
 import StaticURLConfirmationModal from "./StaticURLConfirmationModal";
 import { debounce } from "lodash";
 import { useDispatch, useSelector } from "react-redux";
+import AnalyticsUtil from "ee/utils/AnalyticsUtil";
 
 const APPLICATION_SLUG_REGEX = /^[a-z0-9-]+$/;
+const STATIC_URL_DOCS_URL =
+  "https://docs.appsmith.com/build-apps/how-to-guides/configure-static-app-urls";
 
 import {
   getCurrentApplication,
@@ -98,6 +111,8 @@ function GeneralSettings() {
   const appSlugSuggestion = useSelector(getAppSlugSuggestion);
   const isAppSlugSaving = useSelector(getIsPersistingAppSlug);
 
+  const staticUrlTooltipContent = createMessage(STATIC_URL_DOCS_LINK_TEXT);
+
   const [applicationName, setApplicationName] = useState(application?.name);
   const [isAppNameValid, setIsAppNameValid] = useState(true);
   const [applicationIcon, setApplicationIcon] = useState(
@@ -194,6 +209,15 @@ function GeneralSettings() {
     }
   }, [application?.staticUrlSettings?.uniqueSlug, dispatch]);
 
+  const openStaticUrlDocs = useCallback(() => {
+    AnalyticsUtil.logEvent("STATIC_URL_DOCS_CLICK", {
+      source: "general_settings",
+      applicationId,
+    });
+
+    window.open(STATIC_URL_DOCS_URL, "_blank");
+  }, [applicationId]);
+
   const updateAppSettings = useCallback(
     debounce((icon?: AppIconName) => {
       const isAppNameUpdated = applicationName !== application?.name;
@@ -277,11 +301,14 @@ function GeneralSettings() {
       return `${application?.staticUrlSettings?.uniqueSlug || ""}/${pageSlug}`;
     }
   }, [
+    currentAppPage?.uniqueSlug,
+    currentAppPage?.slug,
+    currentAppPage?.customSlug,
     modalType,
     application?.staticUrlSettings?.uniqueSlug,
-    application?.slug,
     application?.staticUrlSettings?.enabled,
-    currentAppPage,
+    application?.slug,
+    currentBasePageId,
   ]);
 
   const modalNewSlug = useMemo(() => {
@@ -367,12 +394,7 @@ function GeneralSettings() {
     }
 
     return undefined;
-  }, [
-    isFetchingAppSlugSuggestion,
-    applicationSlug,
-    isClientSideSlugValid,
-    isApplicationSlugValid,
-  ]);
+  }, [isFetchingAppSlugSuggestion, applicationSlug, isClientSideSlugValid]);
 
   const isApplicationSlugInputValid = useMemo(() => {
     if (isFetchingAppSlugSuggestion) return true;
@@ -455,7 +477,18 @@ function GeneralSettings() {
             isSelected={isStaticUrlToggleEnabled}
             onChange={handleStaticUrlToggle}
           >
-            <Text kind="action-m">Static URL</Text>
+            <Flex alignItems="center" gap="spaces-2">
+              <Text kind="action-m">Static URL</Text>
+              <Tooltip content={staticUrlTooltipContent}>
+                <Button
+                  isIconButton
+                  kind="tertiary"
+                  onClick={openStaticUrlDocs}
+                  size="sm"
+                  startIcon="question-line"
+                />
+              </Tooltip>
+            </Flex>
           </Switch>
         </div>
       )}

app/client/src/pages/AppIDE/components/AppSettings/components/PageSettings.tsx

@@ -278,7 +278,14 @@ function PageSettings(props: { page: Page }) {
 
     setIsPageNameSaving(true);
     dispatch(updatePageAction(payload));
-  }, [page.pageId, page.pageName, pageName, pageNameError]);
+  }, [
+    canManagePages,
+    dispatch,
+    page.pageId,
+    page.pageName,
+    pageName,
+    pageNameError,
+  ]);
 
   const saveCustomSlug = useCallback(() => {
     if (!canManagePages || page.customSlug === customSlug) return;