-
Notifications
You must be signed in to change notification settings - Fork 604
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: [alpha] Providers grid refactor (#1345)
Co-authored-by: Yingjie He <[email protected]>
- Loading branch information
1 parent
d786eca
commit c0c9fcc
Showing
45 changed files
with
1,445 additions
and
21 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
78 changes: 78 additions & 0 deletions
78
ui/desktop/src/components/settings/providers/providers/NewProviderSettingsPage.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| import React from 'react'; | ||
| import { ScrollArea } from '../../../ui/scroll-area'; | ||
| import BackButton from '../../../ui/BackButton'; | ||
| import ProviderGrid from './ProviderGrid'; | ||
| import ProviderState from './interfaces/ProviderState'; | ||
|
|
||
| const fakeProviderState: ProviderState[] = [ | ||
| { | ||
| id: 'openai', | ||
| name: 'OpenAI', | ||
| isConfigured: true, | ||
| metadata: null, | ||
| }, | ||
| { | ||
| id: 'anthropic', | ||
| name: 'Anthropic', | ||
| isConfigured: false, | ||
| metadata: null, | ||
| }, | ||
| { | ||
| id: 'groq', | ||
| name: 'Groq', | ||
| isConfigured: false, | ||
| metadata: null, | ||
| }, | ||
| { | ||
| id: 'google', | ||
| name: 'Google', | ||
| isConfigured: false, | ||
| metadata: null, | ||
| }, | ||
| { | ||
| id: 'openrouter', | ||
| name: 'OpenRouter', | ||
| isConfigured: false, | ||
| metadata: null, | ||
| }, | ||
| { | ||
| id: 'databricks', | ||
| name: 'Databricks', | ||
| isConfigured: false, | ||
| metadata: null, | ||
| }, | ||
| { | ||
| id: 'ollama', | ||
| name: 'Ollama', | ||
| isConfigured: false, | ||
| metadata: { location: null }, | ||
| }, | ||
| ]; | ||
|
|
||
| export default function ProviderSettings({ onClose }: { onClose: () => void }) { | ||
| return ( | ||
| <div className="h-screen w-full"> | ||
| <div className="relative flex items-center h-[36px] w-full bg-bgSubtle"></div> | ||
|
|
||
| <ScrollArea className="h-full w-full"> | ||
| <div className="px-8 pt-6 pb-4"> | ||
| <BackButton onClick={onClose} /> | ||
| <h1 className="text-3xl font-medium text-textStandard mt-1">Configure</h1> | ||
| </div> | ||
|
|
||
| <div className=" py-8 pt-[20px]"> | ||
| <div className="flex justify-between items-center mb-6 border-b border-borderSubtle px-8"> | ||
| <h2 className="text-xl font-medium text-textStandard">Providers</h2> | ||
| </div> | ||
|
|
||
| {/* Content Area */} | ||
| <div className="max-w-5xl pt-4 px-8"> | ||
| <div className="relative z-10"> | ||
| <ProviderGrid providers={fakeProviderState} /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </ScrollArea> | ||
| </div> | ||
| ); | ||
| } |
47 changes: 47 additions & 0 deletions
47
ui/desktop/src/components/settings/providers/providers/ProviderGrid.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| import React from 'react'; | ||
| import { ProviderCard } from './subcomponents/ProviderCard'; | ||
| import ProviderState from './interfaces/ProviderState'; | ||
| import OnShowModal from './callbacks/ShowModal'; | ||
| import OnAdd from './callbacks/AddProviderParameters'; | ||
| import OnDelete from './callbacks/DeleteProviderParameters'; | ||
| import OnShowSettings from './callbacks/UpdateProviderParameters'; | ||
| import OnRefresh from './callbacks/RefreshActiveProviders'; | ||
| import DefaultProviderActions from './subcomponents/actions/DefaultProviderActions'; | ||
|
|
||
| function GridLayout({ children }: { children: React.ReactNode }) { | ||
| return ( | ||
| <div className="grid grid-cols-3 sm:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 gap-3 auto-rows-fr max-w-full [&_*]:z-20"> | ||
| {children} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| function ProviderCards({ providers }: { providers: ProviderState[] }) { | ||
| const providerCallbacks = { | ||
| onShowModal: OnShowModal, | ||
| onAdd: OnAdd, | ||
| onDelete: OnDelete, | ||
| onShowSettings: OnShowSettings, | ||
| onRefresh: OnRefresh, | ||
| }; | ||
| return ( | ||
| <> | ||
| {providers.map((provider) => ( | ||
| <ProviderCard | ||
| key={provider.name} // helps React efficiently update and track components when rendering lists | ||
| provider={provider} | ||
| providerCallbacks={providerCallbacks} | ||
| /> | ||
| ))} | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export default function ProviderGrid({ providers }: { providers: ProviderState[] }) { | ||
| console.log('got these providers', providers); | ||
| return ( | ||
| <GridLayout> | ||
| <ProviderCards providers={providers} /> | ||
| </GridLayout> | ||
| ); | ||
| } |
Oops, something went wrong.