Skip to content

Commit b722c1b

Browse files
mykalmaxmykalmax
authored
[UI] Display plan in drawer instead of modal (#593)
1 parent c603fc2 commit b722c1b

14 files changed

Lines changed: 171 additions & 97 deletions

File tree

‎web/client/src/library/components/button/Button.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ export interface PropsButton
5858
const VARIANT = new Map<ButtonVariant, string>([
5959
[
6060
'primary',
61-
'border-primary-500 bg-primary-500 hover:bg-primary-400 active:bg-primary-400 text-primary-100',
61+
'border-primary-500 bg-primary-500 hover:bg-primary-400 active:bg-primary-400 text-light',
6262
],
6363
[
6464
'alternative',

‎web/client/src/library/components/editor/Editor.tsx‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -352,7 +352,7 @@ export default function Editor({
352352
// TODO: remove once we have a better way to determine if a file is a model
353353
const hasContentActiveFile = isFalse(isStringEmptyOrNil(activeFile.content))
354354
const shouldEvaluate =
355-
activeFile.isSQLMeshModel && Object.values(formEvaluate).every(isTrue)
355+
activeFile.isSQLMeshModel && Object.values(formEvaluate).every(Boolean)
356356
const showActionsPane =
357357
(activeFile.isSQLMeshModel || activeFile.isLocal) && hasContentActiveFile
358358
const sizesActions = [
@@ -462,19 +462,21 @@ export default function Editor({
462462
{formEvaluate.model}
463463
</p>
464464
</fieldset>
465-
<fieldset className="flex my-3 px-3">
466-
<div className="p-4 bg-warning-10 text-warning-600 rounded-xl">
467-
<p className="text-sm">
468-
Please, fill out all fileds to{' '}
469-
<b>
470-
{activeFile.isSQLMeshModel
471-
? 'evaluate the model'
472-
: 'run query'}
473-
</b>
474-
.
475-
</p>
476-
</div>
477-
</fieldset>
465+
{isFalse(shouldEvaluate) && (
466+
<fieldset className="flex my-3 px-3">
467+
<div className="p-4 bg-warning-10 text-warning-600 rounded-lg">
468+
<p className="text-sm">
469+
Please fill out all fields to{' '}
470+
<b>
471+
{activeFile.isSQLMeshModel
472+
? 'evaluate the model'
473+
: 'run the query'}
474+
</b>
475+
.
476+
</p>
477+
</div>
478+
</fieldset>
479+
)}
478480
<fieldset className="my-3 px-3">
479481
<Input
480482
className="w-full mx-0"

‎web/client/src/library/components/ide/IDE.tsx‎

Lines changed: 28 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import ActivePlan from './ActivePlan'
2424
import { Dialog } from '@headlessui/react'
2525
import { useQueryClient } from '@tanstack/react-query'
2626
import { type Model, type ModelsModels } from '~/api/client'
27+
import ModalSidebar from '../modal/ModalDrawer'
2728

2829
const Plan = lazy(async () => await import('../plan/Plan'))
2930
const Graph = lazy(async () => await import('../graph/Graph'))
@@ -150,8 +151,33 @@ export function IDE(): JSX.Element {
150151
)}
151152
<Divider />
152153
<div className="px-2 py-1 text-xs">Version: 0.0.1</div>
154+
<ModalSidebar
155+
show={isPlanOpen && isFalse(isClosingModal)}
156+
afterLeave={() => {
157+
setPlanAction(EnumPlanAction.None)
158+
setIsClosingModal(false)
159+
setIsGraphOpen(false)
160+
setIsPlanOpen(false)
161+
}}
162+
>
163+
<Dialog.Panel className="bg-theme border-8 border-r-0 border-secondary-10 dark:border-primary-10 absolute w-[90%] md:w-[75%] xl:w-[60%] h-full right-0">
164+
<PlanProvider>
165+
<Plan
166+
environment={environment}
167+
isInitialPlanRun={
168+
environment?.isDefault == null ||
169+
isTrue(environment?.isDefault)
170+
}
171+
disabled={isClosingModal}
172+
initialStartDate={initialStartDate}
173+
initialEndDate={initialEndDate}
174+
onClose={closeModal}
175+
/>
176+
</PlanProvider>
177+
</Dialog.Panel>
178+
</ModalSidebar>
153179
<Modal
154-
show={(isGraphOpen || isPlanOpen) && isFalse(isClosingModal)}
180+
show={isGraphOpen && isFalse(isClosingModal)}
155181
afterLeave={() => {
156182
setPlanAction(EnumPlanAction.None)
157183
setIsClosingModal(false)
@@ -160,23 +186,7 @@ export function IDE(): JSX.Element {
160186
}}
161187
>
162188
<Dialog.Panel className="w-full transform overflow-hidden rounded-2xl bg-theme text-left align-middle shadow-xl transition-all">
163-
{environment != null && isPlanOpen && (
164-
<PlanProvider>
165-
<Plan
166-
environment={environment}
167-
isInitialPlanRun={
168-
environment?.isDefault == null ||
169-
isTrue(environment?.isDefault)
170-
}
171-
disabled={isClosingModal}
172-
initialStartDate={initialStartDate}
173-
initialEndDate={initialEndDate}
174-
onClose={closeModal}
175-
/>
176-
</PlanProvider>
177-
)}
178-
179-
{isGraphOpen && <Graph closeGraph={closeModal} />}
189+
{<Graph closeGraph={closeModal} />}
180190
</Dialog.Panel>
181191
</Modal>
182192
</>

‎web/client/src/library/components/ide/RunPlan.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -274,7 +274,7 @@ export default function RunPlan({
274274
<Button
275275
className="font-bold"
276276
size="md"
277-
variant="warning"
277+
variant={EnumVariant.Primary}
278278
onClick={(e: MouseEvent) => {
279279
e.stopPropagation()
280280

@@ -287,7 +287,7 @@ export default function RunPlan({
287287
</Button>
288288
<Button
289289
size="md"
290-
variant="alternative"
290+
variant={EnumVariant.Neutral}
291291
onClick={(e: MouseEvent) => {
292292
e.stopPropagation()
293293

‎web/client/src/library/components/modal/ModalDrawer.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { Transition, Dialog } from '@headlessui/react'
2+
import { Fragment } from 'react'
3+
4+
interface PropsModalDrawer extends React.HTMLAttributes<HTMLElement> {
5+
show: boolean
6+
onClose?: () => void
7+
afterLeave?: () => void
8+
}
9+
10+
export default function ModalDrawer({
11+
show,
12+
children,
13+
afterLeave,
14+
onClose = () => undefined,
15+
}: PropsModalDrawer): JSX.Element {
16+
return (
17+
<Transition
18+
appear
19+
show={show}
20+
as={Fragment}
21+
afterLeave={afterLeave}
22+
>
23+
<Dialog
24+
as="div"
25+
className="relative z-[100] w-full h-full "
26+
onClose={onClose}
27+
>
28+
<Transition.Child
29+
as={Fragment}
30+
enter="ease-out duration-300"
31+
enterFrom="bg-overlay opacity-0"
32+
enterTo="bg-overlay opacity-80"
33+
leave="ease-in duration-200"
34+
leaveFrom="bg-overlay opacity-80"
35+
leaveTo="bg-overlay opacity-0"
36+
>
37+
<div className="fixed inset-0" />
38+
</Transition.Child>
39+
40+
<div className="w-full h-full fixed inset-0">
41+
<Transition.Child
42+
as={Fragment}
43+
enter="ease-out duration-300"
44+
enterFrom="translate-x-[100%]"
45+
enterTo="translate-x-0"
46+
leave="ease-in duration-200"
47+
leaveFrom="translate-x-0"
48+
leaveTo="translate-x-[100%]"
49+
>
50+
{children}
51+
</Transition.Child>
52+
</div>
53+
</Dialog>
54+
</Transition>
55+
)
56+
}

‎web/client/src/library/components/plan/Plan.tsx‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -79,21 +79,21 @@ function Plan({
7979
planDates: environment.isDefault
8080
? undefined
8181
: {
82-
start,
83-
end:
84-
isInitialPlanRun || isStringEmptyOrNil(restate_models)
85-
? undefined
86-
: end,
87-
},
82+
start,
83+
end:
84+
isInitialPlanRun || isStringEmptyOrNil(restate_models)
85+
? undefined
86+
: end,
87+
},
8888
planOptions: environment.isInitial
8989
? {
90-
skip_tests: true,
91-
}
90+
skip_tests: true,
91+
}
9292
: environment.isDefault
93-
? {
93+
? {
9494
skip_tests,
9595
}
96-
: {
96+
: {
9797
no_gaps,
9898
skip_backfill,
9999
forward_only,
@@ -108,9 +108,9 @@ function Plan({
108108
planDates:
109109
hasBackfills && isFalse(isInitialPlanRun)
110110
? {
111-
start,
112-
end,
113-
}
111+
start,
112+
end,
113+
}
114114
: undefined,
115115
planOptions: {
116116
no_gaps,
@@ -358,7 +358,7 @@ function Plan({
358358
}
359359

360360
return (
361-
<div className="flex flex-col w-full max-h-[90vh] overflow-hidden">
361+
<div className="flex flex-col w-full h-full overflow-hidden pt-6">
362362
<Plan.Header error={error} />
363363
<Divider />
364364
<div className="flex flex-col w-full h-full overflow-hidden overflow-y-auto p-4 scrollbar scrollbar--vertical">

‎web/client/src/library/components/plan/PlanActions.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { type MouseEvent } from 'react'
22
import { useStoreContext } from '~/context/context'
33
import { type PlanAction, EnumPlanAction } from '~/context/plan'
44
import useActiveFocus from '~/hooks/useActiveFocus'
5+
import { EnumVariant } from '~/types/enum'
56
import { includes, isFalse, isStringEmptyOrNil } from '~/utils'
67
import { Button } from '../button/Button'
78
import { usePlan } from './context'
@@ -93,6 +94,7 @@ export default function PlanActions({
9394
onClick={handleRun}
9495
autoFocus
9596
ref={setFocus}
97+
variant={EnumVariant.Primary}
9698
>
9799
<span>
98100
{getActionName(planAction, [
@@ -114,6 +116,7 @@ export default function PlanActions({
114116
onClick={handleApply}
115117
disabled={isApplying || disabled}
116118
ref={setFocus}
119+
variant={EnumVariant.Primary}
117120
>
118121
{getActionName(
119122
planAction,
@@ -129,7 +132,7 @@ export default function PlanActions({
129132
{isProcessing && (
130133
<Button
131134
onClick={handleCancel}
132-
variant="danger"
135+
variant={EnumVariant.Danger}
133136
className="justify-self-end"
134137
disabled={isCanceling || disabled}
135138
>
@@ -140,7 +143,7 @@ export default function PlanActions({
140143
{(isRun || isRunning || isApply || isApplying) && (
141144
<p className="ml-2 text-xs max-w-sm">
142145
<span>Plan for</span>
143-
<b className="text-secondary-500 font-bold mx-1">
146+
<b className="text-primary-500 font-bold mx-1">
144147
{environment.name}
145148
</b>
146149
<span className="inline-block mr-1">environment</span>
@@ -197,7 +200,7 @@ export default function PlanActions({
197200
].every(isFalse) && (
198201
<Button
199202
onClick={handleReset}
200-
variant="alternative"
203+
variant={EnumVariant.Neutral}
201204
disabled={
202205
includes(
203206
[
@@ -219,7 +222,7 @@ export default function PlanActions({
219222
)}
220223
<Button
221224
onClick={handleClose}
222-
variant={isDone ? 'secondary' : 'alternative'}
225+
variant={isDone ? EnumVariant.Primary : EnumVariant.Neutral}
223226
disabled={
224227
includes(
225228
[

‎web/client/src/library/components/plan/PlanChangePreview.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@ function PlanChangePreviewDirect({
129129
const Tag = open ? MinusCircleIcon : PlusCircleIcon
130130

131131
return (
132-
<Tag className="max-h-[1rem] min-w-[1rem] dark:text-primary-500" />
132+
<Tag className="max-h-[1rem] min-w-[1rem] dark:text-primary-500 mt-0.5" />
133133
)
134134
})()}
135135
</Disclosure.Button>
@@ -194,7 +194,7 @@ function ChangeCategories({ change }: { change: ChangeDirect }): JSX.Element {
194194
: 'text-prose',
195195
)}
196196
>
197-
<div className="mt-[0.125rem] mr-2 border-2 border-neutral-400 w-4 h-4 rounded-full flex justify-center items-center">
197+
<div className="mt-[0.125rem] mr-2 border-2 border-neutral-400 min-w-[1rem] h-4 rounded-full flex justify-center items-center">
198198
{checked && (
199199
<span className="inline-block w-2 h-2 bg-secondary-500 dark:bg-primary-300 rounded-full"></span>
200200
)}
@@ -236,7 +236,7 @@ function PlanChangePreviewIndirect({
236236
{(() => {
237237
const Tag = open ? MinusCircleIcon : PlusCircleIcon
238238

239-
return <Tag className="max-h-[1rem] min-w-[1rem]" />
239+
return <Tag className="max-h-[1rem] min-w-[1rem] dark:text-primary-500 mt-0.5" />
240240
})()}
241241
</Disclosure.Button>
242242
<Disclosure.Panel className="text-sm px-4 mb-4">
@@ -267,7 +267,7 @@ function PlanChangePreviewTitle({
267267
<ArrowPathRoundedSquareIcon className="h-4 mr-2" />
268268
<small className="inline-block text-sm ">{model_name}</small>
269269
{category != null && (
270-
<span className="ml-2 text-xs px-1 bg-neutral-400 text-neutral-100 dark:bg-neutral-400 dark:text-neutral-800 rounded">
270+
<span className="ml-2 text-xs px-1 bg-neutral-400 text-neutral-100 dark:bg-neutral-400 dark:text-neutral-800 rounded whitespace-nowrap mr-2">
271271
{category.name}
272272
</span>
273273
)}

‎web/client/src/library/components/plan/PlanHeader.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ export default function Plan({ error }: { error?: Error }): JSX.Element {
66
const environment = useStoreContext(s => s.environment)
77

88
return (
9-
<div className="h-full w-full py-4 px-6">
9+
<div className="w-full py-4 px-6">
1010
<h4 className="text-xl">
1111
<span className="font-bold">Target Environment is</span>
12-
<b className="ml-2 px-2 py-1 font-sm rounded-md bg-secondary-500 text-secondary-100">
12+
<b className="ml-2 px-2 py-1 font-sm rounded-md bg-primary-10 text-primary-500">
1313
{environment.name}
1414
</b>
1515
</h4>
@@ -49,17 +49,17 @@ function Banner({
4949
className={clsx(
5050
'p-4 w-full h-full border-2 rounded-lg',
5151
variant === EnumVariant.Primary &&
52-
'bg-primary-10 border-primary-400 text-primary-600',
52+
'bg-primary-10 border-primary-400 text-primary-600',
5353
variant === EnumVariant.Secondary &&
54-
'bg-secondary-10 border-secondary-400 text-secondary-600',
54+
'bg-secondary-10 border-secondary-400 text-secondary-600',
5555
variant === EnumVariant.Success &&
56-
'bg-success-10 border-success-400 text-success-600',
56+
'bg-success-10 border-success-400 text-success-600',
5757
variant === EnumVariant.Warning &&
58-
'bg-warning-10 border-warning-400 text-warning-600',
58+
'bg-warning-10 border-warning-400 text-warning-600',
5959
variant === EnumVariant.Danger &&
60-
'bg-danger-10 border-danger-400 text-danger-600',
60+
'bg-danger-10 border-danger-400 text-danger-600',
6161
variant === EnumVariant.Info &&
62-
'bg-neutral-10 border-neutral-400 text-neutral-400',
62+
'bg-neutral-10 border-neutral-400 text-neutral-400',
6363
)}
6464
>
6565
{headline != null && (

0 commit comments

Comments
 (0)