Skip to content

fix: cancel button variant and expandable spacing #737

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 12, 2025
Merged

fix: cancel button variant and expandable spacing #737

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions workspaces/frontend/src/app/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ const App: React.FC = () => {
<NamespaceContextProvider>
<Page
mainContainerId="primary-app-container"
isContentFilled
masthead={
isStandalone ? (
<NavBar
Expand Down
62 changes: 35 additions & 27 deletions workspaces/frontend/src/app/pages/WorkspaceKinds/Form/WorkspaceKindForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,32 +184,40 @@ export const WorkspaceKindForm: React.FC = () => {
</Stack>
)}
{mode === 'edit' && (
<>
<WorkspaceKindFormProperties
mode={mode}
properties={data.properties}
updateField={(properties) => setData('properties', properties)}
/>
<WorkspaceKindFormImage
mode={mode}
imageConfig={data.imageConfig}
updateImageConfig={(imageInput) => {
setData('imageConfig', imageInput);
}}
/>
<WorkspaceKindFormPodConfig
podConfig={data.podConfig}
updatePodConfig={(podConfig) => {
setData('podConfig', podConfig);
}}
/>
<WorkspaceKindFormPodTemplate
podTemplate={data.podTemplate}
updatePodTemplate={(podTemplate) => {
setData('podTemplate', podTemplate);
}}
/>
</>
<Stack hasGutter>
<StackItem>
<WorkspaceKindFormProperties
mode={mode}
properties={data.properties}
updateField={(properties) => setData('properties', properties)}
/>
</StackItem>
<StackItem>
<WorkspaceKindFormImage
mode={mode}
imageConfig={data.imageConfig}
updateImageConfig={(imageInput) => {
setData('imageConfig', imageInput);
}}
/>
</StackItem>
<StackItem>
<WorkspaceKindFormPodConfig
podConfig={data.podConfig}
updatePodConfig={(podConfig) => {
setData('podConfig', podConfig);
}}
/>
</StackItem>
<StackItem>
<WorkspaceKindFormPodTemplate
podTemplate={data.podTemplate}
updatePodTemplate={(podTemplate) => {
setData('podTemplate', podTemplate);
}}
/>
</StackItem>
</Stack>
)}
</PageSection>
<PageSection isFilled={false} stickyOnBreakpoint={{ default: 'bottom' }}>
Expand All @@ -226,7 +234,7 @@ export const WorkspaceKindForm: React.FC = () => {
</Button>
</FlexItem>
<FlexItem>
<Button variant="link" isInline onClick={cancel}>
<Button variant="link" onClick={cancel}>
Cancel
</Button>
</FlexItem>
Expand Down
2 changes: 1 addition & 1 deletion workspaces/frontend/src/app/pages/WorkspaceKinds/Form/fileUpload/WorkspaceKindFileUpload.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ export const WorkspaceKindFileUpload: React.FC<WorkspaceKindFileUploadProps> = (
}, []);

return (
<Content style={{ height: '100%' }}>
<Content>
<FileUpload
className="workspacekind-file-upload"
id="text-file-simple"
Expand Down
114 changes: 56 additions & 58 deletions workspaces/frontend/src/app/pages/WorkspaceKinds/Form/image/WorkspaceKindFormImage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,66 +105,64 @@ export const WorkspaceKindFormImage: React.FC<WorkspaceKindFormImageProps> = ({

return (
<Content>
<div className="pf-u-mb-0">
<ExpandableSection
toggleText="Workspace Images"
onToggle={() => setIsExpanded((prev) => !prev)}
isExpanded={isExpanded}
isIndented
<ExpandableSection
toggleText="Workspace Images"
onToggle={() => setIsExpanded((prev) => !prev)}
isExpanded={isExpanded}
isIndented
>
{imageConfig.values.length === 0 && (
<EmptyState titleText="Start by creating an image" headingLevel="h4" icon={CubesIcon}>
<EmptyStateBody>Add an image configuration to your Workspace Kind</EmptyStateBody>
<EmptyStateFooter>
<EmptyStateActions>{addImageBtn}</EmptyStateActions>
</EmptyStateFooter>
</EmptyState>
)}
{imageConfig.values.length > 0 && (
<div>
<WorkspaceKindFormPaginatedTable
ariaLabel="Images table"
rows={imageConfig.values}
defaultId={defaultId}
setDefaultId={(id) => {
updateImageConfig({ ...imageConfig, default: id });
setDefaultId(id);
}}
handleEdit={handleEdit}
openDeleteModal={openDeleteModal}
/>
{addImageBtn}
</div>
)}
<WorkspaceKindFormImageModal
isOpen={isModalOpen}
onClose={clearForm}
onSubmit={handleAddOrEditSubmit}
editIndex={editIndex}
image={image}
setImage={setImage}
mode={mode}
/>
<Modal
isOpen={isDeleteModalOpen}
onClose={() => setIsDeleteModalOpen(false)}
variant={ModalVariant.small}
>
{imageConfig.values.length === 0 && (
<EmptyState titleText="Start by creating an image" headingLevel="h4" icon={CubesIcon}>
<EmptyStateBody>Add an image configuration to your Workspace Kind</EmptyStateBody>
<EmptyStateFooter>
<EmptyStateActions>{addImageBtn}</EmptyStateActions>
</EmptyStateFooter>
</EmptyState>
)}
{imageConfig.values.length > 0 && (
<div>
<WorkspaceKindFormPaginatedTable
ariaLabel="Images table"
rows={imageConfig.values}
defaultId={defaultId}
setDefaultId={(id) => {
updateImageConfig({ ...imageConfig, default: id });
setDefaultId(id);
}}
handleEdit={handleEdit}
openDeleteModal={openDeleteModal}
/>
{addImageBtn}
</div>
)}
<WorkspaceKindFormImageModal
isOpen={isModalOpen}
onClose={clearForm}
onSubmit={handleAddOrEditSubmit}
editIndex={editIndex}
image={image}
setImage={setImage}
mode={mode}
<ModalHeader
title="Remove Image?"
description="This image will be removed from the workspace kind."
/>
<Modal
isOpen={isDeleteModalOpen}
onClose={() => setIsDeleteModalOpen(false)}
variant={ModalVariant.small}
>
<ModalHeader
title="Remove Image?"
description="This image will be removed from the workspace kind."
/>
<ModalFooter>
<Button key="remove" variant="danger" onClick={handleDelete}>
Remove
</Button>
<Button key="cancel" variant="link" onClick={() => setIsDeleteModalOpen(false)}>
Cancel
</Button>
</ModalFooter>
</Modal>
</ExpandableSection>
</div>
<ModalFooter>
<Button key="remove" variant="danger" onClick={handleDelete}>
Remove
</Button>
<Button key="cancel" variant="link" onClick={() => setIsDeleteModalOpen(false)}>
Cancel
</Button>
</ModalFooter>
</Modal>
</ExpandableSection>
</Content>
);
};
124 changes: 61 additions & 63 deletions ...paces/frontend/src/app/pages/WorkspaceKinds/Form/podConfig/WorkspaceKindFormPodConfig.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,71 +101,69 @@ export const WorkspaceKindFormPodConfig: React.FC<WorkspaceKindFormPodConfigProp

return (
<Content>
<div className="pf-u-mb-0">
<ExpandableSection
toggleText="Pod Configurations"
onToggle={() => setIsExpanded((prev) => !prev)}
isExpanded={isExpanded}
isIndented
>
{podConfig.values.length === 0 && (
<EmptyState
titleText="Start by creating a pod configuration"
headingLevel="h4"
icon={CubesIcon}
>
<EmptyStateBody>
Configure specifications for pods and containers in your Workspace Kind
</EmptyStateBody>
<EmptyStateFooter>
<EmptyStateActions>{addConfigBtn}</EmptyStateActions>
</EmptyStateFooter>
</EmptyState>
)}
{podConfig.values.length > 0 && (
<>
<WorkspaceKindFormPaginatedTable
ariaLabel="Pod Configs Table"
rows={podConfig.values}
defaultId={defaultId}
setDefaultId={(id) => {
updatePodConfig({ ...podConfig, default: id });
setDefaultId(id);
}}
handleEdit={handleEdit}
openDeleteModal={openDeleteModal}
/>
{addConfigBtn}
</>
)}
<WorkspaceKindFormPodConfigModal
isOpen={isModalOpen}
onClose={clearForm}
onSubmit={handleAddOrEditSubmit}
editIndex={editIndex}
currConfig={currConfig}
setCurrConfig={setCurrConfig}
/>
<Modal
isOpen={isDeleteModalOpen}
onClose={() => setIsDeleteModalOpen(false)}
variant={ModalVariant.small}
<ExpandableSection
toggleText="Pod Configurations"
onToggle={() => setIsExpanded((prev) => !prev)}
isExpanded={isExpanded}
isIndented
>
{podConfig.values.length === 0 && (
<EmptyState
titleText="Start by creating a pod configuration"
headingLevel="h4"
icon={CubesIcon}
>
<ModalHeader
title="Remove Pod Config?"
description="The pod config will be removed from the workspace kind."
<EmptyStateBody>
Configure specifications for pods and containers in your Workspace Kind
</EmptyStateBody>
<EmptyStateFooter>
<EmptyStateActions>{addConfigBtn}</EmptyStateActions>
</EmptyStateFooter>
</EmptyState>
)}
{podConfig.values.length > 0 && (
<>
<WorkspaceKindFormPaginatedTable
ariaLabel="Pod Configs Table"
rows={podConfig.values}
defaultId={defaultId}
setDefaultId={(id) => {
updatePodConfig({ ...podConfig, default: id });
setDefaultId(id);
}}
handleEdit={handleEdit}
openDeleteModal={openDeleteModal}
/>
<ModalFooter>
<Button key="remove" variant="danger" onClick={handleDelete}>
Remove
</Button>
<Button key="cancel" variant="link" onClick={() => setIsDeleteModalOpen(false)}>
Cancel
</Button>
</ModalFooter>
</Modal>
</ExpandableSection>
</div>
{addConfigBtn}
</>
)}
<WorkspaceKindFormPodConfigModal
isOpen={isModalOpen}
onClose={clearForm}
onSubmit={handleAddOrEditSubmit}
editIndex={editIndex}
currConfig={currConfig}
setCurrConfig={setCurrConfig}
/>
<Modal
isOpen={isDeleteModalOpen}
onClose={() => setIsDeleteModalOpen(false)}
variant={ModalVariant.small}
>
<ModalHeader
title="Remove Pod Config?"
description="The pod config will be removed from the workspace kind."
/>
<ModalFooter>
<Button key="remove" variant="danger" onClick={handleDelete}>
Remove
</Button>
<Button key="cancel" variant="link" onClick={() => setIsDeleteModalOpen(false)}>
Cancel
</Button>
</ModalFooter>
</Modal>
</ExpandableSection>
</Content>
);
};
Loading