kubeflow
/
notebooks
mirror of https://github.com/kubeflow/notebooks.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(ws): Notebooks 2.0 // Frontend // Workspace details // Applies MUI Theming (#185) 

Signed-off-by: Jenny <32821331+jenny-s51@users.noreply.github.com>

fix tab content padding

apply horizontal variant to description list, add dividers to match KF central UI

update spacer size

Signed-off-by: Jenny <32821331+jenny-s51@users.noreply.github.com>

update font size for description list term
This commit is contained in:
Jenny 2025-01-24 13:46:21 -05:00 committed by GitHub
parent 8ceb835f1e
commit 6fe77160d0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 49 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetails.tsx
View File

@ -9,6 +9,8 @@ import {
Tab,
TabTitleText,
Title,
TabContentBody,
TabContent,
} from '@patternfly/react-core';
import { Workspace } from '~/shared/types';
import { WorkspaceDetailsOverview } from '~/app/pages/Workspaces/Details/WorkspaceDetailsOverview';
@ -37,7 +39,7 @@ export const WorkspaceDetails: React.FunctionComponent<WorkspaceDetailsProps> =
};
return (
<DrawerPanelContent isResizable defaultSize="50%">
<DrawerPanelContent>
<DrawerHead>
<Title headingLevel="h6">{workspace.name}</Title>
<WorkspaceDetailsActions onEditClick={onEditClick} onDeleteClick={onDeleteClick} />
@ -48,20 +50,30 @@ export const WorkspaceDetails: React.FunctionComponent<WorkspaceDetailsProps> =
<DrawerPanelBody>
<Tabs activeKey={activeTabKey} onSelect={handleTabClick}>
<Tab eventKey={0} title={<TabTitleText>Overview</TabTitleText>} aria-label="Overview">
<WorkspaceDetailsOverview workspace={workspace} />
<TabContent id="overviewSectionBodyPadding">
<TabContentBody hasPadding>
<WorkspaceDetailsOverview workspace={workspace} />
</TabContentBody>
</TabContent>
</Tab>
<Tab eventKey={1} title={<TabTitleText>Activity</TabTitleText>} aria-label="Activity">
Activity
<TabContent id="activitySectionBodyPadding">
<TabContentBody hasPadding>Activity</TabContentBody>
</TabContent>
</Tab>
<Tab eventKey={2} title={<TabTitleText>Logs</TabTitleText>} aria-label="Logs">
Logs
<TabContent id="logsSectionBodyPadding">
<TabContentBody hasPadding>Logs</TabContentBody>
</TabContent>
</Tab>
<Tab
eventKey={3}
title={<TabTitleText>Pod template</TabTitleText>}
aria-label="Pod template"
>
Pod template
<TabContent id="podTemplateBodyPadding">
<TabContentBody hasPadding>Pod template</TabContentBody>
</TabContent>
</Tab>
</Tabs>
</DrawerPanelBody>

7
workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetailsOverview.tsx
View File

@ -4,6 +4,7 @@ import {
DescriptionListTerm,
DescriptionListGroup,
DescriptionListDescription,
Divider,
} from '@patternfly/react-core';
import { Workspace } from '~/shared/types';
@ -14,24 +15,28 @@ type WorkspaceDetailsOverviewProps = {
export const WorkspaceDetailsOverview: React.FunctionComponent<WorkspaceDetailsOverviewProps> = ({
workspace,
}) => (
<DescriptionList>
<DescriptionList isHorizontal>
<DescriptionListGroup>
<DescriptionListTerm>Name</DescriptionListTerm>
<DescriptionListDescription>{workspace.name}</DescriptionListDescription>
</DescriptionListGroup>
<Divider />
<DescriptionListGroup>
<DescriptionListTerm>Kind</DescriptionListTerm>
<DescriptionListDescription>{workspace.kind}</DescriptionListDescription>
</DescriptionListGroup>
<Divider />
<DescriptionListGroup>
<DescriptionListTerm>Labels</DescriptionListTerm>
<DescriptionListDescription>
{workspace.podTemplate.podMetadata.labels.join(', ')}
</DescriptionListDescription>
</DescriptionListGroup>
<Divider />
<DescriptionListGroup>
<DescriptionListTerm>Pod config</DescriptionListTerm>
<DescriptionListDescription>{workspace.options.podConfig}</DescriptionListDescription>
</DescriptionListGroup>
<Divider />
</DescriptionList>
);

2
workspaces/frontend/src/app/pages/Workspaces/Workspaces.tsx
View File

@ -375,7 +375,7 @@ export const Workspaces: React.FunctionComponent = () => {
);
return (
<Drawer isExpanded={selectedWorkspace != null}>
<Drawer isInline isExpanded={selectedWorkspace != null}>
<DrawerContent panelContent={workspaceDetailsContent}>
<DrawerContentBody>
<PageSection isFilled>

25
workspaces/frontend/src/shared/style/MUI-theme.scss
View File

@ -23,6 +23,9 @@
--mui-button--LineHeight: 1.75;
--mui-link-underlineColor: rgba(33, 150, 243, 0.4);
// Drawer
--mui-drawer-BorderLeft: var(--mui-palette-grey-300);
// Menu item
--mui-menu__item--PaddingBlockStart: 6px;
--mui-menu__item--PaddingBlockEnd: 6px;
@ -175,10 +178,24 @@
--pf-v6-c-button--BackgroundColor: rgba(33, 150, 243, 0.04);
}
.mui-theme .pf-v6-c-description-list {
--pf-v6-c-description-list--RowGap: var(--pf-t--global--spacer--gap--group-to-group--horizontal--compact);
}
.mui-theme .pf-v6-c-description-list__term {
font: var(--mui-font-subtitle2);
}
.mui-theme .pf-v6-c-description-list__text .pf-v6-l-split__item.pf-m-fill {
align-content: center;
}
.mui-theme .pf-v6-c-drawer {
--pf-v6-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor: var(--mui-drawer-BorderLeft);
}
.mui-theme .pf-v6-c-form__group {
position: relative;
}
@ -669,6 +686,13 @@
--pf-v6-c-tab-content__body--m-padding--PaddingInlineStart: var(--pf-t--global--spacer--lg);
}
.pf-v6-c-tab-content__body.pf-m-padding {
--pf-v6-c-tab-content__body--PaddingInlineStart: 0px;
--pf-v6-c-tab-content__body--PaddingInlineEnd: 0px;
--pf-v6-c-tab-content__body--PaddingBlockStart: var(--mui-spacing-8px);
--pf-v6-c-tab-content__body--PaddingBlockEnd: var(--mui-spacing-8px);
}
.mui-theme .pf-v6-c-tabs {
--pf-v6-c-tabs__link--hover--BackgroundColor: var(--mui-tabs__link--hover--BackgroundColor);
--pf-v6-c-tabs__item--PaddingBlockStart: var(--mui-tabs__item--PaddingBlockStart);
@ -760,6 +784,7 @@
}
.mui-theme .pf-v6-c-page__main-container {
--pf-v6-c-page__main-container--BorderWidth: 0px;
--pf-v6-c-page__main-container--BorderRadius: var(--mui-shape-borderRadius);
box-shadow: var(--mui-shadows-1);
}