From df33eccb32cb2d1381c1beed925878d1d366bc9f Mon Sep 17 00:00:00 2001 From: Hubert Date: Mon, 6 Oct 2025 10:04:14 +0200 Subject: [PATCH 1/4] adding sorting + indention for providers under crossplane --- .../ComponentsSelection.module.css | 29 ++++++++++++++++++ .../ComponentsSelection.tsx | 30 +++++++++++++++++-- 2 files changed, 56 insertions(+), 3 deletions(-) diff --git a/src/components/ComponentsSelection/ComponentsSelection.module.css b/src/components/ComponentsSelection/ComponentsSelection.module.css index f8b7ecbf..3e39dc3f 100644 --- a/src/components/ComponentsSelection/ComponentsSelection.module.css +++ b/src/components/ComponentsSelection/ComponentsSelection.module.css @@ -3,3 +3,32 @@ background: var(--sapBackgroundColor); border-bottom: 1px solid var(--sapList_BorderColor); } + +.row:hover { + background: var(--sapList_Hover_Background); +} + +.row.providerRow { + position: relative; + padding-inline-start: calc(1rem + 16px); + background: color-mix(in srgb, var(--sapBackgroundColor) 98%, #000 2%); +} + +.row.providerRow:hover { + background: var(--sapList_Hover_Background); +} + +.row.providerRow::before { + content: ""; + position: absolute; + inset-block: 6px; + inset-inline-start: 1.6rem; + width: 2px; + background: var(--sapList_BorderColor); + border-radius: 2px; +} + +.providerRow .checkBox { + font-size: 0.875rem; + opacity: 0.85; +} diff --git a/src/components/ComponentsSelection/ComponentsSelection.tsx b/src/components/ComponentsSelection/ComponentsSelection.tsx index fbe4ca3f..532538c5 100644 --- a/src/components/ComponentsSelection/ComponentsSelection.tsx +++ b/src/components/ComponentsSelection/ComponentsSelection.tsx @@ -40,10 +40,31 @@ export const ComponentsSelection: React.FC = ({ const selectedComponents = useMemo(() => getSelectedComponents(componentsList), [componentsList]); + const isProvider = useCallback((componentName: string) => { + return componentName.includes('provider') && componentName !== 'crossplane'; + }, []); + const searchResults = useMemo(() => { const lowerSearch = searchTerm.toLowerCase(); - return componentsList.filter(({ name }) => name.toLowerCase().includes(lowerSearch)); - }, [componentsList, searchTerm]); + const filtered = componentsList.filter(({ name }) => name.toLowerCase().includes(lowerSearch)); + + // Sort components: crossplane first, then providers, then rest + return filtered.sort((a, b) => { + const isCrossplaneA = a.name === 'crossplane'; + const isCrossplaneB = b.name === 'crossplane'; + + if (isCrossplaneA && !isCrossplaneB) return -1; + if (isCrossplaneB && !isCrossplaneA) return 1; + + const isProviderA = isProvider(a.name); + const isProviderB = isProvider(b.name); + + if (isProviderA && !isProviderB) return -1; + if (isProviderB && !isProviderA) return 1; + + return a.name.localeCompare(b.name); + }); + }, [componentsList, searchTerm, isProvider]); const handleSelectionChange = useCallback( (e: Ui5CustomEvent) => { @@ -105,10 +126,12 @@ export const ComponentsSelection: React.FC = ({ {searchResults.length > 0 ? ( searchResults.map((component) => { const providerDisabled = isProviderDisabled(component); + const isProviderComponent = isProvider(component.name); + return ( = ({ checked={component.isSelected} disabled={providerDisabled} aria-label={component.name} + className={isProviderComponent ? styles.checkBox : ''} onChange={handleSelectionChange} /> From d86d8bb4dff8b52ae874c96dbe31c62009d15428 Mon Sep 17 00:00:00 2001 From: Hubert Date: Mon, 6 Oct 2025 10:16:44 +0200 Subject: [PATCH 2/4] adding dark theme support + lint --- .../ComponentsSelection/ComponentsSelection.module.css | 8 +++++++- .../ComponentsSelection/ComponentsSelection.tsx | 2 +- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/ComponentsSelection/ComponentsSelection.module.css b/src/components/ComponentsSelection/ComponentsSelection.module.css index 3e39dc3f..b7187633 100644 --- a/src/components/ComponentsSelection/ComponentsSelection.module.css +++ b/src/components/ComponentsSelection/ComponentsSelection.module.css @@ -14,6 +14,12 @@ background: color-mix(in srgb, var(--sapBackgroundColor) 98%, #000 2%); } +@media (prefers-color-scheme: dark) { + .row.providerRow { + background: color-mix(in srgb, var(--sapBackgroundColor) 97%, #fff 3%); + } +} + .row.providerRow:hover { background: var(--sapList_Hover_Background); } @@ -31,4 +37,4 @@ .providerRow .checkBox { font-size: 0.875rem; opacity: 0.85; -} +} \ No newline at end of file diff --git a/src/components/ComponentsSelection/ComponentsSelection.tsx b/src/components/ComponentsSelection/ComponentsSelection.tsx index 532538c5..fc31c988 100644 --- a/src/components/ComponentsSelection/ComponentsSelection.tsx +++ b/src/components/ComponentsSelection/ComponentsSelection.tsx @@ -52,7 +52,7 @@ export const ComponentsSelection: React.FC = ({ return filtered.sort((a, b) => { const isCrossplaneA = a.name === 'crossplane'; const isCrossplaneB = b.name === 'crossplane'; - + if (isCrossplaneA && !isCrossplaneB) return -1; if (isCrossplaneB && !isCrossplaneA) return 1; From 7db89397e1a3e8359946ff1b55ee2e5db0981cf1 Mon Sep 17 00:00:00 2001 From: Hubert Date: Mon, 6 Oct 2025 10:23:14 +0200 Subject: [PATCH 3/4] making provider row a bit smaller --- .../ComponentsSelection/ComponentsSelection.module.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/ComponentsSelection/ComponentsSelection.module.css b/src/components/ComponentsSelection/ComponentsSelection.module.css index b7187633..2b2bdd77 100644 --- a/src/components/ComponentsSelection/ComponentsSelection.module.css +++ b/src/components/ComponentsSelection/ComponentsSelection.module.css @@ -34,7 +34,7 @@ border-radius: 2px; } -.providerRow .checkBox { - font-size: 0.875rem; - opacity: 0.85; +.providerRow :global(ui5-checkbox) { + transform: scale(0.9); + transform-origin: left center; } \ No newline at end of file From 3167d1d0465d9090021c5c8f91205ffafa2b7e54 Mon Sep 17 00:00:00 2001 From: Hubert Date: Mon, 6 Oct 2025 11:04:26 +0200 Subject: [PATCH 4/4] removing border-radius (no effect) --- .../ComponentsSelection/ComponentsSelection.module.css | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/ComponentsSelection/ComponentsSelection.module.css b/src/components/ComponentsSelection/ComponentsSelection.module.css index 2b2bdd77..e45e641b 100644 --- a/src/components/ComponentsSelection/ComponentsSelection.module.css +++ b/src/components/ComponentsSelection/ComponentsSelection.module.css @@ -31,7 +31,6 @@ inset-inline-start: 1.6rem; width: 2px; background: var(--sapList_BorderColor); - border-radius: 2px; } .providerRow :global(ui5-checkbox) {