Skip to content

OSMO-5625: OSMO WCAG 2.1 compliance #21

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

Closed
patclarknvidia wants to merge 6 commits into from
Closed

OSMO-5625: OSMO WCAG 2.1 compliance #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e83947d
OSMO-5625: OSMO WCAG 2.1 compliance
patclarknvidia Nov 18, 2025
f7886ec
Fix TopMenu on 400% zoom; fix prettier
patclarknvidia Nov 18, 2025
a36110e
Polish drop-down arrow pos
patclarknvidia Nov 18, 2025
1fa15f2
Fix top menu font size
patclarknvidia Nov 18, 2025
764c370
Create Collection as Icon button... always there, but aria-disabled i…
patclarknvidia Nov 18, 2025
0fcdda7
Move Layout to top-level and move tutorials to their own route
patclarknvidia Nov 18, 2025
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
3 changes: 3 additions & 0 deletions ui/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,3 +40,6 @@ yarn-error.log*

# typescript
*.tsbuildinfo
*:Zone.Identifier
*.diff

2 changes: 1 addition & 1 deletion ui/.prettierrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"printWidth": 120,
"useTabs": false,
"bracketSpacing": true,
"jsxBracketSameLine": false,
"bracketSameLine": false,
"arrowParens": "always",
"endOfLine": "lf",
"singleAttributePerLine": true
Expand Down
183 changes: 88 additions & 95 deletions ui/src/app/datasets/[bucket]/[name]/components/CollectionDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,8 @@
//limitations under the License.

//SPDX-License-Identifier: Apache-2.0
import { useEffect, useRef, useState } from "react";

import Link from "next/link";
import { useWindowSize } from "usehooks-ts";

import { OutlinedIcon } from "~/components/Icon";
import { Colors, Tag } from "~/components/Tag";
Expand All @@ -31,105 +29,100 @@ interface DatasetDetailsProps {

export const CollectionDetails = ({ dataset }: DatasetDetailsProps) => {
const toolParamUpdater = useToolParamUpdater();
const containerRef = useRef<HTMLDivElement>(null);
const [height, setHeight] = useState(0);
const windowSize = useWindowSize();

useEffect(() => {
if (containerRef?.current) {
setHeight(windowSize.height - containerRef.current.getBoundingClientRect().top - 12);
}
}, [windowSize.height]);

return (
<div ref={containerRef}>
<div
className="h-full flex flex-col overflow-y-auto w-[33vw] max-w-150 body-component"
style={{
height: `${height}px`,
}}
<div className="h-full flex flex-col overflow-y-auto w-[33vw] max-w-150 body-component shadow-xl shadow-black/50 z-10">
<section
aria-labelledby="details-title"
className="h-full w-full flex flex-col dag-details-body"
>
<div className="h-full w-full flex flex-col dag-details-body">
<div className="text-center p-3 font-semibold brand-header">{dataset.name}</div>
<div className="h-full">
<dl className="p-3">
<dt>ID</dt>
<dd>{dataset.id}</dd>
<dt>Bucket</dt>
<dd>
<Link
key={dataset.bucket}
href={`/datasets/${dataset.bucket}`}
className="tag-container"
>
<Tag color={Colors.platform}>{dataset.bucket}</Tag>
</Link>
</dd>
{dataset.created_by && (
<>
<dt>Created By</dt>
<dd>{dataset.created_by}</dd>
</>
<h2
id="details-title"
className="text-center p-global font-semibold brand-header"
>
{dataset.name}
</h2>
<div className="h-full">
<dl
className="p-global"
aria-labelledby="details-title"
>
<dt>ID</dt>
<dd>{dataset.id}</dd>
<dt>Bucket</dt>
<dd>
<Link
key={dataset.bucket}
href={`/datasets/${dataset.bucket}`}
className="tag-container"
>
<Tag color={Colors.platform}>{dataset.bucket}</Tag>
</Link>
</dd>
{dataset.created_by && (
<>
<dt>Created By</dt>
<dd>{dataset.created_by}</dd>
</>
)}
<dt>Created Date</dt>
<dd>{convertToReadableTimezone(dataset.created_date)}</dd>
<dt>Labels</dt>
<dd>
{Object.entries(dataset.labels).length > 0 ? (
<div className="flex flex-wrap gap-1">
{Object.entries(dataset.labels).map(([key, value], index) => (
<Tag
key={index}
color={Colors.tag}
>
{key}: {String(value)}
</Tag>
))}
</div>
) : (
<p>None</p>
)}
<dt>Created Date</dt>
<dd>{convertToReadableTimezone(dataset.created_date)}</dd>
<dt>Labels</dt>
<dd>
{Object.entries(dataset.labels).length > 0 ? (
<div className="flex flex-wrap gap-1">
{Object.entries(dataset.labels).map(([key, value], index) => (
<Tag
key={index}
color={Colors.tag}
>
{key}: {String(value)}
</Tag>
))}
</div>
) : (
<p>None</p>
)}
</dd>
</dl>
</div>
<div
className={`dag-actions body-footer w-full`}
role="list"
aria-label="Collection Actions"
</dd>
</dl>
</div>
<div
className={`dag-actions body-footer w-full`}
role="list"
aria-label="Collection Actions"
>
<button
className="btn btn-action whitespace-nowrap"
role="listitem"
onClick={() => {
toolParamUpdater({ tool: ToolType.Labels });
}}
>
<OutlinedIcon name="snippet_folder" />
Edit Labels
</button>
<button
className="btn btn-action whitespace-nowrap"
role="listitem"
onClick={() => {
toolParamUpdater({ tool: ToolType.Delete });
}}
>
<OutlinedIcon name="delete" />
Delete Collection
</button>
<button
className="btn btn-action whitespace-nowrap"
role="listitem"
onClick={() => {
toolParamUpdater({ tool: ToolType.Rename });
}}
>
<button
className="btn btn-action whitespace-nowrap"
role="listitem"
onClick={() => {
toolParamUpdater({ tool: ToolType.Labels });
}}
>
<OutlinedIcon name="snippet_folder" />
Edit Labels
</button>
<button
className="btn btn-action whitespace-nowrap"
role="listitem"
onClick={() => {
toolParamUpdater({ tool: ToolType.Delete });
}}
>
<OutlinedIcon name="delete" />
Delete Collection
</button>
<button
className="btn btn-action whitespace-nowrap"
role="listitem"
onClick={() => {
toolParamUpdater({ tool: ToolType.Rename });
}}
>
<OutlinedIcon name="snippet_folder" />
Rename Collection
</button>
</div>
<OutlinedIcon name="snippet_folder" />
Rename Collection
</button>
</div>
</div>
</section>
</div>
);
};
22 changes: 9 additions & 13 deletions ui/src/app/datasets/[bucket]/[name]/components/CollectionOverview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,12 @@
//SPDX-License-Identifier: Apache-2.0
"use client";

import { useEffect, useRef, useState } from "react";
import { useEffect, useState } from "react";

import { useSearchParams } from "next/navigation";

import { DatasetTag } from "~/components/Tag";
import PageHeader from "~/components/PageHeader";
import { Colors, Tag } from "~/components/Tag";
import { type DataInfoResponse, type DatasetTypesSchema } from "~/models";

import { CollectionDetails } from "./CollectionDetails";
Expand All @@ -37,25 +38,20 @@ export default function CollectionOverview({
const searchParams = useSearchParams();
const toolParamUpdater = useToolParamUpdater();
const [tool, setTool] = useState<ToolType | undefined>(undefined);
const headerRef = useRef<HTMLDivElement>(null);

useEffect(() => {
setTool(searchParams.get(PARAM_KEYS.tool) as ToolType | undefined);
}, [searchParams, toolParamUpdater]);

return (
<>
<div
className="page-header mb-3 flex items-center text-center gap-3"
ref={headerRef}
>
<DatasetTag isCollection={dataset.type === "COLLECTION"}>{dataset.type}</DatasetTag>
<h1>
<PageHeader>
<h2 className="grow">
{dataset.bucket}/{dataset.name}
</h1>
<div className="w-25" />
</div>
<div className="grid h-full w-full gap-3 grid-cols-[1fr_auto] relative px-3">
</h2>
<Tag color={Colors.collection}>Collection</Tag>
</PageHeader>
<div className="grid h-full w-full grid-cols-[1fr_auto] relative overflow-auto">
<CollectionVersionsTable collection={dataset} />
<CollectionDetails dataset={dataset} />
</div>
Expand Down
2 changes: 1 addition & 1 deletion ui/src/app/datasets/[bucket]/[name]/components/CollectionVersionsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,7 @@ export const CollectionVersionsTable: React.FC<{
getPaginationRowModel: getPaginationRowModel(),
getSortedRowModel: getSortedRowModel(),
getFilteredRowModel: getFilteredRowModel(),
getRowId: (row) => row.version,
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
onColumnFiltersChange: setColumnFilters,
Expand All @@ -123,7 +124,6 @@ export const CollectionVersionsTable: React.FC<{
<TableBase
columns={columns}
table={table}
paddingOffset={12}
className="body-component"
>
<TablePagination
Expand Down
Loading