From 276f32ae6e951c3c290344a8ec7077573932bb5d Mon Sep 17 00:00:00 2001 From: Bob Strahan Date: Mon, 22 Jun 2026 20:17:06 +0000 Subject: [PATCH 1/2] chore(ui): remove unused split panel UI and cleanup layout --- .../document-list/DocumentListSplitPanel.tsx | 30 ---- .../documents-split-panel-config.tsx | 162 ------------------ .../genaiidp-layout/GenAIIDPLayout.tsx | 9 - .../genaiidp-layout/documents-split-panel.tsx | 16 -- src/ui/src/hooks/use-split-panel.ts | 43 ----- 5 files changed, 260 deletions(-) delete mode 100644 src/ui/src/components/document-list/DocumentListSplitPanel.tsx delete mode 100644 src/ui/src/components/document-list/documents-split-panel-config.tsx delete mode 100644 src/ui/src/components/genaiidp-layout/documents-split-panel.tsx delete mode 100644 src/ui/src/hooks/use-split-panel.ts diff --git a/src/ui/src/components/document-list/DocumentListSplitPanel.tsx b/src/ui/src/components/document-list/DocumentListSplitPanel.tsx deleted file mode 100644 index 65ee636b7..000000000 --- a/src/ui/src/components/document-list/DocumentListSplitPanel.tsx +++ /dev/null @@ -1,30 +0,0 @@ -// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. -// SPDX-License-Identifier: Apache-2.0 -import React from 'react'; -import { SplitPanel } from '@cloudscape-design/components'; - -import useDocumentsContext from '../../contexts/documents'; - -import { getPanelContent, SPLIT_PANEL_I18NSTRINGS } from './documents-split-panel-config'; -import type { MappedDocument } from './documents-table-config'; - -import '@cloudscape-design/global-styles/index.css'; - -const DocumentListSplitPanel = (): React.JSX.Element => { - const { selectedItems, setToolsOpen, getDocumentDetailsFromIds } = useDocumentsContext(); - - const { header: panelHeader, body: panelBody } = getPanelContent( - selectedItems as unknown as MappedDocument[], - 'multiple', - setToolsOpen, - getDocumentDetailsFromIds, - ); - - return ( - - {panelBody} - - ); -}; - -export default DocumentListSplitPanel; diff --git a/src/ui/src/components/document-list/documents-split-panel-config.tsx b/src/ui/src/components/document-list/documents-split-panel-config.tsx deleted file mode 100644 index cebe9c007..000000000 --- a/src/ui/src/components/document-list/documents-split-panel-config.tsx +++ /dev/null @@ -1,162 +0,0 @@ -// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. -// SPDX-License-Identifier: Apache-2.0 -import React from 'react'; -import { Table, ColumnLayout, Box, Link } from '@cloudscape-design/components'; -import type { TableProps } from '@cloudscape-design/components'; -import { SELECTION_LABELS } from './documents-table-config'; -import { DOCUMENTS_PATH } from '../../routes/constants'; - -import DocumentPanel from '../document-panel'; - -interface MappedDocument { - objectKey: string; - id?: string; - initiationTimeStamp?: string; - [key: string]: unknown; -} - -interface PanelContentParams { - items: MappedDocument[]; - setToolsOpen?: (open: boolean) => void; - getDocumentDetailsFromIds?: (ids: string[]) => Promise; -} - -interface PanelContent { - header: string; - body: React.ReactNode; -} - -export const SPLIT_PANEL_I18NSTRINGS = { - preferencesTitle: 'Split panel preferences', - preferencesPositionLabel: 'Split panel position', - preferencesPositionDescription: 'Choose the default split panel position for the service.', - preferencesPositionSide: 'Side', - preferencesPositionBottom: 'Bottom', - preferencesConfirm: 'Confirm', - preferencesCancel: 'Cancel', - closeButtonAriaLabel: 'Close panel', - openButtonAriaLabel: 'Open panel', - resizeHandleAriaLabel: 'Resize split panel', -}; - -const EMPTY_PANEL_CONTENT: PanelContent = { - header: '0 documents selected', - body: 'Select a document to see its details.', -}; - -const getPanelContentSingle = ({ items, setToolsOpen, getDocumentDetailsFromIds }: PanelContentParams): PanelContent => { - if (!items.length) { - return EMPTY_PANEL_CONTENT; - } - - const item = items[0]; - - return { - header: 'Document Details', - body: ( - - ), - }; -}; - -const getPanelContentMultiple = ({ items, setToolsOpen, getDocumentDetailsFromIds }: PanelContentParams): PanelContent => { - if (!items.length) { - return EMPTY_PANEL_CONTENT; - } - - if (items.length === 1) { - return getPanelContentSingle({ items, setToolsOpen, getDocumentDetailsFromIds }); - } - - return { - header: `${items.length} documents selected`, - body: ( - -
- - Documents - - -
- - ), - }; -}; - -// XXX to be implemented - not sure if needed -const getPanelContentComparison = ({ items, getDocumentDetailsFromIds }: PanelContentParams): PanelContent => { - if (!items.length) { - return { - header: '0 documents selected', - body: 'Select a document to see its details. Select multiple documents to compare.', - }; - } - - if (items.length === 1) { - return getPanelContentSingle({ items, getDocumentDetailsFromIds }); - } - const keyHeaderMap: Record = { - objectKey: 'Document ID', - initiationTimeStamp: 'Submission Timestramp', - }; - const transformedData = ['objectKey', 'initiationTimeStamp'].map((key) => { - const data: Record = { comparisonType: keyHeaderMap[key] }; - - items.forEach((item) => { - const itemId = item.id ?? item.objectKey; - data[itemId] = item[key]; - }); - - return data; - }); - - const columnDefinitions = [ - { - id: 'comparisonType', - header: '', - cell: ({ comparisonType }: Record) => {comparisonType as string}, - }, - ...items.map(({ id, objectKey }) => { - const columnId = id ?? objectKey; - return { - id: columnId, - header: columnId, - cell: (item: Record) => - Array.isArray(item[columnId]) ? (item[columnId] as string[]).join(', ') : String(item[columnId] ?? ''), - }; - }), - ]; - - return { - header: `${items.length} documents selected`, - body: ( - - > - ariaLabels={SELECTION_LABELS as unknown as TableProps.AriaLabels>} - header={

Compare details

} - items={transformedData} - columnDefinitions={columnDefinitions} - /> - - ), - }; -}; - -export const getPanelContent = ( - items: MappedDocument[], - type: string, - setToolsOpen: (open: boolean) => void, - getDocumentDetailsFromIds: (ids: string[]) => Promise, -): PanelContent => { - if (type === 'single') { - return getPanelContentSingle({ items, setToolsOpen, getDocumentDetailsFromIds }); - } - if (type === 'multiple') { - return getPanelContentMultiple({ items, setToolsOpen, getDocumentDetailsFromIds }); - } - return getPanelContentComparison({ items, getDocumentDetailsFromIds }); -}; diff --git a/src/ui/src/components/genaiidp-layout/GenAIIDPLayout.tsx b/src/ui/src/components/genaiidp-layout/GenAIIDPLayout.tsx index e30f6cf34..a8e3a1850 100644 --- a/src/ui/src/components/genaiidp-layout/GenAIIDPLayout.tsx +++ b/src/ui/src/components/genaiidp-layout/GenAIIDPLayout.tsx @@ -10,7 +10,6 @@ import { DocumentsContext } from '../../contexts/documents'; import { Document } from '../../types/documents'; import useNotifications from '../../hooks/use-notifications'; -import useSplitPanel from '../../hooks/use-split-panel'; import useGraphQlApi from '../../hooks/use-graphql-api'; import useAppContext from '../../contexts/app'; @@ -27,7 +26,6 @@ import { appLayoutLabels } from '../common/labels'; import Navigation from './navigation'; import Breadcrumbs from './breadcrumbs'; import ToolsPanel from './tools-panel'; -import SplitPanel from './documents-split-panel'; import ConfigurationLayout from '../configuration-layout'; import PricingLayout from '../pricing-layout'; import CapacityPlanningLayout from '../capacity-planning/CapacityPlanningLayout'; @@ -90,8 +88,6 @@ const GenAIIDPLayout = ({ children, tools }: GenAIIDPLayoutProps): React.JSX.Ele abortWorkflows, } = useGraphQlApi({ initialPeriodsToLoad }); - const { splitPanelOpen, onSplitPanelToggle, splitPanelSize, onSplitPanelResize } = useSplitPanel(selectedItems); - const documentsContextValue = { documents, getDocumentDetailsFromIds, @@ -123,11 +119,6 @@ const GenAIIDPLayout = ({ children, tools }: GenAIIDPLayoutProps): React.JSX.Ele tools={tools ?? } toolsOpen={toolsOpen} onToolsChange={({ detail }) => setToolsOpen(detail.open)} - splitPanelOpen={splitPanelOpen} - onSplitPanelToggle={onSplitPanelToggle} - splitPanelSize={splitPanelSize} - onSplitPanelResize={onSplitPanelResize} - splitPanel={} content={ children || ( diff --git a/src/ui/src/components/genaiidp-layout/documents-split-panel.tsx b/src/ui/src/components/genaiidp-layout/documents-split-panel.tsx deleted file mode 100644 index 282c94750..000000000 --- a/src/ui/src/components/genaiidp-layout/documents-split-panel.tsx +++ /dev/null @@ -1,16 +0,0 @@ -// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. -// SPDX-License-Identifier: Apache-2.0 -import React from 'react'; -import { Route, Routes } from 'react-router-dom'; - -import DocumentListSplitPanel from '../document-list/DocumentListSplitPanel'; - -const CallsSplitPanel = (): React.JSX.Element => { - return ( - - } /> - - ); -}; - -export default CallsSplitPanel; diff --git a/src/ui/src/hooks/use-split-panel.ts b/src/ui/src/hooks/use-split-panel.ts deleted file mode 100644 index a46774c2f..000000000 --- a/src/ui/src/hooks/use-split-panel.ts +++ /dev/null @@ -1,43 +0,0 @@ -// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. -// SPDX-License-Identifier: Apache-2.0 -import { useEffect, useState } from 'react'; - -interface SplitPanelReturn { - splitPanelOpen: boolean; - onSplitPanelToggle: (event: { detail: { open: boolean } }) => void; - splitPanelSize: number; - onSplitPanelResize: (event: { detail: { size: number } }) => void; -} - -const useSplitPanel = (selectedItems: unknown[]): SplitPanelReturn => { - const [splitPanelSize, setSplitPanelSize] = useState(300); - const [splitPanelOpen, setSplitPanelOpen] = useState(false); - const [hasManuallyClosedOnce, setHasManuallyClosedOnce] = useState(false); - - const onSplitPanelResize = ({ detail: { size } }: { detail: { size: number } }) => { - setSplitPanelSize(size); - }; - - const onSplitPanelToggle = ({ detail: { open } }: { detail: { open: boolean } }) => { - setSplitPanelOpen(open); - - if (!open) { - setHasManuallyClosedOnce(true); - } - }; - - useEffect(() => { - if (selectedItems.length && !hasManuallyClosedOnce) { - setSplitPanelOpen(true); - } - }, [selectedItems.length, hasManuallyClosedOnce]); - - return { - splitPanelOpen, - onSplitPanelToggle, - splitPanelSize, - onSplitPanelResize, - }; -}; - -export default useSplitPanel; From 50cacafc0e271540a6b36fb8f23cee17b308f8dc Mon Sep 17 00:00:00 2001 From: Bob Strahan Date: Mon, 22 Jun 2026 20:27:28 +0000 Subject: [PATCH 2/2] feat(ui): remove global split panel and update LambdaArchitecture parameter --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4fcb3aee0..86a9e1b52 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,10 @@ SPDX-License-Identifier: MIT-0 - **Configurable Lambda architecture** — New `LambdaArchitecture` parameter (`arm64` or `x86_64`) for all unified pattern Lambda container images. Defaults to `arm64` (Graviton) for best price-performance. Use `x86_64` when deploying with custom base images that only support AMD64. The parameter flows through to CodeBuild (`--platform` flag) and Dockerfile (`FROM` image suffix). +### Removed + +- **Global split panel ("documents selected")** — Removed the persistent bottom split panel from the global Web UI layout and deleted the related split-panel components and `use-split-panel` hook. The split-panel was noisy on non-document-list pages and only provided full details for single-document selection; reintroduce as an opt-in, per-page component if needed (recommendation: enable only on `DocumentList`). + ## [0.5.15] ### Added