Skip to content

Commit 6fcbd5b

Browse files
mykalmaxmykalmax
authored
Fix: Some minor styling bugs (#927)
1 parent fe01ac2 commit 6fcbd5b

11 files changed

Lines changed: 122 additions & 142 deletions

File tree

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,7 @@ const Documentation = function Documentation({
132132
</Tab.List>
133133
<Tab.Panels className="h-full w-full overflow-hidden bg-neutral-10 mt-4 rounded-lg">
134134
<Tab.Panel
135+
unmount={false}
135136
className={clsx(
136137
'flex flex-col w-full h-full relative px-2 overflow-hidden p-2',
137138
'ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2',
@@ -151,6 +152,7 @@ const Documentation = function Documentation({
151152
</CodeEditor.SQLMeshDialect>
152153
</Tab.Panel>
153154
<Tab.Panel
155+
unmount={false}
154156
className={clsx(
155157
'w-full h-full ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2 p-2',
156158
)}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -171,6 +171,7 @@ function InspectorModel({
171171
</Tab.List>
172172
<Tab.Panels className="h-full w-full overflow-hidden">
173173
<Tab.Panel
174+
unmount={false}
174175
className={clsx(
175176
'flex flex-col w-full h-full relative overflow-hidden',
176177
'ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2',
@@ -273,6 +274,7 @@ function InspectorModel({
273274
</InspectorActions>
274275
</Tab.Panel>
275276
<Tab.Panel
277+
unmount={false}
276278
className={clsx(
277279
'text-xs w-full h-full ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2 py-2',
278280
)}

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -109,10 +109,8 @@ export default function EditorPreview({
109109
)}
110110
>
111111
{isArrayEmpty(tabs) ? (
112-
<div>
113-
<div className="flex items-center justify-center h-full">
114-
No Data To Preview
115-
</div>
112+
<div className="flex justify-center items-center w-full h-full">
113+
<h3 className="text-md">No Data To Preview</h3>
116114
</div>
117115
) : (
118116
<Tab.Group

‎web/client/src/library/components/fileTree/FileTree.tsx‎

Lines changed: 2 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
1-
import { type MouseEvent, useEffect, useState, useCallback } from 'react'
1+
import { type MouseEvent, useEffect, useState } from 'react'
22
import clsx from 'clsx'
33
import ModalConfirmation from '../modal/ModalConfirmation'
44
import type { Confirmation } from '../modal/ModalConfirmation'
55
import { Button } from '../button/Button'
6-
import { debounceAsync, isNotNil } from '~/utils'
6+
import { isNotNil } from '~/utils'
77
import Directory from './Directory'
8-
import { apiCancelFiles, useApiFiles } from '@api/index'
98
import { useStoreFileTree } from '@context/fileTree'
10-
import { useQueryClient } from '@tanstack/react-query'
119

1210
/* TODO:
1311
- add ability to create file or directory on top level
@@ -23,37 +21,11 @@ export default function FileTree({
2321
}: {
2422
className?: string
2523
}): JSX.Element {
26-
const client = useQueryClient()
27-
2824
const project = useStoreFileTree(s => s.project)
29-
const setFiles = useStoreFileTree(s => s.setFiles)
30-
const setProject = useStoreFileTree(s => s.setProject)
31-
32-
const { refetch: getFiles } = useApiFiles()
33-
34-
const debouncedGetFiles = useCallback(debounceAsync(getFiles, 1000, true), [
35-
getFiles,
36-
])
3725

3826
const [confirmation, setConfirmation] = useState<Confirmation | undefined>()
3927
const [showConfirmation, setShowConfirmation] = useState(false)
4028

41-
useEffect(() => {
42-
void debouncedGetFiles().then(({ data }) => {
43-
setProject(data)
44-
})
45-
46-
return () => {
47-
debouncedGetFiles.cancel()
48-
49-
apiCancelFiles(client)
50-
}
51-
}, [])
52-
53-
useEffect(() => {
54-
setFiles(project?.allFiles ?? [])
55-
}, [project])
56-
5729
useEffect(() => {
5830
setShowConfirmation(isNotNil(confirmation))
5931
}, [confirmation])

‎web/client/src/library/components/graph/Graph.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -670,7 +670,12 @@ function ModelColumnLineage({
670670
return (
671671
<div className={clsx('px-2 py-1 w-full h-full', className)}>
672672
{isBuildingLayout ? (
673-
<div>Building Lineage...</div>
673+
<div className="flex justify-center items-center w-full h-full">
674+
<Loading className="inline-block">
675+
<Spinner className="w-3 h-3 border border-neutral-10 mr-4" />
676+
<h3 className="text-md">Building Lineage...</h3>
677+
</Loading>
678+
</div>
674679
) : (
675680
<ReactFlow
676681
nodes={nodes}

‎web/client/src/library/components/report/ReportErrors.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ export function DisplayError({
122122
<div className="flex aline-center mb-2">
123123
<small className="block mr-3">
124124
<small className="py-0.5 px-2 bg-danger-500 text-danger-100 rounded-md text-xs">
125-
{error.status}
125+
{error.status ?? 'UI'}
126126
</small>
127127
</small>
128128
<small className="block">{scope}</small>

‎web/client/src/library/pages/docs/Docs.tsx‎

Lines changed: 45 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,17 @@ import { Outlet, useLocation, useParams } from 'react-router-dom'
22
import { useEffect, useState } from 'react'
33
import { isArrayNotEmpty } from '@utils/index'
44
import { useStoreContext } from '@context/context'
5-
import { EnumPlanApplyType, useStorePlan } from '@context/plan'
65
import { ModelSQLMeshModel } from '@models/sqlmesh-model'
76
import Container from '@components/container/Container'
87
import SplitPane from '@components/splitPane/SplitPane'
98
import Search from './Search'
109
import SourceList from './SourceList'
11-
import TasksOverview from '@components/tasksOverview/TasksOverview'
1210

1311
export default function PageDocs(): JSX.Element {
1412
const location = useLocation()
1513
const { modelName } = useParams()
1614

1715
const models = useStoreContext(s => s.models)
18-
const environment = useStoreContext(s => s.environment)
19-
20-
const activePlan = useStorePlan(s => s.activePlan)
21-
const planState = useStorePlan(s => s.state)
2216

2317
const [search, setSearch] = useState('')
2418
const [filter, setFilter] = useState('')
@@ -45,59 +39,52 @@ export default function PageDocs(): JSX.Element {
4539

4640
return (
4741
<Container.Page>
48-
<div className="p-4 flex flex-col w-full h-full overflow-hidden">
49-
{isArrayNotEmpty(filtered) && (
50-
<Search
51-
models={filtered}
52-
search={search}
53-
setSearch={setSearch}
54-
/>
55-
)}
56-
{activePlan != null && (
57-
<div className="w-full p-4">
58-
<TasksOverview tasks={activePlan.tasks}>
59-
{({ total, completed, totalBatches, completedBatches }) => (
60-
<>
61-
<TasksOverview.Summary
62-
environment={environment.name}
63-
planState={planState}
64-
headline="Most Recent Plan"
65-
completed={completed}
66-
total={total}
67-
totalBatches={totalBatches}
68-
completedBatches={completedBatches}
69-
updateType={
70-
activePlan.type === EnumPlanApplyType.Virtual
71-
? 'Virtual'
72-
: 'Backfill'
73-
}
74-
updatedAt={activePlan.updated_at}
75-
/>
76-
</>
77-
)}
78-
</TasksOverview>
79-
</div>
80-
)}
81-
<SplitPane
82-
className="flex w-full h-full overflow-hidden mt-8"
83-
sizes={[25, 75]}
84-
minSize={0}
85-
snapOffset={0}
86-
>
87-
<div className="py-4 w-full">
88-
{models.size > 0 && (
89-
<SourceList
90-
models={models}
91-
filter={filter}
92-
setFilter={setFilter}
93-
/>
94-
)}
42+
{models.size === 0 ? (
43+
<div className="p-4 flex flex-col w-full h-full overflow-hidden">
44+
<div className="flex justify-center items-center w-full h-full">
45+
<div className="center">
46+
<h3 className="text-lg mb-4">
47+
Still Waiting For Models To Load...
48+
</h3>
49+
<p>It should take few more seconds.</p>
50+
<p>
51+
If it takes too long, probably, there is a problem with API
52+
response.
53+
</p>
54+
<p>Check if the server is running and refresh.</p>
55+
</div>
9556
</div>
96-
<div className="w-full">
97-
<Outlet />
98-
</div>
99-
</SplitPane>
100-
</div>
57+
</div>
58+
) : (
59+
<div className="p-4 flex flex-col w-full h-full overflow-hidden">
60+
{isArrayNotEmpty(filtered) && (
61+
<Search
62+
models={filtered}
63+
search={search}
64+
setSearch={setSearch}
65+
/>
66+
)}
67+
<SplitPane
68+
className="flex w-full h-full overflow-hidden mt-8"
69+
sizes={[25, 75]}
70+
minSize={0}
71+
snapOffset={0}
72+
>
73+
<div className="py-4 w-full">
74+
{models.size > 0 && (
75+
<SourceList
76+
models={models}
77+
filter={filter}
78+
setFilter={setFilter}
79+
/>
80+
)}
81+
</div>
82+
<div className="w-full">
83+
<Outlet />
84+
</div>
85+
</SplitPane>
86+
</div>
87+
)}
10188
</Container.Page>
10289
)
10390
}

‎web/client/src/library/pages/docs/Search.tsx‎

Lines changed: 20 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -51,44 +51,36 @@ export default function Search({
5151
)}
5252
{isArrayNotEmpty(found) &&
5353
found.map(([model, index]) => (
54-
<Link
54+
<li
5555
key={model.name}
56-
to={`${EnumRoutes.IdeDocsModels}/${ModelSQLMeshModel.encodeName(
57-
model.name,
58-
)}`}
59-
className="text-md font-normal mb-1 w-full"
56+
className="p-2 cursor-pointer hover:bg-primary-10 rounded-lg"
6057
>
61-
<li className="p-2 cursor-pointer hover:bg-secondary-10">
58+
<Link
59+
to={`${
60+
EnumRoutes.IdeDocsModels
61+
}/${ModelSQLMeshModel.encodeName(model.name)}`}
62+
className="text-md font-normal mb-1 w-full"
63+
>
6264
<span className="font-bold">{model.name}</span>
63-
<small className="block text-neutral-600 p-2 italic">
64-
{highlightMatch(index, search)}
65-
</small>
66-
</li>
67-
</Link>
65+
<small
66+
className="block text-neutral-600 p-2 italic"
67+
dangerouslySetInnerHTML={{
68+
__html: highlightMatch(index, search),
69+
}}
70+
></small>
71+
</Link>
72+
</li>
6873
))}
6974
</ul>
7075
)}
7176
</div>
7277
)
7378
}
7479

75-
function highlightMatch(source: string, match: string): JSX.Element {
76-
return (
77-
<>
78-
{source.split(match).reduce((acc: JSX.Element[], part, idx, arr) => {
79-
acc.push(<>{part}</>)
80-
81-
if (idx > 0 || idx % 2 !== 0 || idx === arr.length) return acc
82-
83-
acc.push(
84-
<span className="inline-block text-brand-500 bg-brand-10">
85-
{match}
86-
</span>,
87-
)
88-
89-
return acc
90-
}, [])}
91-
</>
80+
function highlightMatch(source: string, match: string): string {
81+
return source.replaceAll(
82+
match,
83+
`<b class="inline-block text-brand-500 bg-brand-10">${match}</b>`,
9284
)
9385
}
9486

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ import { Suspense, lazy, useCallback } from 'react'
88
import Loading from '@components/loading/Loading'
99
import Spinner from '@components/logo/Spinner'
1010

11-
const FileTree = lazy(async () => await import('@components/fileTree/FileTree'))
12-
const Editor = lazy(async () => await import('@components/editor/Editor'))
11+
const FileTree = lazy(() => import('@components/fileTree/FileTree'))
12+
const Editor = lazy(() => import('@components/editor/Editor'))
1313

1414
export default function PageEditor(): JSX.Element {
1515
const models = useStoreContext(s => s.models)

0 commit comments

Comments
 (0)