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

fix(ws): Apply sentence case to text elements across UI (#497) 

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

fix(ws): align nav item names with corresponding page headers

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

fix(ws): apply sentence case, fix tests

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

fix(ws): apply correct sentence case to TableTitleText
This commit is contained in:
Jenny 2025-07-24 09:29:01 -04:00 committed by GitHub
parent bd66a26175
commit a721c5073d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
16 changed files with 41 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
workspaces/frontend/src/__tests__/cypress/cypress/pages/home.ts
View File

@ -4,7 +4,7 @@ class Home {
} }
findButton() { findButton() {
return cy.get('button:contains("Create Workspace")'); return cy.get('button:contains("Create workspace")');
} }
} }

4
workspaces/frontend/src/app/AppRoutes.tsx
View File

@ -43,7 +43,7 @@ export const useAdminDebugSettings = (): NavDataItem[] => {
children: [{ label: 'Notebooks', path: '/notebookDebugSettings' }], children: [{ label: 'Notebooks', path: '/notebookDebugSettings' }],
}, },
{ {
label: 'Workspace Kinds', label: 'Workspace kinds',
path: AppRoutePaths.workspaceKinds, path: AppRoutePaths.workspaceKinds,
}, },
]; ];
@ -51,7 +51,7 @@ export const useAdminDebugSettings = (): NavDataItem[] => {
export const useNavData = (): NavDataItem[] => [ export const useNavData = (): NavDataItem[] => [
{ {
label: 'Notebooks', label: 'Workspaces',
path: AppRoutePaths.workspaces, path: AppRoutePaths.workspaces,
}, },
...useAdminDebugSettings(), ...useAdminDebugSettings(),

2
workspaces/frontend/src/app/components/WorkspaceTable.tsx
View File

@ -394,7 +394,7 @@ const WorkspaceTable = React.forwardRef<WorkspaceTableRef, WorkspaceTableProps>(
toolbarActions={ toolbarActions={
canCreateWorkspaces && ( canCreateWorkspaces && (
<Button variant="primary" ouiaId="Primary" onClick={createWorkspace}> <Button variant="primary" ouiaId="Primary" onClick={createWorkspace}>
Create Workspace Create workspace
</Button> </Button>
) )
} }

2
workspaces/frontend/src/app/context/WorkspaceActionsContext.tsx
View File

@ -213,7 +213,7 @@ export const WorkspaceActionsContextProvider: React.FC<WorkspaceActionsContextPr
isOpen isOpen
resourceName={activeWsAction.workspace.name} resourceName={activeWsAction.workspace.name}
namespace={activeWsAction.workspace.namespace} namespace={activeWsAction.workspace.namespace}
title="Delete Workspace?" title="Delete workspace?"
onClose={() => setActiveWsAction(null)} onClose={() => setActiveWsAction(null)}
onDelete={async () => executeDeleteAction()} onDelete={async () => executeDeleteAction()}
/> />

4
workspaces/frontend/src/app/pages/WorkspaceKinds/Form/properties/WorkspaceKindFormProperties.tsx
View File

@ -76,9 +76,9 @@ export const WorkspaceKindFormProperties: React.FC<WorkspaceKindFormPropertiesPr
<TextInput <TextInput
isDisabled={!properties.deprecated} isDisabled={!properties.deprecated}
type="text" type="text"
label="Deprecation Message" label="Deprecation message"
value={properties.deprecationMessage} value={properties.deprecationMessage}
placeholder="Deprecation Message" placeholder="Deprecation message"
onChange={(_, value) => updateField({ ...properties, deprecationMessage: value })} onChange={(_, value) => updateField({ ...properties, deprecationMessage: value })}
id="workspace-kind-deprecated-msg" id="workspace-kind-deprecated-msg"
/> />

16
workspaces/frontend/src/app/pages/WorkspaceKinds/WorkspaceKinds.tsx
View File

@ -478,7 +478,7 @@ export const WorkspaceKinds: React.FunctionComponent = () => {
<DrawerContentBody> <DrawerContentBody>
<PageSection isFilled> <PageSection isFilled>
<Content> <Content>
<h1>Kubeflow Workspace Kinds</h1> <h1>Workspace kinds</h1>
<p>View your existing workspace kinds.</p> <p>View your existing workspace kinds.</p>
</Content> </Content>
<br /> <br />
@ -499,9 +499,9 @@ export const WorkspaceKinds: React.FunctionComponent = () => {
<ThemeAwareSearchInput <ThemeAwareSearchInput
value={searchNameValue} value={searchNameValue}
onChange={onSearchNameChange} onChange={onSearchNameChange}
placeholder="Filter by Name" placeholder="Filter by name"
fieldLabel="Find by Name" fieldLabel="Find by name"
aria-label="Filter by Name" aria-label="Filter by name"
/> />
</ToolbarItem> </ToolbarItem>
</ToolbarFilter> </ToolbarFilter>
@ -520,9 +520,9 @@ export const WorkspaceKinds: React.FunctionComponent = () => {
<ThemeAwareSearchInput <ThemeAwareSearchInput
value={searchDescriptionValue} value={searchDescriptionValue}
onChange={onSearchDescriptionChange} onChange={onSearchDescriptionChange}
placeholder="Filter by Description" placeholder="Filter by description"
fieldLabel="Find by Description" fieldLabel="Find by description"
aria-label="Filter by Description" aria-label="Filter by description"
/> />
</ToolbarItem> </ToolbarItem>
</ToolbarFilter> </ToolbarFilter>
@ -537,7 +537,7 @@ export const WorkspaceKinds: React.FunctionComponent = () => {
</ToolbarFilter> </ToolbarFilter>
<ToolbarItem> <ToolbarItem>
<Button variant="primary" ouiaId="Primary" onClick={createWorkspaceKind}> <Button variant="primary" ouiaId="Primary" onClick={createWorkspaceKind}>
Create Workspace Kind Create workspace kind
</Button> </Button>
</ToolbarItem> </ToolbarItem>
</ToolbarGroup> </ToolbarGroup>

2
workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetails.tsx
View File

@ -71,7 +71,7 @@ export const WorkspaceKindDetails: React.FunctionComponent<WorkspaceKindDetailsP
/> />
<Tab <Tab
eventKey={podConfigsTabKey} eventKey={podConfigsTabKey}
title={<TabTitleText>Pod Configs</TabTitleText>} title={<TabTitleText>Pod configs</TabTitleText>}
tabContentId="podConfigsTabContent" tabContentId="podConfigsTabContent"
aria-label="Pod Configs" aria-label="Pod Configs"
/> />

2
workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetailsOverview.tsx
View File

@ -42,7 +42,7 @@ export const WorkspaceKindDetailsOverview: React.FunctionComponent<
</DescriptionListGroup> </DescriptionListGroup>
<Divider /> <Divider />
<DescriptionListGroup> <DescriptionListGroup>
<DescriptionListTerm>Deprecation Message</DescriptionListTerm> <DescriptionListTerm>Deprecation message</DescriptionListTerm>
<DescriptionListDescription>{workspaceKind.deprecationMessage}</DescriptionListDescription> <DescriptionListDescription>{workspaceKind.deprecationMessage}</DescriptionListDescription>
</DescriptionListGroup> </DescriptionListGroup>
<Divider /> <Divider />

8
workspaces/frontend/src/app/pages/WorkspaceKinds/summary/WorkspaceKindSummaryExpandableCard.tsx
View File

@ -54,7 +54,7 @@ const WorkspaceKindSummaryExpandableCard: React.FC<WorkspaceKindSummaryExpandabl
<Card isExpanded={isExpanded}> <Card isExpanded={isExpanded}>
<CardHeader onExpand={onExpandToggle}> <CardHeader onExpand={onExpandToggle}>
<CardTitle> <CardTitle>
<Content component={ContentVariants.h2}>Workspaces Summary</Content> <Content component={ContentVariants.h2}>Workspaces summary</Content>
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardExpandableContent> <CardExpandableContent>
@ -71,7 +71,7 @@ const WorkspaceKindSummaryExpandableCard: React.FC<WorkspaceKindSummaryExpandabl
</FlexItem> </FlexItem>
</SectionFlex> </SectionFlex>
<SectionDivider /> <SectionDivider />
<SectionFlex title="Idle GPU Workspaces"> <SectionFlex title="Idle GPU workspaces">
<FlexItem> <FlexItem>
<Bullseye> <Bullseye>
<Button <Button
@ -88,12 +88,12 @@ const WorkspaceKindSummaryExpandableCard: React.FC<WorkspaceKindSummaryExpandabl
</FlexItem> </FlexItem>
<FlexItem> <FlexItem>
<Bullseye> <Bullseye>
<Content>Idle GPU Workspaces</Content> <Content>Idle GPU workspaces</Content>
</Bullseye> </Bullseye>
</FlexItem> </FlexItem>
</SectionFlex> </SectionFlex>
<SectionDivider /> <SectionDivider />
<SectionFlex title="Top GPU Consumer Namespaces"> <SectionFlex title="Top GPU consumer namespaces">
<FlexItem> <FlexItem>
<Stack hasGutter> <Stack hasGutter>
{topGpuConsumersByNamespace.length > 0 ? ( {topGpuConsumersByNamespace.length > 0 ? (

8
workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetailsActivity.tsx
View File

@ -23,28 +23,28 @@ export const WorkspaceDetailsActivity: React.FunctionComponent<WorkspaceDetailsA
return ( return (
<DescriptionList isHorizontal> <DescriptionList isHorizontal>
<DescriptionListGroup> <DescriptionListGroup>
<DescriptionListTerm>Last Activity</DescriptionListTerm> <DescriptionListTerm>Last activity</DescriptionListTerm>
<DescriptionListDescription data-testid="lastActivity"> <DescriptionListDescription data-testid="lastActivity">
{format(activity.lastActivity, DATE_FORMAT)} {format(activity.lastActivity, DATE_FORMAT)}
</DescriptionListDescription> </DescriptionListDescription>
</DescriptionListGroup> </DescriptionListGroup>
<Divider /> <Divider />
<DescriptionListGroup> <DescriptionListGroup>
<DescriptionListTerm>Last Update</DescriptionListTerm> <DescriptionListTerm>Last update</DescriptionListTerm>
<DescriptionListDescription data-testid="lastUpdate"> <DescriptionListDescription data-testid="lastUpdate">
{format(activity.lastUpdate, DATE_FORMAT)} {format(activity.lastUpdate, DATE_FORMAT)}
</DescriptionListDescription> </DescriptionListDescription>
</DescriptionListGroup> </DescriptionListGroup>
<Divider /> <Divider />
<DescriptionListGroup> <DescriptionListGroup>
<DescriptionListTerm>Pause Time</DescriptionListTerm> <DescriptionListTerm>Pause time</DescriptionListTerm>
<DescriptionListDescription data-testid="pauseTime"> <DescriptionListDescription data-testid="pauseTime">
{format(pausedTime, DATE_FORMAT)} {format(pausedTime, DATE_FORMAT)}
</DescriptionListDescription> </DescriptionListDescription>
</DescriptionListGroup> </DescriptionListGroup>
<Divider /> <Divider />
<DescriptionListGroup> <DescriptionListGroup>
<DescriptionListTerm>Pending Restart</DescriptionListTerm> <DescriptionListTerm>Pending restart</DescriptionListTerm>
<DescriptionListDescription data-testid="pendingRestart"> <DescriptionListDescription data-testid="pendingRestart">
{pendingRestart ? 'Yes' : 'No'} {pendingRestart ? 'Yes' : 'No'}
</DescriptionListDescription> </DescriptionListDescription>

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

@ -54,7 +54,7 @@ export const Workspaces: React.FunctionComponent = () => {
<PageSection isFilled> <PageSection isFilled>
<Stack hasGutter> <Stack hasGutter>
<StackItem> <StackItem>
<Content component={ContentVariants.h1}>Kubeflow Workspaces</Content> <Content component={ContentVariants.h1}>Workspaces</Content>
</StackItem> </StackItem>
<StackItem> <StackItem>
<Content component={ContentVariants.p}> <Content component={ContentVariants.p}>

4
workspaces/frontend/src/app/pages/Workspaces/workspaceActions/WorkspaceRedirectInformationView.tsx
View File

@ -93,7 +93,7 @@ export const WorkspaceRedirectInformationView: React.FC<WorkspaceRedirectInforma
eventKey={0} eventKey={0}
title={ title={
<TabTitleText> <TabTitleText>
Image Config {getLevelIcon(getMaxLevel(imageConfigRedirects))} Image config {getLevelIcon(getMaxLevel(imageConfigRedirects))}
</TabTitleText> </TabTitleText>
} }
> >
@ -111,7 +111,7 @@ export const WorkspaceRedirectInformationView: React.FC<WorkspaceRedirectInforma
<Tab <Tab
eventKey={1} eventKey={1}
title={ title={
<TabTitleText>Pod Config {getLevelIcon(getMaxLevel(podConfigRedirects))}</TabTitleText> <TabTitleText>Pod config {getLevelIcon(getMaxLevel(podConfigRedirects))}</TabTitleText>
} }
> >
{podConfigRedirects.map((redirect, index) => ( {podConfigRedirects.map((redirect, index) => (

4
workspaces/frontend/src/app/pages/Workspaces/workspaceActions/WorkspaceRestartActionModal.tsx
View File

@ -38,7 +38,7 @@ export const WorkspaceRestartActionModal: React.FC<RestartActionAlertProps> = ({
aria-labelledby="title-icon-modal-title" aria-labelledby="title-icon-modal-title"
onClose={onClose} onClose={onClose}
> >
<ModalHeader title="Restart Workspace" /> <ModalHeader title="Restart workspace" />
<ModalBody> <ModalBody>
{workspacePendingUpdate ? ( {workspacePendingUpdate ? (
<> <>
@ -54,7 +54,7 @@ export const WorkspaceRestartActionModal: React.FC<RestartActionAlertProps> = ({
</ModalBody> </ModalBody>
<ModalFooter> <ModalFooter>
{workspacePendingUpdate && ( {workspacePendingUpdate && (
<Button onClick={() => handleClick(true)}>Update and Restart</Button> <Button onClick={() => handleClick(true)}>Update and restart</Button>
)} )}
<Button <Button
onClick={() => handleClick(false)} onClick={() => handleClick(false)}

6
workspaces/frontend/src/app/pages/Workspaces/workspaceActions/WorkspaceStopActionModal.tsx
View File

@ -86,7 +86,7 @@ export const WorkspaceStopActionModal: React.FC<StopActionAlertProps> = ({
aria-labelledby="title-icon-modal-title" aria-labelledby="title-icon-modal-title"
onClose={onClose} onClose={onClose}
> >
<ModalHeader title="Stop Workspace" /> <ModalHeader title="Stop workspace" />
<ModalBody> <ModalBody>
{workspacePendingUpdate ? ( {workspacePendingUpdate ? (
<> <>
@ -103,11 +103,11 @@ export const WorkspaceStopActionModal: React.FC<StopActionAlertProps> = ({
<ModalFooter> <ModalFooter>
{shouldShowActionButton('updateAndStop') && workspacePendingUpdate && ( {shouldShowActionButton('updateAndStop') && workspacePendingUpdate && (
<ActionButton <ActionButton
action="Update and Stop" action="Update and stop"
titleOnLoading="Stopping ..." titleOnLoading="Stopping ..."
onClick={() => handleUpdateAndStop()} onClick={() => handleUpdateAndStop()}
> >
Update and Stop Update and stop
</ActionButton> </ActionButton>
)} )}

12
workspaces/frontend/src/shared/components/Filter.tsx
View File

@ -65,6 +65,11 @@ const Filter = React.forwardRef<FilterRef, FilterProps>(
[activeFilter.columnKey, columnDefinition], [activeFilter.columnKey, columnDefinition],
); );
const textInputActiveFilterLabel = useMemo(
() => activeFilterLabel.toLowerCase(),
[activeFilterLabel],
);
const handleFilterMenuKeys = useCallback( const handleFilterMenuKeys = useCallback(
(event: KeyboardEvent) => { (event: KeyboardEvent) => {
if (!isFilterMenuOpen) { if (!isFilterMenuOpen) {
@ -174,7 +179,6 @@ const Filter = React.forwardRef<FilterRef, FilterProps>(
columnKey: Object.keys(columnDefinition)[0], columnKey: Object.keys(columnDefinition)[0],
value: '', value: '',
}); });
setFilters([]);
}, [columnDefinition, setFilters]); }, [columnDefinition, setFilters]);
useImperativeHandle(ref, () => ({ useImperativeHandle(ref, () => ({
@ -262,9 +266,9 @@ const Filter = React.forwardRef<FilterRef, FilterProps>(
data-testid={`${id}-search-input`} data-testid={`${id}-search-input`}
value={searchValue} value={searchValue}
onChange={onSearchChange} onChange={onSearchChange}
placeholder={`Filter by ${activeFilterLabel}`} placeholder={`Filter by ${textInputActiveFilterLabel}`}
fieldLabel={`Find by ${activeFilterLabel}`} fieldLabel={`Find by ${textInputActiveFilterLabel}`}
aria-label={`Filter by ${activeFilterLabel}`} aria-label={`Filter by ${textInputActiveFilterLabel}`}
/> />
</ToolbarItem> </ToolbarItem>
{filters.map( {filters.map(

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

@ -154,8 +154,6 @@
--pf-v6-c-button--PaddingInlineStart: var(--mui-button--PaddingInlineStart); --pf-v6-c-button--PaddingInlineStart: var(--mui-button--PaddingInlineStart);
--pf-v6-c-button--PaddingInlineEnd: var(--mui-button--PaddingInlineEnd); --pf-v6-c-button--PaddingInlineEnd: var(--mui-button--PaddingInlineEnd);
--pf-v6-c-button--LineHeight: var(--mui-button--LineHeight); --pf-v6-c-button--LineHeight: var(--mui-button--LineHeight);
text-transform: var(--mui-text-transform);
letter-spacing: 0.02857em; letter-spacing: 0.02857em;
} }
@ -546,13 +544,11 @@
--mui-palette-primary-dark --mui-palette-primary-dark
); );
text-transform: var(--mui-text-transform);
font-weight: var(--mui-button-font-weight); font-weight: var(--mui-button-font-weight);
letter-spacing: 0.02857em; letter-spacing: 0.02857em;
} }
.mui-theme .pf-v6-c-menu-toggle__button { .mui-theme .pf-v6-c-menu-toggle__button {
text-transform: var(--mui-text-transform);
font-weight: var(--mui-button-font-weight); font-weight: var(--mui-button-font-weight);
letter-spacing: 0.02857em; letter-spacing: 0.02857em;
align-self: stretch; align-self: stretch;
@ -765,7 +761,6 @@
} }
.mui-theme .pf-v6-c-tabs__link { .mui-theme .pf-v6-c-tabs__link {
text-transform: var(--mui-text-transform);
font-weight: var(--mui-button-font-weight); font-weight: var(--mui-button-font-weight);
line-height: var(--mui-button-line-height); line-height: var(--mui-button-line-height);
letter-spacing: 0.02857em; letter-spacing: 0.02857em;