SQLMesh · mykalmax · Mar 11, 2024 · Feb 29, 2024 · Mar 11, 2024
diff --git a/web/client/openapi.json b/web/client/openapi.json
@@ -883,6 +883,13 @@
             "allOf": [{ "$ref": "#/components/schemas/NodeType" }],
             "default": "model"
           },
+          "parents": {
+            "items": { "type": "string" },
+            "type": "array",
+            "uniqueItems": true,
+            "title": "Parents",
+            "default": []
+          },
           "interval": {
             "items": { "type": "string" },
             "type": "array",
@@ -902,6 +909,13 @@
             "allOf": [{ "$ref": "#/components/schemas/NodeType" }],
             "default": "model"
           },
+          "parents": {
+            "items": { "type": "string" },
+            "type": "array",
+            "uniqueItems": true,
+            "title": "Parents",
+            "default": []
+          },
           "completed": { "type": "integer", "title": "Completed" },
           "total": { "type": "integer", "title": "Total" },
           "start": { "type": "integer", "title": "Start" },
@@ -972,6 +986,18 @@
               { "$ref": "#/components/schemas/PlanOptions" },
               { "type": "null" }
             ]
+          },
+          "categories": {
+            "anyOf": [
+              {
+                "additionalProperties": {
+                  "$ref": "#/components/schemas/SnapshotChangeCategory"
+                },
+                "type": "object"
+              },
+              { "type": "null" }
+            ],
+            "title": "Categories"
           }
         },
         "type": "object",
@@ -1006,13 +1032,26 @@
             "allOf": [{ "$ref": "#/components/schemas/NodeType" }],
             "default": "model"
           },
+          "parents": {
+            "items": { "type": "string" },
+            "type": "array",
+            "uniqueItems": true,
+            "title": "Parents",
+            "default": []
+          },
           "diff": { "type": "string", "title": "Diff" },
           "indirect": {
             "items": { "$ref": "#/components/schemas/ChangeDisplay" },
             "type": "array",
             "title": "Indirect",
             "default": []
           },
+          "direct": {
+            "items": { "$ref": "#/components/schemas/ChangeDisplay" },
+            "type": "array",
+            "title": "Direct",
+            "default": []
+          },
           "change_category": {
             "anyOf": [
               { "$ref": "#/components/schemas/SnapshotChangeCategory" },
@@ -1031,6 +1070,13 @@
           "node_type": {
             "allOf": [{ "$ref": "#/components/schemas/NodeType" }],
             "default": "model"
+          },
+          "parents": {
+            "items": { "type": "string" },
+            "type": "array",
+            "uniqueItems": true,
+            "title": "Parents",
+            "default": []
           }
         },
         "type": "object",
@@ -1045,10 +1091,11 @@
             "allOf": [{ "$ref": "#/components/schemas/NodeType" }],
             "default": "model"
           },
-          "direct": {
-            "items": { "$ref": "#/components/schemas/ChangeDisplay" },
+          "parents": {
+            "items": { "type": "string" },
             "type": "array",
-            "title": "Direct",
+            "uniqueItems": true,
+            "title": "Parents",
             "default": []
           }
         },

diff --git a/web/client/src/api/index.ts b/web/client/src/api/index.ts
@@ -274,6 +274,7 @@ export function useApiPlanRun(
   inputs?: {
     planDates?: PlanDates
     planOptions?: PlanOptions
+    categories?: BodyInitiateApplyApiCommandsApplyPostCategories
   },
   options?: ApiOptions,
 ): UseQueryWithTimeoutOptions<PlanOverviewStageTracker> {
@@ -286,6 +287,7 @@ export function useApiPlanRun(
             environment,
             plan_dates: inputs?.planDates,
             plan_options: inputs?.planOptions,
+            categories: inputs?.categories,
           },
           { signal },
         )

diff --git a/web/client/src/library/components/environmentDetails/SelectEnvironment.tsx b/web/client/src/library/components/environmentDetails/SelectEnvironment.tsx
@@ -121,7 +121,7 @@ export function SelectEnvironment({
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <div className="!mx-0 absolute top-10 right-0 min-w-[20rem] max-w-[100%] overflow-hidden shadow-2xl bg-theme border-0 border-neutral-100 dark:border-neutral-800 rounded-md flex flex-col z-10">
+            <div className="!mx-0 absolute top-10 right-0 min-w-[16rem] max-w-[100%] overflow-hidden shadow-2xl bg-theme border-0 border-neutral-100 dark:border-neutral-800 rounded-md flex flex-col z-50">
               <Menu.Items className="mx-0 overflow-auto max-h-80 hover:scrollbar scrollbar--vertical">
                 {Array.from(environments).map(env => (
                   <Menu.Item

diff --git a/web/client/src/library/components/graph/Graph.tsx b/web/client/src/library/components/graph/Graph.tsx
@@ -145,9 +145,11 @@ const ModelNodeHeaderHandles = memo(function ModelNodeHeaderHandles({
           >
             {truncate(decodeURI(label), 50, 20)}
           </span>
-          <span className="flex justify-between ml-2 mr-1 px-2 rounded-full bg-neutral-10">
-            {count}
-          </span>
+          {isNotNil(count) && (
+            <span className="flex justify-between ml-2 mr-1 px-2 rounded-full bg-neutral-10">
+              {count}
+            </span>
+          )}
         </span>
       </div>
       {hasRight && (

diff --git a/web/client/src/library/components/graph/ModelNode.tsx b/web/client/src/library/components/graph/ModelNode.tsx
@@ -100,12 +100,12 @@ export default function ModelNode({
     [setSelectedNodes, highlightedNodeModels],
   )
 
-  const splat = highlightedNodes?.['*']
+  const splat = highlightedNodes['*']
   const hasSelectedColumns = columns.some(({ name }) =>
     connections.get(toID(id, name)),
   )
   const hasHighlightedNodes = Object.keys(highlightedNodes).length > 0
-  const highlighted = Object.keys(highlightedNodes ?? {}).find(key =>
+  const highlighted = Object.keys(highlightedNodes).find(key =>
     highlightedNodes[key]!.includes(id),
   )
   const isMainNode = mainNode === id
@@ -197,7 +197,7 @@ export default function ModelNode({
             ? undefined
             : handleSelect
         }
-        count={columns.length}
+        count={hasHighlightedNodes ? undefined : columns.length}
       />
       {showColumns && (
         <ModelColumns

diff --git a/web/client/src/library/components/modal/ModalConfirmation.tsx b/web/client/src/library/components/modal/ModalConfirmation.tsx
@@ -35,7 +35,7 @@ function ModalConfirmation({
       onClose={onClose}
       afterLeave={afterLeave}
     >
-      <Dialog.Panel className="w-[30rem] transform rounded-xl bg-theme text-left align-middle shadow-xl transition-all">
+      <Dialog.Panel className="min-w-[20rem] max-w-[50rem] transform rounded-xl bg-theme text-left align-middle shadow-xl transition-all overflow-hidden">
         {children}
       </Dialog.Panel>
     </Modal>
@@ -80,7 +80,7 @@ function ModalConfirmationDetails({
   details: string[]
 }): JSX.Element {
   return (
-    <ul className="mt-2 p-4 bg-warning-10 rounded-md max-h-[20vh] overflow-y-auto hover:scrollbar scrollbar--vertical">
+    <ul className="my-2 p-4 bg-warning-10 rounded-md max-h-[20vh] overflow-y-auto hover:scrollbar scrollbar--vertical">
       {details.map(detail => (
         <li
           key={detail}

diff --git a/web/client/src/library/components/plan/Plan.tsx b/web/client/src/library/components/plan/Plan.tsx
@@ -1,4 +1,3 @@
-import { isNil, isTrue } from '~/utils'
 import { useStorePlan } from '~/context/plan'
 import { useApiPlanRun, useApiPlanApply, useApiCancelPlan } from '~/api'
 import PlanHeader from './PlanHeader'
@@ -26,11 +25,8 @@ function Plan(): JSX.Element {
 
   const setTests = useStoreProject(s => s.setTests)
 
-  const isInitialPlanRun =
-    isNil(environment?.isDefault) || isTrue(environment?.isDefault)
-
-  const planPayload = usePlanPayload({ environment, isInitialPlanRun })
-  const applyPayload = useApplyPayload({ isInitialPlanRun })
+  const planPayload = usePlanPayload()
+  const applyPayload = useApplyPayload()
 
   const { refetch: planRun, cancel: cancelRequestPlanRun } = useApiPlanRun(
     environment.name,
@@ -47,6 +43,7 @@ function Plan(): JSX.Element {
       { type: EnumPlanActions.ResetPlanDates },
       { type: EnumPlanActions.ResetPlanOptions },
       { type: EnumPlanActions.ResetTestsReport },
+      { type: EnumPlanActions.ResetCategories },
     ])
   }
 

diff --git a/web/client/src/library/components/plan/PlanActions.tsx b/web/client/src/library/components/plan/PlanActions.tsx
@@ -1,7 +1,7 @@
 import { type MouseEvent } from 'react'
 import useActiveFocus from '~/hooks/useActiveFocus'
 import { EnumSize, EnumVariant } from '~/types/enum'
-import { isFalse } from '~/utils'
+import { isFalse, isNil } from '~/utils'
 import { Button } from '../button/Button'
 import { EnumPlanAction, ModelPlanAction } from '@models/plan-action'
 import { useStorePlan } from '@context/plan'
@@ -10,6 +10,7 @@ import { Transition } from '@headlessui/react'
 import { useNavigate } from 'react-router-dom'
 import { SelectEnvironment } from '@components/environmentDetails/SelectEnvironment'
 import { AddEnvironment } from '@components/environmentDetails/AddEnvironment'
+import { usePlan } from './context'
 
 export default function PlanActions({
   run,
@@ -23,6 +24,7 @@ export default function PlanActions({
   reset: () => void
 }): JSX.Element {
   const navigate = useNavigate()
+  const { change_categorization } = usePlan()
 
   const modules = useStoreContext(s => s.modules)
   const environment = useStoreContext(s => s.environment)
@@ -58,15 +60,26 @@ export default function PlanActions({
   function handleApply(e: MouseEvent): void {
     e.stopPropagation()
 
-    if (environment.isProd && isFalse(environment.isInitial)) {
+    const isProd = environment.isProd && isFalse(environment.isInitial)
+    const hasUncategorized = Array.from(change_categorization.values()).some(
+      c => isNil(c.category),
+    )
+
+    if (isProd) {
       addConfirmation({
         headline: 'Applying Plan Directly On Prod Environment!',
-        description: `Are you sure you want to apply your changes directly on prod? Safer choice will be to select or add new environment first.`,
+        tagline: 'Safer choice will be to select or add new environment first.',
+        description:
+          'Are you sure you want to apply your changes directly on prod?',
         yesText: `Yes, Run ${environment.name}`,
         noText: 'No, Cancel',
-        action() {
-          apply()
-        },
+        action: apply,
+        details: hasUncategorized
+          ? [
+              'ATTENTION!',
+              '[Breaking Change] category will be applied to all uncategorized changes',
+            ]
+          : undefined,
         children: (
           <div className="mt-5 pt-4">
             <h4 className="mb-2">{`${
@@ -95,7 +108,20 @@ export default function PlanActions({
         ),
       })
     } else {
-      apply()
+      if (hasUncategorized) {
+        addConfirmation({
+          headline: 'Some changes are missing categorization!',
+          description: 'Are you sure you want to proceed?',
+          details: [
+            '[Breaking Change] category will be applied to all uncategorized changes',
+          ],
+          yesText: 'Yes, Apply',
+          noText: 'No, Cancel',
+          action: apply,
+        })
+      } else {
+        apply()
+      }
     }
   }