Fix: Rename docs to catalog to keep routes consistent (SQLMesh#3391)

mykalmax · web-flow · commit e218a358ffb9 · 2024-11-26T08:23:02.000-08:00
diff --git a/docs/guides/ui.md b/docs/guides/ui.md
@@ -56,7 +56,7 @@ The UI modules are:
 
 - [Code editor](#editor-module)
 - [Plan builder](#plan-module)
-- [Project documentation](#docs-module)
+- [Data catalog](#data-catalog-module)
 - [Table and column lineage](#lineage-module)
 
 The screenshots in most examples below use the default `editor` mode.
@@ -75,7 +75,7 @@ The `editor` module will appear by default if the UI is started without specifyi
 
 It also contains nine buttons:
 
-1. Toggle Editor/Docs/Errors/Plan toggles among the editor module (default), docs module, errors view, and plan module. Errors view is only available if an error has occurred.
+1. Toggle Editor/Data Catalog/Errors/Plan toggles among the editor module (default), data catalog module, errors view, and plan module. Errors view is only available if an error has occurred.
 2. History navigation returns to previous views, similar to the back button in a web browser.
 3. Add new tab opens a new code editor window.
 4. Plan opens the plan module.
@@ -194,19 +194,19 @@ Click the blue `Apply Changes And Backfill` button to apply the plan and execute
 
 ![Plan after applying updated plan with modified model](./ui/ui-quickstart_apply-plan-dev-modified.png){ loading=lazy }
 
-### Docs module
+### Data Catalog module
 
-The docs module displays information about all your project's models in one interface.
+The data catalog module displays information about all your project's models in one interface.
 
 A list of all models is displayed in the left-hand pane. You can filter models by name by typing in the field at the top of the pane.
 
 When you choose a model, its query, lineage, and attributes are displayed. This example shows information from the [quickstart project](../quick_start.md) incremental model:
 
-![Docs with incremental model selected](./ui/ui-guide_docs.png){ loading=lazy }
+![Data Catalog with incremental model selected](./ui/ui-guide_docs.png){ loading=lazy }
 
 By default, the model definition source code is displayed. If you toggle to `Compiled Query`, it will display an example of the model query rendered with macro values substituted:
 
-![Docs with compiled incremental model query](./ui/ui-guide_docs-compiled-query.png){ loading=lazy }
+![Data Catalog with compiled incremental model query](./ui/ui-guide_docs-compiled-query.png){ loading=lazy }
 
 ### Lineage module
 
@@ -232,9 +232,9 @@ You may specify the UI mode as an option when you [start the UI on the command l
 
 The UI modes contain these modules:
 
-- `editor`: code editor, plan builder, project documentation, table and column lineage
-- `plan`: plan builder, project documentation, table and column lineage
-- `docs`: project documentation, table and column lineage
+- `editor`: code editor, plan builder, data catalog, table and column lineage
+- `plan`: plan builder, data catalog, table and column lineage
+- `catalog`: data catalog, table and column lineage
 
 ### Working with an IDE
 
diff --git a/docs/quickstart/ui.md b/docs/quickstart/ui.md
@@ -166,7 +166,7 @@ The SQLMesh UI default view contains five panes:
 
 It also contains nine buttons:
 
-1. Toggle Editor/Docs/Errors toggles among the Code Editor (default), Docs, and Errors views. Errors view is only available if an error has occurred.
+1. Toggle Editor/Data Catalog/Errors toggles among the Code Editor (default), Data Catalog, and Errors views. Errors view is only available if an error has occurred.
 2. History navigation returns to previous views, similar to the back button in a web browser.
 3. Add new tab opens a new code editor window.
 4. Run plan command executes the [`sqlmesh plan` command](../reference/cli.md#plan).
diff --git a/sqlmesh/cli/main.py b/sqlmesh/cli/main.py
@@ -702,9 +702,9 @@ def info(obj: Context, skip_connection: bool, verbose: bool) -> None:
 )
 @click.option(
     "--mode",
-    type=click.Choice(["ide", "default", "docs", "plan"], case_sensitive=False),
-    default="default",
-    help="Mode to start the UI in. Default: default",
+    type=click.Choice(["ide", "catalog", "docs", "plan"], case_sensitive=False),
+    default="ide",
+    help="Mode to start the UI in. Default: ide",
 )
 @click.pass_context
 @error_handler
diff --git a/web/client/openapi.json b/web/client/openapi.json
@@ -1592,7 +1592,7 @@
         "enum": [
           "editor",
           "files",
-          "docs",
+          "data-catalog",
           "plans",
           "tests",
           "audits",
diff --git a/web/client/src/App.tsx b/web/client/src/App.tsx
@@ -39,7 +39,7 @@ export default function App(): JSX.Element {
     }
   }, [])
 
-  const router = getBrowserRouter(modules.list)
+  const router = getBrowserRouter(modules)
 
   return (
     <>
diff --git a/web/client/src/api/instance.ts b/web/client/src/api/instance.ts
@@ -1,6 +1,12 @@
-import { isNil } from '@utils/index'
+import { isNil, isStringEmptyOrNil } from '@utils/index'
 import { tableFromIPC } from 'apache-arrow'
 
+declare global {
+  interface Window {
+    __BASE_URL__?: string
+  }
+}
+
 export interface ResponseWithDetail {
   ok: boolean
   detail?: string
@@ -121,7 +127,7 @@ function toRequestBody(obj: unknown): BodyInit {
 }
 
 export function getUrlPrefix(): string {
-  return (window as any).__BASE_URL__ ?? '/'
+  return isStringEmptyOrNil(window.__BASE_URL__) ? '/' : window.__BASE_URL__
 }
 
 export default fetchAPI
diff --git a/web/client/src/library/components/editor/EditorPreview.tsx b/web/client/src/library/components/editor/EditorPreview.tsx
@@ -59,7 +59,7 @@ export default function EditorPreview({
   const [activeTabIndex, setActiveTabIndex] = useState(-1)
 
   const modelExtensions = useSQLMeshModelExtensions(tab.file.path, model => {
-    navigate(`${EnumRoutes.DocsModels}/${model.name}`)
+    navigate(`${EnumRoutes.DataCatalogModels}/${model.name}`)
   })
 
   const model = models.get(tab.file.path)
diff --git a/web/client/src/library/components/editor/EditorTabs.tsx b/web/client/src/library/components/editor/EditorTabs.tsx
@@ -70,7 +70,7 @@ export default function EditorTabs(): JSX.Element {
     }
 
     selectTab(newTab)
-  }, [selectedFile])
+  }, [selectedFile, modules])
 
   useEffect(() => {
     if (isNil(lastSelectedModel)) return
@@ -132,7 +132,6 @@ function Tab({ tab, title }: { tab: EditorTab; title: string }): JSX.Element {
   const setSelectedFile = useStoreProject(s => s.setSelectedFile)
 
   const activeTab = useStoreEditor(s => s.tab)
-  const selectTab = useStoreEditor(s => s.selectTab)
   const closeTab = useStoreEditor(s => s.closeTab)
 
   useEffect(() => {
@@ -178,7 +177,6 @@ function Tab({ tab, title }: { tab: EditorTab; title: string }): JSX.Element {
       onClick={(e: MouseEvent) => {
         e.stopPropagation()
 
-        selectTab(tab)
         setSelectedFile(tab.file)
       }}
     >
diff --git a/web/client/src/library/components/moduleNavigation/ModuleNavigation.tsx b/web/client/src/library/components/moduleNavigation/ModuleNavigation.tsx
@@ -46,10 +46,10 @@ export default function ModuleNavigation({
           iconActive={<FolderIcon className="min-w-6 w-6" />}
         />
       )}
-      {modules.hasDocs && (
+      {modules.hasDataCatalog && (
         <ModuleLink
-          title="Docs"
-          to={EnumRoutes.Docs}
+          title="Data Catalog"
+          to={EnumRoutes.DataCatalog}
           icon={<OutlineDocumentTextIcon className="min-w-6 w-6" />}
           iconActive={<DocumentTextIcon className="min-w-6 w-6" />}
           className="relative rounded-xl my-1 px-2 py-1 h-10 hover:bg-neutral-5 dark:hover:bg-neutral-10 text-neutral-600 dark:text-neutral-300"
diff --git a/web/client/src/library/pages/data-catalog/DataCatalog.tsx b/web/client/src/library/pages/data-catalog/DataCatalog.tsx
@@ -28,7 +28,7 @@ import { useApiModel } from '@api/index'
 import Loading from '@components/loading/Loading'
 import Spinner from '@components/logo/Spinner'
 
-export default function PageDocs(): JSX.Element {
+export default function PageDataCatalog(): JSX.Element {
   const { modelName = '' } = useParams()
 
   const navigate = useNavigate()
@@ -76,7 +76,7 @@ export default function PageDocs(): JSX.Element {
 
     if (isNil(model)) return
 
-    navigate(EnumRoutes.DocsModels + '/' + model.name)
+    navigate(`${EnumRoutes.DataCatalogModels}/${model.name}`)
   }
 
   function handleError(error: ErrorIDE): void {
@@ -87,11 +87,11 @@ export default function PageDocs(): JSX.Element {
     <div className="flex overflow-auto w-full h-full">
       {isNil(model) ? (
         <NotFound
-          link={EnumRoutes.Docs}
+          link={EnumRoutes.DataCatalog}
           description={
             isNil(modelName) ? undefined : `Model ${modelName} Does Not Exist`
           }
-          message="Back To Docs"
+          message="Back To Data Catalog"
         />
       ) : (
         <LineageFlowProvider
diff --git a/web/client/src/library/pages/plan/Content.tsx b/web/client/src/library/pages/plan/Content.tsx
@@ -37,7 +37,7 @@ export default function Content(): JSX.Element {
               ? undefined
               : `Environment ${environmentName} Does Not Exist`
           }
-          message="Back To Docs"
+          message="Back To Data Catalog"
         />
       ) : (
         <Plan />
diff --git a/web/client/src/library/pages/root/Root.tsx b/web/client/src/library/pages/root/Root.tsx
@@ -54,7 +54,11 @@ import { type EnvironmentName } from '@models/environment'
 import { EnumPlanAction, ModelPlanAction } from '@models/plan-action'
 import { useChannelEvents, type EventSourceChannel } from '@api/channels'
 
-export default function Root(): JSX.Element {
+export default function Root({
+  content,
+}: {
+  content?: React.ReactNode
+}): JSX.Element {
   const location = useLocation()
   const navigate = useNavigate()
 
@@ -73,7 +77,7 @@ export default function Root(): JSX.Element {
   const setEnvironment = useStoreContext(s => s.setEnvironment)
   let channel: EventSourceChannel
 
-  if (isFalse(modules.hasOnlyDocs)) {
+  if (isFalse(modules.hasOnlyDataCatalog)) {
     channel = useChannelEvents()
   }
 
@@ -370,7 +374,7 @@ export default function Root(): JSX.Element {
         cancelRequestFile()
       }
     }
-  }, [])
+  }, [modules])
 
   useEffect(() => {
     const channelPlanApply = channel?.('plan-apply', updatePlanApplyTracker)
@@ -384,7 +388,7 @@ export default function Root(): JSX.Element {
         channelPlanApply?.unsubscribe()
       }
     }
-  }, [updatePlanApplyTracker])
+  }, [updatePlanApplyTracker, modules])
 
   useEffect(() => {
     const channelPlanOverview = channel?.(
@@ -401,7 +405,7 @@ export default function Root(): JSX.Element {
         channelPlanOverview?.unsubscribe()
       }
     }
-  }, [updatePlanOverviewTracker])
+  }, [updatePlanOverviewTracker, modules])
 
   useEffect(() => {
     const channelPlanCancel = channel?.('plan-cancel', updatePlanCancelTracker)
@@ -415,7 +419,7 @@ export default function Root(): JSX.Element {
         channelPlanCancel?.unsubscribe()
       }
     }
-  }, [updatePlanCancelTracker])
+  }, [updatePlanCancelTracker, modules])
 
   useEffect(() => {
     const channelFile = channel?.('file', updateFiles)
@@ -438,10 +442,13 @@ export default function Root(): JSX.Element {
   }, [formatFile])
 
   useEffect(() => {
-    if (location.pathname === EnumRoutes.Home) {
+    if (
+      (isFalse(modules.isEmpty) && location.pathname === EnumRoutes.Home) ||
+      location.pathname === ''
+    ) {
       navigate(modules.defaultNavigationRoute(), { replace: true })
     }
-  }, [location])
+  }, [location, modules])
 
   useEffect(() => {
     setShowConfirmation(confirmations.length > 0)
@@ -498,7 +505,7 @@ export default function Root(): JSX.Element {
             <Divider />
           </>
         )}
-        <Outlet />
+        {content ?? <Outlet />}
         <ModalConfirmation
           show={showConfirmation}
           onClose={() => {
diff --git a/web/client/src/models/module-controller.ts b/web/client/src/models/module-controller.ts
@@ -40,8 +40,8 @@ export class ModelModuleController extends ModelInitial {
     return this.modules.size === 2 && this.hasProjectEditor
   }
 
-  get hasOnlyDocs(): boolean {
-    return this.modules.size === 1 && this.hasDocs
+  get hasOnlyDataCatalog(): boolean {
+    return this.modules.size === 1 && this.hasDataCatalog
   }
 
   get hasProjectEditorAndModule(): boolean {
@@ -52,8 +52,8 @@ export class ModelModuleController extends ModelInitial {
     )
   }
 
-  get hasDocs(): boolean {
-    return this.modules.has(Modules.docs)
+  get hasDataCatalog(): boolean {
+    return this.modules.has(Modules['data-catalog'])
   }
 
   get hasPlans(): boolean {
@@ -102,7 +102,7 @@ export class ModelModuleController extends ModelInitial {
       this.hasSingleModule ||
       this.hasOnlyProjectEditor ||
       this.hasModuleAndErrors ||
-      this.hasOnlyDocs
+      this.hasOnlyDataCatalog
     )
       return false
     if (this.hasProjectEditorAndModule) return true
@@ -114,10 +114,10 @@ export class ModelModuleController extends ModelInitial {
     if (
       this.hasOnlyProjectEditor ||
       this.hasModuleAndErrors ||
-      this.hasOnlyDocs
+      this.hasOnlyDataCatalog
     )
       return false
-    if (this.hasProjectEditorAndModule || this.hasDocs) return true
+    if (this.hasProjectEditorAndModule || this.hasDataCatalog) return true
 
     return isFalse(this.isEmpty)
   }
@@ -132,8 +132,8 @@ export class ModelModuleController extends ModelInitial {
 
   defaultNavigationRoute(): Routes {
     if (this.hasEditor) return EnumRoutes.Editor
-    if (this.hasDocs) return EnumRoutes.Docs
     if (this.hasPlans) return EnumRoutes.Plan
+    if (this.hasDataCatalog) return EnumRoutes.DataCatalog
 
     return EnumRoutes.NotFound
   }
diff --git a/web/client/src/routes.tsx b/web/client/src/routes.tsx
diff --git a/web/client/vite.config.ts b/web/client/vite.config.ts
diff --git a/web/server/models.py b/web/server/models.py
diff --git a/web/server/settings.py b/web/server/settings.py
diff --git a/web/server/watcher.py b/web/server/watcher.py

Original file line number	Diff line number	Diff line change
`@@ -702,9 +702,9 @@ def info(obj: Context, skip_connection: bool, verbose: bool) -> None:`
`702`	`702`	`)`
`703`	`703`	`@click.option(`
`704`	`704`	`"--mode",`
`705`		`- type=click.Choice(["ide", "default", "docs", "plan"], case_sensitive=False),`
`706`		`- default="default",`
`707`		`- help="Mode to start the UI in. Default: default",`
	`705`	`+ type=click.Choice(["ide", "catalog", "docs", "plan"], case_sensitive=False),`
	`706`	`+ default="ide",`
	`707`	`+ help="Mode to start the UI in. Default: ide",`
`708`	`708`	`)`
`709`	`709`	`@click.pass_context`
`710`	`710`	`@error_handler`
Original file line number	Diff line number	Diff line change
`@@ -39,7 +39,7 @@ export default function App(): JSX.Element {`
`39`	`39`	`}`
`40`	`40`	`}, [])`
`41`	`41`
`42`		`- const router = getBrowserRouter(modules.list)`
	`42`	`+ const router = getBrowserRouter(modules)`
`43`	`43`
`44`	`44`	`return (`
`45`	`45`	`<>`