From c0f39aeb51dc5abad6381706eaa0ac69a54979f2 Mon Sep 17 00:00:00 2001
From: Dan Rukas <dan.rukas@gmail.com>
Date: Wed, 10 Dec 2025 16:38:25 -0500
Subject: [PATCH] fix(DataSource): migrate configuration dialog to ui-next
 components (#5626)

* Fix to show data source on study list

* Update Button in Dialog select rows

* Updated legacy colors, small design updates

* Update dialog sizing
---
 .../DataSourceConfigurationComponent.tsx      |  7 ++--
 .../src/Components/ItemListComponent.tsx      | 35 +++++++++++--------
 2 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/extensions/default/src/Components/DataSourceConfigurationComponent.tsx b/extensions/default/src/Components/DataSourceConfigurationComponent.tsx
index dac608c78..b6a4cf556 100644
--- a/extensions/default/src/Components/DataSourceConfigurationComponent.tsx
+++ b/extensions/default/src/Components/DataSourceConfigurationComponent.tsx
@@ -28,9 +28,9 @@ function DataSourceConfigurationComponent({
         return;
       }
 
-      const { factory: configurationAPIFactory } = customizationService.getCustomization(
-        activeDataSourceDef.configuration.configurationAPI
-      ) ?? { factory: () => null };
+      const configurationAPIFactory =
+        customizationService.getCustomization(activeDataSourceDef.configuration.configurationAPI) ??
+        (() => null);
 
       if (!configurationAPIFactory) {
         return;
@@ -66,6 +66,7 @@ function DataSourceConfigurationComponent({
     show({
       content: DataSourceConfigurationModalComponent,
       title: t('Configure Data Source'),
+      containerClassName: 'max-w-3xl',
       contentProps: {
         configurationAPI,
         configuredItems,
diff --git a/extensions/default/src/Components/ItemListComponent.tsx b/extensions/default/src/Components/ItemListComponent.tsx
index 796ad7659..12d7011df 100644
--- a/extensions/default/src/Components/ItemListComponent.tsx
+++ b/extensions/default/src/Components/ItemListComponent.tsx
@@ -2,8 +2,7 @@ import classNames from 'classnames';
 import React, { ReactElement, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSystem } from '@ohif/core';
-import { Button, InputFilterText } from '@ohif/ui';
-import { Icons } from '@ohif/ui-next';
+import { Button, Icons, InputFilter } from '@ohif/ui-next';
 import { Types } from '@ohif/core';
 
 type ItemListComponentProps = {
@@ -32,25 +31,30 @@ function ItemListComponent({
   return (
     <div className="flex min-h-[1px] grow flex-col gap-4">
       <div className="flex items-center justify-between">
-        <div className="text-primary-light text-[20px]">{t(`Select ${itemLabel}`)}</div>
-        <InputFilterText
+        <div className="text-highlight text-xl">{t(`Select ${itemLabel}`)}</div>
+        <InputFilter
           className="max-w-[40%] grow"
-          value={filterValue}
-          onDebounceChange={setFilterValue}
-          placeholder={t(`Search ${itemLabel} list`)}
-        ></InputFilterText>
+          onChange={setFilterValue}
+        >
+          <InputFilter.SearchIcon />
+          <InputFilter.Input
+            placeholder={t(`Search ${itemLabel} list`)}
+            className="pl-8 pr-9"
+          />
+          <InputFilter.ClearButton className="text-primary mr-0.5 p-0.5" />
+        </InputFilter>
       </div>
       <div className="relative flex min-h-[1px] grow flex-col bg-black text-[14px]">
         {itemList == null ? (
           <LoadingIndicatorProgress className={'h-full w-full'} />
         ) : itemList.length === 0 ? (
-          <div className="text-primary-light flex h-full flex-col items-center justify-center px-6 py-4">
+          <div className="text-highlight flex h-full flex-col items-center justify-center px-6 py-4">
             <Icons.ToolMagnify className="mb-4" />
             <span>{t(`No ${itemLabel} available`)}</span>
           </div>
         ) : (
           <>
-            <div className="bg-secondary-dark px-3 py-1.5 text-white">{t(itemLabel)}</div>
+            <div className="bg-popover text-foreground px-3 py-1.5">{t(itemLabel)}</div>
             <div className="ohif-scrollbar overflow-auto">
               {itemList
                 .filter(
@@ -58,23 +62,24 @@ function ItemListComponent({
                     !filterValue || item.name.toLowerCase().includes(filterValue.toLowerCase())
                 )
                 .map(item => {
-                  const border =
-                    'rounded border-transparent border-b-secondary-light border-[1px] hover:border-primary-light';
+                  const border = 'rounded border-transparent border-b-input border-[1px]';
                   return (
                     <div
                       className={classNames(
-                        'hover:text-primary-light hover:bg-primary-dark group mx-2 flex items-center justify-between px-6 py-2',
+                        'hover:text-highlight hover:bg-muted group mx-2 flex items-center justify-between px-6 py-2',
                         border
                       )}
                       key={item.id}
                     >
-                      <div>{item.name}</div>
+                      <div className="text-muted-foreground">{item.name}</div>
                       <Button
                         onClick={() => onItemClicked(item)}
                         className="invisible group-hover:visible"
-                        endIcon={<Icons.ByName name="arrow-left" />}
+                        variant="default"
+                        size="sm"
                       >
                         {t('Select')}
+                        <Icons.ChevronRight className="ml-2 h-3 w-3" />
                       </Button>
                     </div>
                   );