Skip to content

Commit 0b5cec6

Browse files
3em3em
committed
feat: ds migration Drawer
1 parent 0cca288 commit 0b5cec6

35 files changed

+1098
-427
lines changed

‎apps/design-system/src/subjects/views/connectors/connectors-ref.tsx

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { getHarnessConnectorDefinition, harnessConnectors } from '@utils/connect
44
import { noop, useTranslationStore } from '@utils/viewUtils'
55

66
import { InputFactory } from '@harnessio/forms'
7-
import { Button, Drawer, FormSeparator, Spacer, Text } from '@harnessio/ui/components'
7+
import { Button, ButtonGroup, Drawer, FormSeparator, Spacer, Text } from '@harnessio/ui/components'
88
import {
99
ArrayInput,
1010
BooleanInput,
@@ -118,8 +118,8 @@ export const ConnectorsRefPage = ({
118118
onSelectConnector={() => setIsConnectorSelected(true)}
119119
setConnectorEntity={setConnectorEntity}
120120
/>
121-
<Drawer.Root open={isConnectorSelected} onOpenChange={setIsConnectorSelected} direction="right" nested>
122-
<Drawer.Content nested>
121+
<Drawer.Root open={isConnectorSelected} onOpenChange={setIsConnectorSelected} nested>
122+
<Drawer.Content>
123123
{!!connectorEntity && (
124124
<ConnectorEntityForm
125125
intent={EntityIntent.CREATE}
@@ -169,13 +169,12 @@ export const ConnectorsRefPage = ({
169169
}
170170

171171
return (
172-
<Drawer.Root direction="right" open={isDrawerOpen} onOpenChange={setIsDrawerOpen}>
172+
<Drawer.Root open={isDrawerOpen} onOpenChange={setIsDrawerOpen}>
173173
<Drawer.Content>
174174
<Drawer.Header>
175175
<Drawer.Title>Connectors</Drawer.Title>
176-
<Drawer.Close onClick={() => setIsDrawerOpen(false)} srOnly />
177176
</Drawer.Header>
178-
<Drawer.Inner>
177+
<Drawer.Body>
179178
<Text as="div" className="text-cn-foreground-2 mb-4">
180179
Choose type
181180
</Text>
@@ -186,12 +185,14 @@ export const ConnectorsRefPage = ({
186185
<Spacer size={5} />
187186

188187
{renderConnectorContent()}
189-
</Drawer.Inner>
188+
</Drawer.Body>
190189
<Drawer.Footer>
191-
<Button type="button" variant="outline" onClick={handleCancel}>
192-
Cancel
193-
</Button>
194-
<Button>Save</Button>
190+
<ButtonGroup>
191+
<Button type="button" variant="outline" onClick={handleCancel}>
192+
Cancel
193+
</Button>
194+
<Button>Save</Button>
195+
</ButtonGroup>
195196
</Drawer.Footer>
196197
</Drawer.Content>
197198
</Drawer.Root>

‎apps/design-system/src/subjects/views/connectors/connectors.tsx

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -106,33 +106,34 @@ const ConnectorsListPageContent = (): JSX.Element => {
106106
errorData={{ errors: [{ reason: 'Unexpected Error', message: 'Bad credentials' }] }}
107107
/>
108108

109-
<Drawer.Root open={isConnectorDrawerOpen} onOpenChange={setIsConnectorDrawerOpen} direction="right">
109+
<Drawer.Root open={isConnectorDrawerOpen} onOpenChange={setIsConnectorDrawerOpen}>
110110
<ConnectorsPalette
111111
useTranslationStore={useTranslationStore}
112112
connectors={harnessConnectors}
113113
onSelectConnector={() => setIsConnectorSelected(true)}
114114
setConnectorEntity={setConnectorEntity}
115115
requestClose={onCloseConnectorDrawer}
116116
isDrawer
117-
/>
118-
<Drawer.Root open={isConnectorSelected} onOpenChange={setIsConnectorSelected} direction="right" nested>
119-
<Drawer.Content nested>
120-
{!!connectorEntity && (
121-
<ConnectorEntityForm
122-
useTranslationStore={useTranslationStore}
123-
connector={connectorEntity}
124-
onBack={() => setIsConnectorSelected(false)}
125-
// onFormSubmit={handleFormSubmit}
126-
getConnectorDefinition={getHarnessConnectorDefinition}
127-
inputComponentFactory={inputComponentFactory}
128-
intent={intent}
129-
isDrawer
130-
/>
131-
)}
132-
</Drawer.Content>
133-
</Drawer.Root>
117+
>
118+
<Drawer.Root open={isConnectorSelected} onOpenChange={setIsConnectorSelected} nested>
119+
<Drawer.Content>
120+
{!!connectorEntity && (
121+
<ConnectorEntityForm
122+
useTranslationStore={useTranslationStore}
123+
connector={connectorEntity}
124+
onBack={() => setIsConnectorSelected(false)}
125+
// onFormSubmit={handleFormSubmit}
126+
getConnectorDefinition={getHarnessConnectorDefinition}
127+
inputComponentFactory={inputComponentFactory}
128+
intent={intent}
129+
isDrawer
130+
/>
131+
)}
132+
</Drawer.Content>
133+
</Drawer.Root>
134+
</ConnectorsPalette>
134135
</Drawer.Root>
135-
<Drawer.Root open={isEditConnectorDrawerOpen} onOpenChange={setIsEditConnectorDrawerOpen} direction="right">
136+
<Drawer.Root open={isEditConnectorDrawerOpen} onOpenChange={setIsEditConnectorDrawerOpen}>
136137
<Drawer.Content>
137138
{!!connectorEntity && (
138139
<ConnectorEntityForm

‎apps/design-system/src/subjects/views/delegates/delegate-selector.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,11 +52,10 @@ interface DrawerProps {
5252
}
5353

5454
const DelegateSelectorDrawer = ({ open, setOpen, preSelectedTags, onSubmit, disableAnyDelegate }: DrawerProps) => (
55-
<Drawer.Root open={open} onOpenChange={setOpen} direction="right">
56-
<Drawer.Content className="w-1/2">
55+
<Drawer.Root open={open} onOpenChange={setOpen}>
56+
<Drawer.Content>
5757
<Drawer.Header>
5858
<Drawer.Title>Delegate selector</Drawer.Title>
59-
<Drawer.Close onClick={() => setOpen(false)} srOnly />
6059
</Drawer.Header>
6160

6261
<DelegateSelectorForm

‎apps/design-system/src/subjects/views/execution/pipeline-execution-graph.tsx

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
SerialNodeContent,
1111
SerialNodeInternalType
1212
} from '@harnessio/pipeline-graph'
13-
import { Button, Drawer, Icon, PipelineNodes } from '@harnessio/ui/components'
13+
import { Button, ButtonGroup, Drawer, Icon, PipelineNodes } from '@harnessio/ui/components'
1414

1515
// *****************************************************
1616
// 1. Import CSS
@@ -76,9 +76,9 @@ export function StepNodeComponent({
7676
}
7777

7878
return (
79-
<Drawer.Root direction="right">
79+
<Drawer.Root>
8080
<Drawer.Trigger asChild>{stepNode}</Drawer.Trigger>
81-
<Drawer.Content className="bg-cn-background-1 border-cn-borders-2 size-full max-w-2xl rounded-none border-l p-0 ">
81+
<Drawer.Content size="md">
8282
<Drawer.Header className="p-0">
8383
<ExecutionHeader
8484
commitName="8fbru3ix"
@@ -91,15 +91,15 @@ export function StepNodeComponent({
9191
pipelineName="npm_build"
9292
/>
9393
</Drawer.Header>
94-
<Drawer.Inner viewportClassName="p-0">
94+
<Drawer.Body className="p-0">
9595
<ExecutionInfo
9696
isDrawer
9797
useLogsStore={() => ({ logs })}
9898
onCopy={() => {}}
9999
onDownload={() => {}}
100100
onEdit={() => {}}
101101
/>
102-
</Drawer.Inner>
102+
</Drawer.Body>
103103
</Drawer.Content>
104104
</Drawer.Root>
105105
)
@@ -131,23 +131,25 @@ export function ApprovalStepNodeComponent({
131131
}
132132

133133
return (
134-
<Drawer.Root direction="right">
134+
<Drawer.Root>
135135
<Drawer.Trigger asChild>{approvalNode}</Drawer.Trigger>
136-
<Drawer.Content className="flex h-full w-1/2 flex-col justify-between">
137-
<div className="flex flex-col gap-4">
138-
<Drawer.Header>
139-
<Drawer.Title>Approval</Drawer.Title>
140-
<Drawer.Description>Approve/Reject step execution</Drawer.Description>
141-
</Drawer.Header>
142-
<div className="flex justify-center gap-2">
136+
<Drawer.Content>
137+
<Drawer.Header>
138+
<Drawer.Title>Approval</Drawer.Title>
139+
<Drawer.Description>Approve/Reject step execution</Drawer.Description>
140+
</Drawer.Header>
141+
<Drawer.Body>
142+
<ButtonGroup>
143143
<Button type="submit">Approve</Button>
144144
<Button variant="secondary">Cancel</Button>
145-
</div>
146-
</div>
145+
</ButtonGroup>
146+
</Drawer.Body>
147147
<Drawer.Footer>
148-
<Drawer.Close>
149-
<Button variant="outline">Close</Button>
150-
</Drawer.Close>
148+
<ButtonGroup>
149+
<Drawer.Close asChild>
150+
<Button variant="outline">Close</Button>
151+
</Drawer.Close>
152+
</ButtonGroup>
151153
</Drawer.Footer>
152154
</Drawer.Content>
153155
</Drawer.Root>

‎apps/design-system/src/subjects/views/secrets/secrets.tsx

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { secretsFormDefinition } from '@utils/secrets/secrets-form-schema'
44
import { noop, useTranslationStore } from '@utils/viewUtils'
55

66
import { InputFactory } from '@harnessio/forms'
7-
import { Button, Drawer, FormSeparator, Spacer, Text } from '@harnessio/ui/components'
7+
import { Button, ButtonGroup, Drawer, FormSeparator, Spacer, Text } from '@harnessio/ui/components'
88
import {
99
ArrayInput,
1010
BooleanInput,
@@ -165,13 +165,12 @@ export const SecretsPage = ({
165165

166166
return (
167167
<>
168-
<Drawer.Root open={isDrawerOpen} onOpenChange={setIsDrawerOpen} direction="right">
168+
<Drawer.Root open={isDrawerOpen} onOpenChange={setIsDrawerOpen}>
169169
<Drawer.Content>
170170
<Drawer.Header>
171171
<Drawer.Title>Secret</Drawer.Title>
172-
<Drawer.Close onClick={() => setIsDrawerOpen(false)} srOnly />
173172
</Drawer.Header>
174-
<Drawer.Inner>
173+
<Drawer.Body>
175174
<Text as="div" className="text-cn-foreground-2 mb-4">
176175
Choose type
177176
</Text>
@@ -180,12 +179,14 @@ export const SecretsPage = ({
180179
<FormSeparator className="w-full" />
181180
<Spacer size={6} />
182181
{renderSecretContent()}
183-
</Drawer.Inner>
182+
</Drawer.Body>
184183
<Drawer.Footer>
185-
<Button variant="outline" onClick={handleCancel}>
186-
Back
187-
</Button>
188-
<Button onClick={selectedType === SecretType.NEW ? handleSubmitEntityForm : noop}>Save</Button>
184+
<ButtonGroup>
185+
<Button variant="outline" onClick={handleCancel}>
186+
Back
187+
</Button>
188+
<Button onClick={selectedType === SecretType.NEW ? handleSubmitEntityForm : noop}>Save</Button>
189+
</ButtonGroup>
189190
</Drawer.Footer>
190191
</Drawer.Content>
191192
</Drawer.Root>

‎apps/design-system/src/subjects/views/unified-pipeline-studio/unified-pipeline-studio.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -45,18 +45,16 @@ const PipelineStudioViewWrapper = () => {
4545
view={view}
4646
onRun={() => setRunPipelineOpen(true)}
4747
/>
48-
<Drawer.Lazy
49-
unmountOnClose={true}
48+
<Drawer.Root
5049
open={runPipelineOpen}
5150
onOpenChange={isOpen => {
5251
if (!isOpen) {
5352
setRunPipelineOpen(false)
5453
}
5554
}}
56-
direction="right"
5755
>
5856
<RunPipelineDrawerContent onClose={() => setRunPipelineOpen(false)} />
59-
</Drawer.Lazy>
57+
</Drawer.Root>
6058
</>
6159
)
6260
}

0 commit comments

Comments
 (0)