diff --git a/packages/console/src/assets/icons/organization.svg b/packages/console/src/assets/icons/organization.svg new file mode 100644 index 000000000..c75ffea91 --- /dev/null +++ b/packages/console/src/assets/icons/organization.svg @@ -0,0 +1,7 @@ + + + + diff --git a/packages/console/src/components/DeleteButton/index.tsx b/packages/console/src/components/DeleteButton/index.tsx new file mode 100644 index 000000000..3482dae97 --- /dev/null +++ b/packages/console/src/components/DeleteButton/index.tsx @@ -0,0 +1,60 @@ +import { useCallback, useState, type ReactNode } from 'react'; +import { useTranslation } from 'react-i18next'; + +import Delete from '@/assets/icons/delete.svg'; +import ConfirmModal from '@/ds-components/ConfirmModal'; +import IconButton from '@/ds-components/IconButton'; +import { Tooltip } from '@/ds-components/Tip'; + +type Props = { + /** A function that will be called when the user confirms the deletion. */ + onDelete: () => void | Promise; + /** The text or content to display in the confirmation modal. */ + content: ReactNode; +}; + +/** + * A button that displays a trash can icon, with a tooltip that says localized + * "Delete". Clicking the button will pop up a confirmation modal. + */ +function DeleteButton({ onDelete, content }: Props) { + const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); + const [isModalOpen, setIsModalOpen] = useState(false); + const [isDeleting, setIsDeleting] = useState(false); + + const handleDelete = useCallback(async () => { + setIsDeleting(true); + try { + await onDelete(); + } finally { + setIsDeleting(false); + setIsModalOpen(false); + } + }, [onDelete]); + + return ( + <> + {t('general.delete')}}> + { + setIsModalOpen(true); + }} + > + + + + { + setIsModalOpen(false); + }} + onConfirm={handleDelete} + > + {content} + + + ); +} +export default DeleteButton; diff --git a/packages/console/src/components/PermissionsTable/index.module.scss b/packages/console/src/components/PermissionsTable/index.module.scss index 869727458..8aac7b8e5 100644 --- a/packages/console/src/components/PermissionsTable/index.module.scss +++ b/packages/console/src/components/PermissionsTable/index.module.scss @@ -20,13 +20,7 @@ } .name { - display: inline-block; - max-width: 100%; - vertical-align: bottom; - padding: _.unit(1) _.unit(2); - border-radius: 6px; - background: var(--color-neutral-95); - @include _.text-ellipsis; + @include _.tag; } .description { diff --git a/packages/console/src/containers/ConsoleContent/Sidebar/hook.tsx b/packages/console/src/containers/ConsoleContent/Sidebar/hook.tsx index f0be4283c..6f51f7f17 100644 --- a/packages/console/src/containers/ConsoleContent/Sidebar/hook.tsx +++ b/packages/console/src/containers/ConsoleContent/Sidebar/hook.tsx @@ -9,6 +9,7 @@ import Connection from '@/assets/icons/connection.svg'; import Gear from '@/assets/icons/gear.svg'; import Hook from '@/assets/icons/hook.svg'; import List from '@/assets/icons/list.svg'; +import Organization from '@/assets/icons/organization.svg'; import UserProfile from '@/assets/icons/profile.svg'; import ResourceIcon from '@/assets/icons/resource.svg'; import Role from '@/assets/icons/role.svg'; @@ -93,6 +94,11 @@ export const useSidebarMenuItems = (): { { title: 'users', items: [ + { + Icon: Organization, + title: 'organizations', + isHidden: !isDevFeaturesEnabled, + }, { Icon: UserProfile, title: 'users', diff --git a/packages/console/src/containers/ConsoleContent/index.tsx b/packages/console/src/containers/ConsoleContent/index.tsx index bd64d5672..92675edce 100644 --- a/packages/console/src/containers/ConsoleContent/index.tsx +++ b/packages/console/src/containers/ConsoleContent/index.tsx @@ -26,6 +26,7 @@ import Dashboard from '@/pages/Dashboard'; import GetStarted from '@/pages/GetStarted'; import Mfa from '@/pages/Mfa'; import NotFound from '@/pages/NotFound'; +import Organizations from '@/pages/Organizations'; import Profile from '@/pages/Profile'; import ChangePasswordModal from '@/pages/Profile/containers/ChangePasswordModal'; import LinkEmailModal from '@/pages/Profile/containers/LinkEmailModal'; @@ -149,6 +150,12 @@ function ConsoleContent() { } /> + {isDevFeaturesEnabled && ( + + } /> + } /> + + )} } /> } /> diff --git a/packages/console/src/ds-components/Dropdown/DropdownItem.tsx b/packages/console/src/ds-components/Dropdown/DropdownItem.tsx index c1a6ed162..f5b5a5a5d 100644 --- a/packages/console/src/ds-components/Dropdown/DropdownItem.tsx +++ b/packages/console/src/ds-components/Dropdown/DropdownItem.tsx @@ -27,6 +27,9 @@ function DropdownItem({ className={classNames(styles.item, styles[type], className)} role="menuitem" tabIndex={0} + onMouseDown={(event) => { + event.preventDefault(); + }} onKeyDown={onKeyDownHandler(onClick)} onClick={onClick} > diff --git a/packages/console/src/ds-components/Dropdown/index.tsx b/packages/console/src/ds-components/Dropdown/index.tsx index dcb6ea828..74b7bcbd1 100644 --- a/packages/console/src/ds-components/Dropdown/index.tsx +++ b/packages/console/src/ds-components/Dropdown/index.tsx @@ -30,6 +30,8 @@ type Props = { titleClassName?: string; horizontalAlign?: HorizontalAlignment; hasOverflowContent?: boolean; + /** Set to `true` to directly render the dropdown without the overlay. */ + noOverlay?: true; }; function Div({ @@ -50,6 +52,7 @@ function Dropdown({ titleClassName, horizontalAlign = 'end', hasOverflowContent, + noOverlay, }: Props) { const overlayRef = useRef(null); @@ -64,11 +67,15 @@ function Dropdown({ const WrapperComponent = hasOverflowContent ? Div : OverlayScrollbar; return ( + // Using `ReactModal` will cause accessibility issues for multi-select since the dropdown is + // not a child or sibling of the input element. Thus the tab order will be broken. Consider + // using something else instead. contentElement)} onRequestClose={(event) => { /** * Note: diff --git a/packages/console/src/ds-components/Select/index.module.scss b/packages/console/src/ds-components/Select/index.module.scss index 306e67b00..0aa4f608c 100644 --- a/packages/console/src/ds-components/Select/index.module.scss +++ b/packages/console/src/ds-components/Select/index.module.scss @@ -16,6 +16,40 @@ cursor: pointer; position: relative; + &.multiple { + justify-content: flex-start; + flex-wrap: wrap; + gap: _.unit(2); + padding: _.unit(2) _.unit(3); + cursor: text; + + .tag { + cursor: auto; + display: flex; + align-items: center; + gap: _.unit(1); + } + + .close { + width: 16px; + height: 16px; + } + + .delete { + width: 20px; + height: 20px; + margin-right: _.unit(-0.5); + } + + input { + color: var(--color-text); + font: var(--font-body-2); + background: transparent; + flex-grow: 1; + padding: _.unit(0.5); + } + } + .title { @include _.text-ellipsis; } @@ -84,3 +118,9 @@ padding: _.unit(1); max-height: 288px; } + +.noResult { + color: var(--color-placeholder); + font: var(--font-body-2); + padding: _.unit(2); +} diff --git a/packages/console/src/ds-components/TabNav/TabNavItem.tsx b/packages/console/src/ds-components/TabNav/TabNavItem.tsx index 995e8d7f0..d3c3ab19b 100644 --- a/packages/console/src/ds-components/TabNav/TabNavItem.tsx +++ b/packages/console/src/ds-components/TabNav/TabNavItem.tsx @@ -34,7 +34,9 @@ function TabNavItem({ }: Props) { const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); const { match, getTo } = useMatchTenantPath(); - const selected = href ? match(href) : isActive; + // `isActive` is used to override the default behavior of `match` when the + // tab is not a link or the link is a relative path. + const selected = isActive ?? (href ? match(href) : false); return (
diff --git a/packages/console/src/ds-components/Table/index.module.scss b/packages/console/src/ds-components/Table/index.module.scss index fc8f3f123..0cd576d91 100644 --- a/packages/console/src/ds-components/Table/index.module.scss +++ b/packages/console/src/ds-components/Table/index.module.scss @@ -34,7 +34,6 @@ .headerTable { background-color: var(--color-layer-1); border-radius: 12px 12px 0 0; - padding: 0 _.unit(3); thead { tr { @@ -55,7 +54,6 @@ .bodyTable { overflow-y: auto; - padding: 0 _.unit(3) _.unit(3); background-color: var(--color-layer-1); border-radius: 0 0 12px 12px; @@ -165,6 +163,12 @@ } } +.footer { + display: flex; + justify-content: space-between; + align-items: center; +} + .pagination { margin-top: _.unit(4); } diff --git a/packages/console/src/ds-components/Table/index.tsx b/packages/console/src/ds-components/Table/index.tsx index b03f6e6f6..5105a839b 100644 --- a/packages/console/src/ds-components/Table/index.tsx +++ b/packages/console/src/ds-components/Table/index.tsx @@ -37,6 +37,14 @@ export type Props< errorMessage?: string; hasBorder?: boolean; onRetry?: () => void; + /** + * The padding of the table container in px, excluding top padding. + * + * @default 12 + */ + padding?: number; + /** A footer that will be rendered on the bottom-left of the table. */ + footer?: ReactNode; }; function Table< @@ -61,6 +69,8 @@ function Table< errorMessage, hasBorder, onRetry, + padding = 12, + footer, }: Props) { const totalColspan = columns.reduce((result, { colSpan }) => { return result + (colSpan ?? 1); @@ -85,6 +95,7 @@ function Table< filter && styles.hideTopBorderRadius, headerTableClassName )} + style={{ padding: `0 ${padding}px` }} > @@ -102,6 +113,7 @@ function Table< isEmpty && styles.empty, bodyTableWrapperClassName )} + style={{ padding: `0 ${padding}px ${padding}px` }} > @@ -160,7 +172,10 @@ function Table<
- {pagination && } +
+ {footer} + {pagination && } +
); } diff --git a/packages/console/src/ds-components/Tag/index.module.scss b/packages/console/src/ds-components/Tag/index.module.scss index 8627563ee..e5a6063dd 100644 --- a/packages/console/src/ds-components/Tag/index.module.scss +++ b/packages/console/src/ds-components/Tag/index.module.scss @@ -21,6 +21,16 @@ color: var(--color-on-success-container); } + // Distinguish from the info status + &.cell { + font-family: 'Roboto Mono', monospace; + font-size: 14px; + line-height: 20px; + border-radius: 6px; + background: var(--color-neutral-variant-90); + padding: _.unit(0.5) _.unit(2); + } + &.info { .icon { background: var(--color-on-info-container); diff --git a/packages/console/src/ds-components/Tag/index.tsx b/packages/console/src/ds-components/Tag/index.tsx index 6b429a114..200760132 100644 --- a/packages/console/src/ds-components/Tag/index.tsx +++ b/packages/console/src/ds-components/Tag/index.tsx @@ -1,17 +1,16 @@ import { conditional } from '@silverhand/essentials'; import classNames from 'classnames'; -import type { ReactNode } from 'react'; +import type { HTMLProps, ReactNode } from 'react'; import Failed from '@/assets/icons/failed.svg'; import Success from '@/assets/icons/success.svg'; import * as styles from './index.module.scss'; -export type Props = { +export type Props = Pick, 'className' | 'onClick'> & { type?: 'property' | 'state' | 'result'; status?: 'info' | 'success' | 'alert' | 'error'; - variant?: 'plain' | 'outlined'; - className?: string; + variant?: 'plain' | 'outlined' | 'cell'; children: ReactNode; }; @@ -26,14 +25,15 @@ function Tag({ variant = 'outlined', className, children, + ...rest }: Props) { const ResultIcon = conditional(type === 'result' && ResultIconMap[status]); return ( -
+
{type === 'state' &&
} {ResultIcon && } -
{children}
+ {children}
); } diff --git a/packages/console/src/pages/Connectors/ConnectorDeleteButton/index.tsx b/packages/console/src/pages/Connectors/ConnectorDeleteButton/index.tsx index 7c4b1c3d1..4e1f62cbe 100644 --- a/packages/console/src/pages/Connectors/ConnectorDeleteButton/index.tsx +++ b/packages/console/src/pages/Connectors/ConnectorDeleteButton/index.tsx @@ -1,4 +1,3 @@ -import type { ConnectorResponse } from '@logto/schemas'; import { useState } from 'react'; import { toast } from 'react-hot-toast'; import { useTranslation } from 'react-i18next'; @@ -41,7 +40,7 @@ function ConnectorDeleteButton({ connectorGroup }: Props) { try { await Promise.all( connectors.map(async (connector) => { - await api.delete(`api/connectors/${connector.id}`).json(); + await api.delete(`api/connectors/${connector.id}`); }) ); diff --git a/packages/console/src/pages/Organizations/CreatePermissionModal/index.tsx b/packages/console/src/pages/Organizations/CreatePermissionModal/index.tsx new file mode 100644 index 000000000..a6b31f1ed --- /dev/null +++ b/packages/console/src/pages/Organizations/CreatePermissionModal/index.tsx @@ -0,0 +1,86 @@ +import { useEffect, useState } from 'react'; +import { useForm } from 'react-hook-form'; +import { useTranslation } from 'react-i18next'; +import ReactModal from 'react-modal'; + +import Button from '@/ds-components/Button'; +import FormField from '@/ds-components/FormField'; +import ModalLayout from '@/ds-components/ModalLayout'; +import TextInput from '@/ds-components/TextInput'; +import useApi from '@/hooks/use-api'; +import * as modalStyles from '@/scss/modal.module.scss'; + +type Props = { + isOpen: boolean; + onFinish: () => void; +}; + +function CreatePermissionModal({ isOpen, onFinish }: Props) { + const api = useApi(); + const [isLoading, setIsLoading] = useState(false); + const { + reset, + register, + handleSubmit, + formState: { errors }, + } = useForm<{ name: string; description?: string }>({ defaultValues: { name: '' } }); + const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); + + const addPermission = handleSubmit(async (json) => { + setIsLoading(true); + try { + await api.post('api/organization-scopes', { + json, + }); + onFinish(); + } finally { + setIsLoading(false); + } + }); + + useEffect(() => { + if (!isOpen) { + reset(); + } + }, [isOpen, reset]); + + return ( + + + } + onClose={onFinish} + > + + + + + + + + + ); +} +export default CreatePermissionModal; diff --git a/packages/console/src/pages/Organizations/PermissionsField/index.tsx b/packages/console/src/pages/Organizations/PermissionsField/index.tsx new file mode 100644 index 000000000..723893401 --- /dev/null +++ b/packages/console/src/pages/Organizations/PermissionsField/index.tsx @@ -0,0 +1,93 @@ +import { type OrganizationScope } from '@logto/schemas'; +import { useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import useSWR from 'swr'; + +import DeleteButton from '@/components/DeleteButton'; +import FormField from '@/ds-components/FormField'; +import useApi, { type RequestError } from '@/hooks/use-api'; +import { buildUrl } from '@/utils/url'; + +import CreatePermissionModal from '../CreatePermissionModal'; +import TemplateTable, { pageSize } from '../TemplateTable'; +import * as styles from '../index.module.scss'; + +/** + * Renders the permissions field that allows users to add, edit, and delete organization + * permissions. + */ +function PermissionsField() { + const [page, setPage] = useState(1); + const { + data: response, + error, + mutate, + } = useSWR<[OrganizationScope[], number], RequestError>( + buildUrl('api/organization-scopes', { + page: String(page), + page_size: String(pageSize), + }) + ); + + const [data, totalCount] = response ?? [[], 0]; + const api = useApi(); + const [isModalOpen, setIsModalOpen] = useState(false); + const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); + + const isLoading = !response && !error; + + if (isLoading) { + return <>loading; // TODO: loading state + } + + return ( + + { + setIsModalOpen(false); + void mutate(); + }} + /> +
{name}
, + }, + { + title: t('general.description'), + dataIndex: 'description', + colSpan: 6, + render: ({ description }) => description ?? '-', + }, + { + title: null, + dataIndex: 'delete', + render: ({ id }) => ( + { + await api.delete(`api/organization-scopes/${id}`); + void mutate(); + }} + /> + ), + }, + ]} + onPageChange={setPage} + onAdd={() => { + setIsModalOpen(true); + }} + /> + + ); +} + +export default PermissionsField; diff --git a/packages/console/src/pages/Organizations/Settings/index.tsx b/packages/console/src/pages/Organizations/Settings/index.tsx new file mode 100644 index 000000000..5cade4e8e --- /dev/null +++ b/packages/console/src/pages/Organizations/Settings/index.tsx @@ -0,0 +1,14 @@ +import FormCard from '@/components/FormCard'; + +import PermissionsField from '../PermissionsField'; + +export default function Settings() { + return ( + + + + ); +} diff --git a/packages/console/src/pages/Organizations/TemplateTable/index.module.scss b/packages/console/src/pages/Organizations/TemplateTable/index.module.scss new file mode 100644 index 000000000..c8cb91841 --- /dev/null +++ b/packages/console/src/pages/Organizations/TemplateTable/index.module.scss @@ -0,0 +1,9 @@ +@use '@/scss/underscore' as _; + +.addButton { + margin-top: _.unit(3); +} + +.table { + margin-top: _.unit(3); +} diff --git a/packages/console/src/pages/Organizations/TemplateTable/index.tsx b/packages/console/src/pages/Organizations/TemplateTable/index.tsx new file mode 100644 index 000000000..ce2cd5a75 --- /dev/null +++ b/packages/console/src/pages/Organizations/TemplateTable/index.tsx @@ -0,0 +1,86 @@ +import { type FieldValues, type FieldPath } from 'react-hook-form'; + +import CirclePlus from '@/assets/icons/circle-plus.svg'; +import Plus from '@/assets/icons/plus.svg'; +import Button from '@/ds-components/Button'; +import Table from '@/ds-components/Table'; +import { type Column } from '@/ds-components/Table/types'; + +import * as styles from './index.module.scss'; + +type Props> = { + rowIndexKey: TName; + data: TFieldValues[]; + columns: Array>; + totalCount: number; + page: number; + onPageChange: (page: number) => void; + onAdd?: () => void; +}; + +export const pageSize = 10; + +/** + * The table component for organization template editing, such as permissions and roles. + * If `onAdd` is provided, an add button will be rendered in the bottom. + */ +function TemplateTable< + TFieldValues extends FieldValues = FieldValues, + TName extends FieldPath = FieldPath, +>({ + rowIndexKey, + data, + columns, + onAdd, + totalCount, + page, + onPageChange, +}: Props) { + const hasData = data.length > 0; + + return ( + <> + {hasData && ( + } + title="general.create_another" + onClick={onAdd} + /> + } + /> + )} + {onAdd && !hasData && ( +