From c562bd53a56996003c927ee831907e7bfbb9c064 Mon Sep 17 00:00:00 2001 From: el_jijuna Date: Sun, 9 Nov 2025 14:53:47 -0500 Subject: [PATCH 1/3] feat: update owners selector to use an owner manager and show list of owner stored. --- .../ApplicationsList/ApplicationsList.tsx | 6 +- src/components/OwnerManager/OwnerManager.tsx | 58 +++++++++++ .../OwnerSelector/OwnerSelector.tsx | 62 +++++++----- src/components/SideBarMenu/SideBarMenu.tsx | 13 ++- src/domain/owner/owner.ts | 33 ++++++- src/domain/owner/types.ts | 21 ++++ src/hooks/useSelectedOwner.ts | 10 ++ src/proxy-queries/useOwner.tsx | 17 ++++ src/proxy/owner/owner.ts | 29 ++++++ src/routeTree.gen.ts | 22 ++--- src/routes/index.tsx | 99 +++++++++++++++++-- src/stores/owners.store.ts | 34 +++++++ 12 files changed, 354 insertions(+), 50 deletions(-) create mode 100644 src/components/OwnerManager/OwnerManager.tsx create mode 100644 src/domain/owner/types.ts create mode 100644 src/hooks/useSelectedOwner.ts create mode 100644 src/proxy-queries/useOwner.tsx create mode 100644 src/proxy/owner/owner.ts create mode 100644 src/stores/owners.store.ts diff --git a/src/components/ApplicationsList/ApplicationsList.tsx b/src/components/ApplicationsList/ApplicationsList.tsx index 06398ad..2b3cc0e 100644 --- a/src/components/ApplicationsList/ApplicationsList.tsx +++ b/src/components/ApplicationsList/ApplicationsList.tsx @@ -5,7 +5,7 @@ import { Link } from '@tanstack/react-router'; import { useRepositories } from '../../proxy-queries/useRepositories'; import { LanguageIcon } from '../LanguageIcon/LanguageIcon'; import { CardContainer } from '../CardContainer/CardContainer'; -import { useOwner } from '../../domain/owner/owner.store'; +import { useOwnersStore } from '../../stores/owners.store'; const IconText = ({ icon, text }: { icon: React.FC; text: string }) => ( @@ -19,8 +19,8 @@ export interface ApplicationsListProps extends PropsWithChildren { } export const ApplicationsList: FC = ({ children, filter }: ApplicationsListProps): ReactElement => { - const { owner } = useOwner(); - const { data: applications, isPending } = useRepositories({ user: owner?.username ?? '', filter }); + const { selectedOwner } = useOwnersStore(); + const { data: applications, isPending } = useRepositories({ user: selectedOwner ?? '', filter }); if (isPending) { return
Loading...
; diff --git a/src/components/OwnerManager/OwnerManager.tsx b/src/components/OwnerManager/OwnerManager.tsx new file mode 100644 index 0000000..f1072eb --- /dev/null +++ b/src/components/OwnerManager/OwnerManager.tsx @@ -0,0 +1,58 @@ +import { type FC } from 'react'; +import { Button, Form, Input, Modal } from 'antd'; +import { useOwnersStore } from '../../stores/owners.store'; + +interface AddOwnerFormData { + username: string; +} + +export interface OwnerManagerProps { + open: boolean; + onClose: () => void; +} + +export const OwnerManager: FC = ({ open, onClose }) => { + const { owners, setOwners } = useOwnersStore(); + const [form] = Form.useForm(); + + const handleSubmit = (values: AddOwnerFormData) => { + const newOwners = [...owners]; + if (!newOwners.includes(values.username)) { + newOwners.push(values.username); + setOwners(newOwners); + } + form.resetFields(); + onClose(); + }; + + return ( + +
+ + + + + + +
+
+ ); +}; diff --git a/src/components/OwnerSelector/OwnerSelector.tsx b/src/components/OwnerSelector/OwnerSelector.tsx index fb84f4a..0740e0f 100644 --- a/src/components/OwnerSelector/OwnerSelector.tsx +++ b/src/components/OwnerSelector/OwnerSelector.tsx @@ -1,32 +1,46 @@ -import { Select } from 'antd'; -import { useOwner } from '../../domain/owner/owner.store'; -import type { FC, ReactElement } from 'react'; +import { Select, Space, Button } from 'antd'; +import { PlusOutlined } from '@ant-design/icons'; +import { useState, type FC, type ReactElement } from 'react'; +import { useOwnersStore } from '../../stores/owners.store'; +import { OwnerManager } from '../OwnerManager/OwnerManager'; export const OwnerSelector: FC = (): ReactElement => { - const { owner, setOwner } = useOwner(); + const { owners, selectedOwner, setSelectedOwner } = useOwnersStore(); + const [isManagerOpen, setIsManagerOpen] = useState(false); const handleChange = (username: string) => { - setOwner({ - username, - repositories: { - monitoringTool: 'MonitoringTool', - database: 'MonitoringTool-DB' - } - }); + setSelectedOwner(username); }; return ( - ({ + value: owner, + label: owner, + }))} + listHeight={256} + maxTagCount={1} + placement="bottomLeft" + popupMatchSelectWidth={false} + dropdownStyle={{ + minWidth: '200px', + maxWidth: '300px' + }} + /> + + + + + ); +}; diff --git a/src/components/OwnerSelector/OwnerSelector.tsx b/src/components/OwnerSelector/OwnerSelector.tsx index fb84f4a..0740e0f 100644 --- a/src/components/OwnerSelector/OwnerSelector.tsx +++ b/src/components/OwnerSelector/OwnerSelector.tsx @@ -1,32 +1,46 @@ -import { Select } from 'antd'; -import { useOwner } from '../../domain/owner/owner.store'; -import type { FC, ReactElement } from 'react'; +import { Select, Space, Button } from 'antd'; +import { PlusOutlined } from '@ant-design/icons'; +import { useState, type FC, type ReactElement } from 'react'; +import { useOwnersStore } from '../../stores/owners.store'; +import { OwnerManager } from '../OwnerManager/OwnerManager'; export const OwnerSelector: FC = (): ReactElement => { - const { owner, setOwner } = useOwner(); + const { owners, selectedOwner, setSelectedOwner } = useOwnersStore(); + const [isManagerOpen, setIsManagerOpen] = useState(false); const handleChange = (username: string) => { - setOwner({ - username, - repositories: { - monitoringTool: 'MonitoringTool', - database: 'MonitoringTool-DB' - } - }); + setSelectedOwner(username); }; return ( - ({ + value: owner, + label: owner, + }))} + listHeight={256} + maxTagCount={1} + placement="bottomLeft" + popupMatchSelectWidth={false} + dropdownStyle={{ + minWidth: '200px', + maxWidth: '300px' + }} + /> +