Fix: Adjustments to upgrade docs (#3286)

web/client/openapi.json

@@ -697,9 +697,9 @@
     },
     "/api/modules": {
       "get": {
-        "summary": "Get Api Meta",
+        "summary": "Get Api Modules",
         "description": "Get the modules",
-        "operationId": "get_api_meta_api_modules_get",
+        "operationId": "get_api_modules_api_modules_get",
         "responses": {
           "200": {
             "description": "Successful Response",
@@ -708,7 +708,7 @@
                 "schema": {
                   "items": { "$ref": "#/components/schemas/Modules" },
                   "type": "array",
-                  "title": "Response Get Api Meta Api Modules Get"
+                  "title": "Response Get Api Modules Api Modules Get"
                 }
               }
             }
@@ -1205,13 +1205,19 @@
           "previous_finalized_snapshots": {
             "anyOf": [{ "items": {}, "type": "array" }, { "type": "null" }],
             "title": "Previous Finalized Snapshots"
+          },
+          "requirements": {
+            "additionalProperties": { "type": "string" },
+            "type": "object",
+            "title": "Requirements",
+            "default": {}
           }
         },
         "additionalProperties": false,
         "type": "object",
         "required": ["snapshots", "start_at", "plan_id"],
         "title": "Environment",
-        "description": "Represents an isolated environment.\n\nEnvironments are isolated workspaces that hold pointers to physical tables.\n\nArgs:\n    snapshots: The snapshots that are part of this environment.\n    start_at: The start time of the environment.\n    end_at: The end time of the environment.\n    plan_id: The ID of the plan that last updated this environment.\n    previous_plan_id: The ID of the previous plan that updated this environment.\n    expiration_ts: The timestamp when this environment will expire.\n    finalized_ts: The timestamp when this environment was finalized.\n    promoted_snapshot_ids: The IDs of the snapshots that are promoted in this environment\n        (i.e. for which the views are created). If not specified, all snapshots are promoted.\n    previous_finalized_snapshots: Snapshots that were part of this environment last time it was finalized."
+        "description": "Represents an isolated environment.\n\nEnvironments are isolated workspaces that hold pointers to physical tables.\n\nArgs:\n    snapshots: The snapshots that are part of this environment.\n    start_at: The start time of the environment.\n    end_at: The end time of the environment.\n    plan_id: The ID of the plan that last updated this environment.\n    previous_plan_id: The ID of the previous plan that updated this environment.\n    expiration_ts: The timestamp when this environment will expire.\n    finalized_ts: The timestamp when this environment was finalized.\n    promoted_snapshot_ids: The IDs of the snapshots that are promoted in this environment\n        (i.e. for which the views are created). If not specified, all snapshots are promoted.\n    previous_finalized_snapshots: Snapshots that were part of this environment last time it was finalized.\n    requirements: A mapping of library versions for all the snapshots in this environment."
       },
       "EnvironmentSuffixTarget": {
         "type": "string",
@@ -1404,6 +1410,10 @@
             "anyOf": [{ "type": "string" }, { "type": "null" }],
             "title": "Sql"
           },
+          "definition": {
+            "anyOf": [{ "type": "string" }, { "type": "null" }],
+            "title": "Definition"
+          },
           "default_catalog": {
             "anyOf": [{ "type": "string" }, { "type": "null" }],
             "title": "Default Catalog"
@@ -1467,6 +1477,10 @@
             "anyOf": [{ "type": "integer" }, { "type": "null" }],
             "title": "Retention"
           },
+          "table_format": {
+            "anyOf": [{ "type": "string" }, { "type": "null" }],
+            "title": "Table Format"
+          },
           "storage_format": {
             "anyOf": [{ "type": "string" }, { "type": "null" }],
             "title": "Storage Format"

web/client/src/App.tsx

@@ -1,8 +1,6 @@
-import { useEffect, Suspense } from 'react'
+import { useEffect, Suspense, lazy } from 'react'
 import { RouterProvider } from 'react-router-dom'
 import { Divider } from '@components/divider/Divider'
-import Header from './library/pages/root/Header'
-import Footer from './library/pages/root/Footer'
 import { getBrowserRouter } from './routes'
 import { useApiModules } from './api'
 import { useStoreContext } from '@context/context'
@@ -11,6 +9,13 @@ import {
   EnumErrorKey,
   useNotificationCenter,
 } from './library/pages/root/context/notificationCenter'
+import { isNotNil } from './utils'
+
+const IS_HEADLESS: boolean = Boolean((window as any).__IS_HEADLESS__ ?? false)
+const Header: Optional<React.LazyExoticComponent<() => JSX.Element>> =
+  IS_HEADLESS ? undefined : lazy(() => import('./library/pages/root/Header'))
+const Footer: Optional<React.LazyExoticComponent<() => JSX.Element>> =
+  IS_HEADLESS ? undefined : lazy(() => import('./library/pages/root/Footer'))
 
 export default function App(): JSX.Element {
   const { addError } = useNotificationCenter()
@@ -38,8 +43,12 @@ export default function App(): JSX.Element {
 
   return (
     <>
-      <Header />
-      <Divider />
+      {isNotNil(Header) && (
+        <>
+          <Header />
+          <Divider />
+        </>
+      )}
       <main className="h-full overflow-hidden relative">
         {isFetching && (
           <LoadingSegment className="absolute w-full h-full bg-theme z-10">
@@ -50,8 +59,12 @@ export default function App(): JSX.Element {
           <RouterProvider router={router} />
         </Suspense>
       </main>
-      <Divider />
-      <Footer />
+      {isNotNil(Footer) && (
+        <>
+          <Divider />
+          <Footer />
+        </>
+      )}
     </>
   )
 }

web/client/src/api/channels.ts

@@ -1,7 +1,12 @@
 import { isFalse, isNil, isNotNil } from '../utils'
+import { getUrlPrefix } from './instance'
 
 type ChannelCallback<TData = any> = (data: TData) => void
-interface Channel {
+export type EventSourceChannel = <TData = any>(
+  topic: string,
+  callback?: ChannelCallback<TData>,
+) => Channel
+export interface Channel {
   subscribe: () => void
   unsubscribe: () => void
 }
@@ -120,12 +125,16 @@ class EventSourceConnection {
   }
 }
 
-const Connection = new EventSourceConnection('/api/events', DELAY_AND_RECONNECT)
+let Connection: EventSourceConnection
 
 export function useChannelEvents(): <TData = any>(
   topic: string,
   callback?: ChannelCallback<TData>,
 ) => Channel {
+  if (isNil(Connection)) {
+    Connection = new EventSourceConnection(`${getUrlPrefix()}api/events`)
+  }
+
   return (topic, callback) => ({
     subscribe() {
       if (

web/client/src/api/index.ts

@@ -49,7 +49,7 @@ import {
   type BodyInitiateApplyApiCommandsApplyPostCategories,
   type Model,
   getModelApiModelsNameGet,
-  getApiMetaApiModulesGet,
+  getApiModulesApiModulesGet,
   type Modules,
   type ColumnLineageApiLineageModelNameColumnNameGetParams,
 } from './client'
@@ -95,7 +95,7 @@ export function useApiModules(
   return useQueryWithTimeout(
     {
       queryKey: ['/api/modules'],
-      queryFn: getApiMetaApiModulesGet,
+      queryFn: getApiModulesApiModulesGet,
       enabled: true,
     },
     {

web/client/src/api/instance.ts

@@ -1,8 +1,6 @@
 import { isNil } from '@utils/index'
 import { tableFromIPC } from 'apache-arrow'
 
-const baseURL = window.location.origin
-
 export interface ResponseWithDetail {
   ok: boolean
   detail?: string
@@ -36,10 +34,12 @@ export async function fetchAPI<T = any, B extends object = any>(
 ): Promise<T & ResponseWithDetail> {
   const { url, method, params, data, headers, credentials, mode, cache } =
     config
-
   const hasSearchParams = Object.keys({ ...params }).length > 0
   const fullUrl = url.replace(/([^:]\/)\/+/g, '$1')
-  const input = new URL(fullUrl, baseURL)
+  const input = new URL(
+    `${getUrlPrefix()}${fullUrl}`.replaceAll('//', '/'),
+    window.location.origin,
+  )
 
   if (hasSearchParams) {
     const searchParams: Record<string, string> = Object.entries({
@@ -120,4 +120,8 @@ function toRequestBody(obj: unknown): BodyInit {
   }
 }
 
+export function getUrlPrefix(): string {
+  return (window as any).__BASE_URL__ ?? '/'
+}
+
 export default fetchAPI

web/client/src/context/context.ts

@@ -51,7 +51,7 @@ const PROD = 'prod'
 
 const environments = new Set(ModelEnvironment.getEnvironments())
 const environment =
-  ModelEnvironment.getEnvironment() ?? environments.values().next().value
+  ModelEnvironment.getEnvironment() ?? environments.values().next().value!
 
 export const useStoreContext = create<ContextStore>((set, get) => ({
   version: undefined,
@@ -137,7 +137,7 @@ export const useStoreContext = create<ContextStore>((set, get) => ({
     }))
   },
   getNextEnvironment() {
-    return get().environments.values().next().value
+    return get().environments.values().next().value ?? environment
   },
   isExistingEnvironment(environment) {
     const s = get()

web/client/src/context/project.ts

@@ -28,7 +28,7 @@ interface ProjectStore {
   selectedFile?: ModelFile
   setSelectedFile: (selectedFile?: ModelFile) => void
   findArtifactByPath: (path: string) => ModelArtifact | undefined
-  refreshFiles: () => void
+  refreshFiles: (files?: ModelFile[]) => void
   inActiveRange: (artifact: ModelArtifact) => boolean
 }
 
@@ -83,10 +83,10 @@ export const useStoreProject = create<ProjectStore>((set, get) => ({
 
     return ModelArtifact.findArtifactByPath(s.project, path)
   },
-  refreshFiles() {
+  refreshFiles(files) {
     const s = get()
 
-    s.setFiles(s.project.allFiles)
+    s.setFiles(files ?? s.project.allFiles)
   },
 }))
 

web/client/src/library/components/documentation/Documentation.tsx

@@ -5,6 +5,7 @@ import Markdown from 'react-markdown'
 import {
   isArrayNotEmpty,
   isFalse,
+  isNotNil,
   isString,
   isTrue,
   toDateFormat,
@@ -19,12 +20,8 @@ const Documentation = function Documentation({
   withModel = true,
   withDescription = true,
   withColumns = true,
-  withCode = true,
-  withQuery = true,
 }: {
   model: ModelSQLMeshModel
-  withCode?: boolean
-  withQuery?: boolean
   withModel?: boolean
   withDescription?: boolean
   withColumns?: boolean
@@ -37,10 +34,12 @@ const Documentation = function Documentation({
           defaultOpen={true}
         >
           <ul className="w-full">
-            <DetailsItem
-              name="Path"
-              value={model.path}
-            />
+            {isNotNil(model.path) && (
+              <DetailsItem
+                name="Path"
+                value={model.path}
+              />
+            )}
             <DetailsItem
               name="Name"
               title={model.displayName}

web/client/src/library/components/editor/EditorCode.tsx

@@ -319,7 +319,7 @@ function CodeEditorRemoteFile({
         file.update(data)
       }
 
-      refreshFiles()
+      refreshFiles(Array.from(files.values()))
     })
 
     return () => {

web/client/src/library/components/graph/ModelColumns.tsx

@@ -580,6 +580,12 @@ function ColumnDisplay({
   withDescription?: boolean
   className?: string
 }): JSX.Element {
+  let decodedColumnName = columnName
+
+  try {
+    decodedColumnName = decodeURI(columnName)
+  } catch {}
+
   return (
     <div
       className={clsx(
@@ -590,7 +596,7 @@ function ColumnDisplay({
     >
       <div className="w-full flex justify-between items-center">
         <span
-          title={decodeURI(columnName)}
+          title={decodedColumnName}
           className={clsx('flex items-center', disabled && 'opacity-50')}
         >
           {disabled && (
@@ -599,7 +605,7 @@ function ColumnDisplay({
               className="w-3 h-3 mr-2"
             />
           )}
-          {truncate(decodeURI(columnName), 50, 20)}
+          {truncate(decodedColumnName, 50, 20)}
         </span>
         <span className="inline-block ml-2 text-[0.5rem] font-black opacity-60">
           {columnType}

web/client/src/library/components/graph/ModelNode.tsx

@@ -50,7 +50,13 @@ export default function ModelNode({
     const modelColumns = model?.columns ?? []
 
     Object.keys(lineage[id]?.columns ?? {}).forEach((column: string) => {
-      const found = modelColumns.find(({ name }) => name === decodeURI(column))
+      const found = modelColumns.find(({ name }) => {
+        try {
+          return name === decodeURI(column)
+        } catch {
+          return name === column
+        }
+      })
 
       if (isNil(found)) {
         modelColumns.push({ name: column, type: EnumColumnType.UNKNOWN })