Skip to content

Commit 39f4446

Browse files
jenny-s51jenny-s51
committed
fix: cancel button variant and expandable spacing
1 parent 3c1de72 commit 39f4446

File tree

8 files changed

+361
-362
lines changed

8 files changed

+361
-362
lines changed

‎workspaces/frontend/src/app/App.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ const App: React.FC = () => {
2727
<NamespaceContextProvider>
2828
<Page
2929
mainContainerId="primary-app-container"
30+
isContentFilled
3031
masthead={
3132
isStandalone ? (
3233
<NavBar

‎workspaces/frontend/src/app/pages/WorkspaceKinds/Form/WorkspaceKindForm.tsx‎

Lines changed: 35 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -184,32 +184,40 @@ export const WorkspaceKindForm: React.FC = () => {
184184
</Stack>
185185
)}
186186
{mode === 'edit' && (
187-
<>
188-
<WorkspaceKindFormProperties
189-
mode={mode}
190-
properties={data.properties}
191-
updateField={(properties) => setData('properties', properties)}
192-
/>
193-
<WorkspaceKindFormImage
194-
mode={mode}
195-
imageConfig={data.imageConfig}
196-
updateImageConfig={(imageInput) => {
197-
setData('imageConfig', imageInput);
198-
}}
199-
/>
200-
<WorkspaceKindFormPodConfig
201-
podConfig={data.podConfig}
202-
updatePodConfig={(podConfig) => {
203-
setData('podConfig', podConfig);
204-
}}
205-
/>
206-
<WorkspaceKindFormPodTemplate
207-
podTemplate={data.podTemplate}
208-
updatePodTemplate={(podTemplate) => {
209-
setData('podTemplate', podTemplate);
210-
}}
211-
/>
212-
</>
187+
<Stack hasGutter>
188+
<StackItem>
189+
<WorkspaceKindFormProperties
190+
mode={mode}
191+
properties={data.properties}
192+
updateField={(properties) => setData('properties', properties)}
193+
/>
194+
</StackItem>
195+
<StackItem>
196+
<WorkspaceKindFormImage
197+
mode={mode}
198+
imageConfig={data.imageConfig}
199+
updateImageConfig={(imageInput) => {
200+
setData('imageConfig', imageInput);
201+
}}
202+
/>
203+
</StackItem>
204+
<StackItem>
205+
<WorkspaceKindFormPodConfig
206+
podConfig={data.podConfig}
207+
updatePodConfig={(podConfig) => {
208+
setData('podConfig', podConfig);
209+
}}
210+
/>
211+
</StackItem>
212+
<StackItem>
213+
<WorkspaceKindFormPodTemplate
214+
podTemplate={data.podTemplate}
215+
updatePodTemplate={(podTemplate) => {
216+
setData('podTemplate', podTemplate);
217+
}}
218+
/>
219+
</StackItem>
220+
</Stack>
213221
)}
214222
</PageSection>
215223
<PageSection isFilled={false} stickyOnBreakpoint={{ default: 'bottom' }}>
@@ -226,7 +234,7 @@ export const WorkspaceKindForm: React.FC = () => {
226234
</Button>
227235
</FlexItem>
228236
<FlexItem>
229-
<Button variant="link" isInline onClick={cancel}>
237+
<Button variant="link" onClick={cancel}>
230238
Cancel
231239
</Button>
232240
</FlexItem>

‎workspaces/frontend/src/app/pages/WorkspaceKinds/Form/fileUpload/WorkspaceKindFileUpload.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ export const WorkspaceKindFileUpload: React.FC<WorkspaceKindFileUploadProps> = (
8686
}, []);
8787

8888
return (
89-
<Content style={{ height: '100%' }}>
89+
<Content>
9090
<FileUpload
9191
className="workspacekind-file-upload"
9292
id="text-file-simple"

‎workspaces/frontend/src/app/pages/WorkspaceKinds/Form/image/WorkspaceKindFormImage.tsx‎

Lines changed: 56 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -105,66 +105,64 @@ export const WorkspaceKindFormImage: React.FC<WorkspaceKindFormImageProps> = ({
105105

106106
return (
107107
<Content>
108-
<div className="pf-u-mb-0">
109-
<ExpandableSection
110-
toggleText="Workspace Images"
111-
onToggle={() => setIsExpanded((prev) => !prev)}
112-
isExpanded={isExpanded}
113-
isIndented
108+
<ExpandableSection
109+
toggleText="Workspace Images"
110+
onToggle={() => setIsExpanded((prev) => !prev)}
111+
isExpanded={isExpanded}
112+
isIndented
113+
>
114+
{imageConfig.values.length === 0 && (
115+
<EmptyState titleText="Start by creating an image" headingLevel="h4" icon={CubesIcon}>
116+
<EmptyStateBody>Add an image configuration to your Workspace Kind</EmptyStateBody>
117+
<EmptyStateFooter>
118+
<EmptyStateActions>{addImageBtn}</EmptyStateActions>
119+
</EmptyStateFooter>
120+
</EmptyState>
121+
)}
122+
{imageConfig.values.length > 0 && (
123+
<div>
124+
<WorkspaceKindFormPaginatedTable
125+
ariaLabel="Images table"
126+
rows={imageConfig.values}
127+
defaultId={defaultId}
128+
setDefaultId={(id) => {
129+
updateImageConfig({ ...imageConfig, default: id });
130+
setDefaultId(id);
131+
}}
132+
handleEdit={handleEdit}
133+
openDeleteModal={openDeleteModal}
134+
/>
135+
{addImageBtn}
136+
</div>
137+
)}
138+
<WorkspaceKindFormImageModal
139+
isOpen={isModalOpen}
140+
onClose={clearForm}
141+
onSubmit={handleAddOrEditSubmit}
142+
editIndex={editIndex}
143+
image={image}
144+
setImage={setImage}
145+
mode={mode}
146+
/>
147+
<Modal
148+
isOpen={isDeleteModalOpen}
149+
onClose={() => setIsDeleteModalOpen(false)}
150+
variant={ModalVariant.small}
114151
>
115-
{imageConfig.values.length === 0 && (
116-
<EmptyState titleText="Start by creating an image" headingLevel="h4" icon={CubesIcon}>
117-
<EmptyStateBody>Add an image configuration to your Workspace Kind</EmptyStateBody>
118-
<EmptyStateFooter>
119-
<EmptyStateActions>{addImageBtn}</EmptyStateActions>
120-
</EmptyStateFooter>
121-
</EmptyState>
122-
)}
123-
{imageConfig.values.length > 0 && (
124-
<div>
125-
<WorkspaceKindFormPaginatedTable
126-
ariaLabel="Images table"
127-
rows={imageConfig.values}
128-
defaultId={defaultId}
129-
setDefaultId={(id) => {
130-
updateImageConfig({ ...imageConfig, default: id });
131-
setDefaultId(id);
132-
}}
133-
handleEdit={handleEdit}
134-
openDeleteModal={openDeleteModal}
135-
/>
136-
{addImageBtn}
137-
</div>
138-
)}
139-
<WorkspaceKindFormImageModal
140-
isOpen={isModalOpen}
141-
onClose={clearForm}
142-
onSubmit={handleAddOrEditSubmit}
143-
editIndex={editIndex}
144-
image={image}
145-
setImage={setImage}
146-
mode={mode}
152+
<ModalHeader
153+
title="Remove Image?"
154+
description="This image will be removed from the workspace kind."
147155
/>
148-
<Modal
149-
isOpen={isDeleteModalOpen}
150-
onClose={() => setIsDeleteModalOpen(false)}
151-
variant={ModalVariant.small}
152-
>
153-
<ModalHeader
154-
title="Remove Image?"
155-
description="This image will be removed from the workspace kind."
156-
/>
157-
<ModalFooter>
158-
<Button key="remove" variant="danger" onClick={handleDelete}>
159-
Remove
160-
</Button>
161-
<Button key="cancel" variant="link" onClick={() => setIsDeleteModalOpen(false)}>
162-
Cancel
163-
</Button>
164-
</ModalFooter>
165-
</Modal>
166-
</ExpandableSection>
167-
</div>
156+
<ModalFooter>
157+
<Button key="remove" variant="danger" onClick={handleDelete}>
158+
Remove
159+
</Button>
160+
<Button key="cancel" variant="link" onClick={() => setIsDeleteModalOpen(false)}>
161+
Cancel
162+
</Button>
163+
</ModalFooter>
164+
</Modal>
165+
</ExpandableSection>
168166
</Content>
169167
);
170168
};

‎workspaces/frontend/src/app/pages/WorkspaceKinds/Form/podConfig/WorkspaceKindFormPodConfig.tsx‎

Lines changed: 61 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -101,71 +101,69 @@ export const WorkspaceKindFormPodConfig: React.FC<WorkspaceKindFormPodConfigProp
101101

102102
return (
103103
<Content>
104-
<div className="pf-u-mb-0">
105-
<ExpandableSection
106-
toggleText="Pod Configurations"
107-
onToggle={() => setIsExpanded((prev) => !prev)}
108-
isExpanded={isExpanded}
109-
isIndented
110-
>
111-
{podConfig.values.length === 0 && (
112-
<EmptyState
113-
titleText="Start by creating a pod configuration"
114-
headingLevel="h4"
115-
icon={CubesIcon}
116-
>
117-
<EmptyStateBody>
118-
Configure specifications for pods and containers in your Workspace Kind
119-
</EmptyStateBody>
120-
<EmptyStateFooter>
121-
<EmptyStateActions>{addConfigBtn}</EmptyStateActions>
122-
</EmptyStateFooter>
123-
</EmptyState>
124-
)}
125-
{podConfig.values.length > 0 && (
126-
<>
127-
<WorkspaceKindFormPaginatedTable
128-
ariaLabel="Pod Configs Table"
129-
rows={podConfig.values}
130-
defaultId={defaultId}
131-
setDefaultId={(id) => {
132-
updatePodConfig({ ...podConfig, default: id });
133-
setDefaultId(id);
134-
}}
135-
handleEdit={handleEdit}
136-
openDeleteModal={openDeleteModal}
137-
/>
138-
{addConfigBtn}
139-
</>
140-
)}
141-
<WorkspaceKindFormPodConfigModal
142-
isOpen={isModalOpen}
143-
onClose={clearForm}
144-
onSubmit={handleAddOrEditSubmit}
145-
editIndex={editIndex}
146-
currConfig={currConfig}
147-
setCurrConfig={setCurrConfig}
148-
/>
149-
<Modal
150-
isOpen={isDeleteModalOpen}
151-
onClose={() => setIsDeleteModalOpen(false)}
152-
variant={ModalVariant.small}
104+
<ExpandableSection
105+
toggleText="Pod Configurations"
106+
onToggle={() => setIsExpanded((prev) => !prev)}
107+
isExpanded={isExpanded}
108+
isIndented
109+
>
110+
{podConfig.values.length === 0 && (
111+
<EmptyState
112+
titleText="Start by creating a pod configuration"
113+
headingLevel="h4"
114+
icon={CubesIcon}
153115
>
154-
<ModalHeader
155-
title="Remove Pod Config?"
156-
description="The pod config will be removed from the workspace kind."
116+
<EmptyStateBody>
117+
Configure specifications for pods and containers in your Workspace Kind
118+
</EmptyStateBody>
119+
<EmptyStateFooter>
120+
<EmptyStateActions>{addConfigBtn}</EmptyStateActions>
121+
</EmptyStateFooter>
122+
</EmptyState>
123+
)}
124+
{podConfig.values.length > 0 && (
125+
<>
126+
<WorkspaceKindFormPaginatedTable
127+
ariaLabel="Pod Configs Table"
128+
rows={podConfig.values}
129+
defaultId={defaultId}
130+
setDefaultId={(id) => {
131+
updatePodConfig({ ...podConfig, default: id });
132+
setDefaultId(id);
133+
}}
134+
handleEdit={handleEdit}
135+
openDeleteModal={openDeleteModal}
157136
/>
158-
<ModalFooter>
159-
<Button key="remove" variant="danger" onClick={handleDelete}>
160-
Remove
161-
</Button>
162-
<Button key="cancel" variant="link" onClick={() => setIsDeleteModalOpen(false)}>
163-
Cancel
164-
</Button>
165-
</ModalFooter>
166-
</Modal>
167-
</ExpandableSection>
168-
</div>
137+
{addConfigBtn}
138+
</>
139+
)}
140+
<WorkspaceKindFormPodConfigModal
141+
isOpen={isModalOpen}
142+
onClose={clearForm}
143+
onSubmit={handleAddOrEditSubmit}
144+
editIndex={editIndex}
145+
currConfig={currConfig}
146+
setCurrConfig={setCurrConfig}
147+
/>
148+
<Modal
149+
isOpen={isDeleteModalOpen}
150+
onClose={() => setIsDeleteModalOpen(false)}
151+
variant={ModalVariant.small}
152+
>
153+
<ModalHeader
154+
title="Remove Pod Config?"
155+
description="The pod config will be removed from the workspace kind."
156+
/>
157+
<ModalFooter>
158+
<Button key="remove" variant="danger" onClick={handleDelete}>
159+
Remove
160+
</Button>
161+
<Button key="cancel" variant="link" onClick={() => setIsDeleteModalOpen(false)}>
162+
Cancel
163+
</Button>
164+
</ModalFooter>
165+
</Modal>
166+
</ExpandableSection>
169167
</Content>
170168
);
171169
};

0 commit comments

Comments
 (0)