diff --git a/web/apps/admin/package.json b/web/apps/admin/package.json index 0e117e61e..6c691984c 100644 --- a/web/apps/admin/package.json +++ b/web/apps/admin/package.json @@ -17,7 +17,7 @@ "@hookform/resolvers": "^3.0.1", "@radix-ui/react-form": "^0.1.8", "@radix-ui/react-icons": "^1.3.0", - "@raystack/apsara": "1.0.0-rc.6", + "@raystack/apsara": "1.0.0-rc.8", "@raystack/frontier": "workspace:^", "@raystack/proton": "0.1.0-859ba765e6cfd44736ddcf42664b742fe7fd916e", "@stitches/react": "^1.2.8", diff --git a/web/apps/admin/src/components/assign-role.tsx b/web/apps/admin/src/components/assign-role.tsx index 7d064a032..524337bb7 100644 --- a/web/apps/admin/src/components/assign-role.tsx +++ b/web/apps/admin/src/components/assign-role.tsx @@ -148,7 +148,7 @@ export const AssignRole = ({ return ( - + Assign Role diff --git a/web/apps/client-demo/package.json b/web/apps/client-demo/package.json index 7c084f132..1463546c8 100644 --- a/web/apps/client-demo/package.json +++ b/web/apps/client-demo/package.json @@ -9,7 +9,7 @@ }, "dependencies": { "@radix-ui/react-icons": "^1.3.0", - "@raystack/apsara": "1.0.0-rc.6", + "@raystack/apsara": "1.0.0-rc.8", "@raystack/frontier": "workspace:^", "react": "^19.2.1", "react-dom": "^19.2.1", diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml index 0050cb736..10386c2a5 100644 --- a/web/pnpm-lock.yaml +++ b/web/pnpm-lock.yaml @@ -55,8 +55,8 @@ importers: specifier: ^1.3.0 version: 1.3.2(react@19.2.4) '@raystack/apsara': - specifier: 1.0.0-rc.6 - version: 1.0.0-rc.6(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4) + specifier: 1.0.0-rc.8 + version: 1.0.0-rc.8(@date-fns/tz@1.4.1)(@types/react@19.2.14)(date-fns@4.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4) '@raystack/frontier': specifier: workspace:^ version: link:../../sdk @@ -161,8 +161,8 @@ importers: specifier: ^1.3.0 version: 1.3.2(react@19.2.4) '@raystack/apsara': - specifier: 1.0.0-rc.6 - version: 1.0.0-rc.6(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4) + specifier: 1.0.0-rc.8 + version: 1.0.0-rc.8(@date-fns/tz@1.4.1)(@types/react@19.2.14)(date-fns@4.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4) '@raystack/frontier': specifier: workspace:^ version: link:../../sdk @@ -222,8 +222,8 @@ importers: specifier: ^3.10.0 version: 3.10.0(react-hook-form@7.71.2(react@19.2.4)) '@raystack/apsara-v1': - specifier: npm:@raystack/apsara@1.0.0-rc.6 - version: '@raystack/apsara@1.0.0-rc.6(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)' + specifier: npm:@raystack/apsara@1.0.0-rc.8 + version: '@raystack/apsara@1.0.0-rc.8(@date-fns/tz@1.4.1)(@types/react@19.2.14)(date-fns@4.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)' '@raystack/proton': specifier: 0.1.0-859ba765e6cfd44736ddcf42664b742fe7fd916e version: 0.1.0-859ba765e6cfd44736ddcf42664b742fe7fd916e(@tanstack/query-core@5.90.20)(@tanstack/react-query@5.90.21(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4) @@ -577,6 +577,10 @@ packages: resolution: {integrity: sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==} engines: {node: '>=6.9.0'} + '@babel/runtime@7.29.2': + resolution: {integrity: sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==} + engines: {node: '>=6.9.0'} + '@babel/template@7.28.6': resolution: {integrity: sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==} engines: {node: '>=6.9.0'} @@ -589,16 +593,22 @@ packages: resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==} engines: {node: '>=6.9.0'} - '@base-ui/react@1.3.0': - resolution: {integrity: sha512-FwpKqZbPz14AITp1CVgf4AjhKPe1OeeVKSBMdgD10zbFlj3QSWelmtCMLi2+/PFZZcIm3l87G7rwtCZJwHyXWA==} + '@base-ui/react@1.4.1': + resolution: {integrity: sha512-Ab5/LIhcmL8BQcsBUYiOfkSDRdLpvgUBzMK30cu684JPcLclYlztharvCZyNNgzJtbAiREzI9q0pI5erHCMgCw==} engines: {node: '>=14.0.0'} peerDependencies: + '@date-fns/tz': ^1.2.0 '@types/react': ^17 || ^18 || ^19 + date-fns: ^4.0.0 react: ^17 || ^18 || ^19 react-dom: ^17 || ^18 || ^19 peerDependenciesMeta: + '@date-fns/tz': + optional: true '@types/react': optional: true + date-fns: + optional: true '@base-ui/utils@0.2.6': resolution: {integrity: sha512-yQ+qeuqohwhsNpoYDqqXaLllYAkPCP4vYdDrVo8FQXaAPfHWm1pG/Vm+jmGTA5JFS0BAIjookyapuJFY8F9PIw==} @@ -610,6 +620,16 @@ packages: '@types/react': optional: true + '@base-ui/utils@0.2.8': + resolution: {integrity: sha512-jvOi+c+ftGlGotNcKnzPVg2IhCaDTB6/6R3JeqdjdXktuAJi3wKH9T7+svuaKh1mmfVU11UWzUZVH74JDfi/wQ==} + peerDependencies: + '@types/react': ^17 || ^18 || ^19 + react: ^17 || ^18 || ^19 + react-dom: ^17 || ^18 || ^19 + peerDependenciesMeta: + '@types/react': + optional: true + '@bcoe/v8-coverage@0.2.3': resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==} @@ -2220,8 +2240,8 @@ packages: '@types/react': optional: true - '@raystack/apsara@1.0.0-rc.6': - resolution: {integrity: sha512-DWo5DVZbh5SND5XoKFKFlMlVYtHCnT3w+S7irbKAImV3N+aIeDoNeLa7bUAGzQfWpsm/jbwAwhEkuVqbnJEdmA==} + '@raystack/apsara@1.0.0-rc.8': + resolution: {integrity: sha512-eJz0HxTb/81Jv3/ThQhptDLI6PXzoISa3X6D+t8I46OzCkcC4A9swBzkgDBWYN4R2O01C8g8uxzXLyQXnXl3gQ==} engines: {node: '>=22'} peerDependencies: '@types/react': ^19 @@ -6882,9 +6902,6 @@ packages: resolution: {integrity: sha512-6tDOXSHiVjuCaasQSWTmHUWn4PuG7qa3+1WT031yTc/swT7+rLiw3GOrFxaH1E3lLP09dH3bVuVDf2gK5rxG3Q==} engines: {node: '>=0.10'} - tabbable@6.4.0: - resolution: {integrity: sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg==} - term-size@2.2.1: resolution: {integrity: sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==} engines: {node: '>=8'} @@ -7772,6 +7789,8 @@ snapshots: '@babel/runtime@7.28.6': {} + '@babel/runtime@7.29.2': {} + '@babel/template@7.28.6': dependencies: '@babel/code-frame': 7.29.0 @@ -7795,18 +7814,19 @@ snapshots: '@babel/helper-string-parser': 7.27.1 '@babel/helper-validator-identifier': 7.28.5 - '@base-ui/react@1.3.0(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)': + '@base-ui/react@1.4.1(@date-fns/tz@1.4.1)(@types/react@19.2.14)(date-fns@4.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)': dependencies: - '@babel/runtime': 7.28.6 - '@base-ui/utils': 0.2.6(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4) + '@babel/runtime': 7.29.2 + '@base-ui/utils': 0.2.8(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4) '@floating-ui/react-dom': 2.1.8(react-dom@19.2.4(react@19.2.4))(react@19.2.4) '@floating-ui/utils': 0.2.11 react: 19.2.4 react-dom: 19.2.4(react@19.2.4) - tabbable: 6.4.0 use-sync-external-store: 1.6.0(react@19.2.4) optionalDependencies: + '@date-fns/tz': 1.4.1 '@types/react': 19.2.14 + date-fns: 4.1.0 '@base-ui/utils@0.2.6(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)': dependencies: @@ -7819,6 +7839,17 @@ snapshots: optionalDependencies: '@types/react': 19.2.14 + '@base-ui/utils@0.2.8(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)': + dependencies: + '@babel/runtime': 7.29.2 + '@floating-ui/utils': 0.2.11 + react: 19.2.4 + react-dom: 19.2.4(react@19.2.4) + reselect: 5.1.1 + use-sync-external-store: 1.6.0(react@19.2.4) + optionalDependencies: + '@types/react': 19.2.14 + '@bcoe/v8-coverage@0.2.3': {} '@bufbuild/protobuf@2.11.0': {} @@ -9518,9 +9549,9 @@ snapshots: transitivePeerDependencies: - '@types/react-dom' - '@raystack/apsara@1.0.0-rc.6(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)': + '@raystack/apsara@1.0.0-rc.8(@date-fns/tz@1.4.1)(@types/react@19.2.14)(date-fns@4.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)': dependencies: - '@base-ui/react': 1.3.0(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4) + '@base-ui/react': 1.4.1(@date-fns/tz@1.4.1)(@types/react@19.2.14)(date-fns@4.1.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4) '@base-ui/utils': 0.2.6(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4) '@radix-ui/react-icons': 1.3.2(react@19.2.4) '@tanstack/match-sorter-utils': 8.19.4 @@ -9536,6 +9567,9 @@ snapshots: react-dom: 19.2.4(react@19.2.4) optionalDependencies: '@types/react': 19.2.14 + transitivePeerDependencies: + - '@date-fns/tz' + - date-fns '@raystack/proton@0.1.0-859ba765e6cfd44736ddcf42664b742fe7fd916e(@tanstack/query-core@5.90.20)(@tanstack/react-query@5.90.21(react@19.2.4))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)': dependencies: @@ -14922,8 +14956,6 @@ snapshots: symbol-observable@3.0.0: {} - tabbable@6.4.0: {} - term-size@2.2.1: {} terminal-link@2.1.1: diff --git a/web/sdk/admin/components/AssignRole.tsx b/web/sdk/admin/components/AssignRole.tsx index 6fdba16d7..cb5f42df6 100644 --- a/web/sdk/admin/components/AssignRole.tsx +++ b/web/sdk/admin/components/AssignRole.tsx @@ -95,7 +95,7 @@ export const AssignRole = ({ return ( - + Assign Role diff --git a/web/sdk/admin/views/organizations/details/layout/add-tokens-dialog.tsx b/web/sdk/admin/views/organizations/details/layout/add-tokens-dialog.tsx index 0b608f437..0510a6e87 100644 --- a/web/sdk/admin/views/organizations/details/layout/add-tokens-dialog.tsx +++ b/web/sdk/admin/views/organizations/details/layout/add-tokens-dialog.tsx @@ -98,7 +98,7 @@ export const AddTokensDialog = ({ onOpenChange }: InviteUsersDialogProps) => { return ( - +
diff --git a/web/sdk/admin/views/organizations/details/members/remove-member.tsx b/web/sdk/admin/views/organizations/details/members/remove-member.tsx index 91a427cfa..28f02f866 100644 --- a/web/sdk/admin/views/organizations/details/members/remove-member.tsx +++ b/web/sdk/admin/views/organizations/details/members/remove-member.tsx @@ -53,7 +53,7 @@ export const RemoveMember = ({ return ( - + Remove {t.member({ case: "capital" })} diff --git a/web/sdk/admin/views/organizations/details/projects/members/assign-role.tsx b/web/sdk/admin/views/organizations/details/projects/members/assign-role.tsx index 459ef4f06..58a74e37c 100644 --- a/web/sdk/admin/views/organizations/details/projects/members/assign-role.tsx +++ b/web/sdk/admin/views/organizations/details/projects/members/assign-role.tsx @@ -92,7 +92,6 @@ export const AssignRole = ({ return ( diff --git a/web/sdk/admin/views/organizations/details/projects/members/remove-member.tsx b/web/sdk/admin/views/organizations/details/projects/members/remove-member.tsx index 48b1446e8..6317795f8 100644 --- a/web/sdk/admin/views/organizations/details/projects/members/remove-member.tsx +++ b/web/sdk/admin/views/organizations/details/projects/members/remove-member.tsx @@ -59,7 +59,6 @@ export const RemoveMember = ({ return ( diff --git a/web/sdk/admin/views/organizations/details/projects/rename-project.tsx b/web/sdk/admin/views/organizations/details/projects/rename-project.tsx index 7c0f015a1..74adb4381 100644 --- a/web/sdk/admin/views/organizations/details/projects/rename-project.tsx +++ b/web/sdk/admin/views/organizations/details/projects/rename-project.tsx @@ -80,7 +80,6 @@ export function RenameProjectDialog({ return ( diff --git a/web/sdk/admin/views/organizations/details/security/block-organization.tsx b/web/sdk/admin/views/organizations/details/security/block-organization.tsx index d3166f898..679dcc822 100644 --- a/web/sdk/admin/views/organizations/details/security/block-organization.tsx +++ b/web/sdk/admin/views/organizations/details/security/block-organization.tsx @@ -137,13 +137,13 @@ const BlockOrganizationDialog = () => { } /> - - + + {componentConfig.dialogTitle} {componentConfig.dialogDescription} - + } /> - - + + Delete email domain Are you sure you want to delete this email domain? - + - + Suspend {t.user({ case: "capital" })} diff --git a/web/sdk/admin/views/users/details/security/block-user.tsx b/web/sdk/admin/views/users/details/security/block-user.tsx index 6b296e268..e0f48c864 100644 --- a/web/sdk/admin/views/users/details/security/block-user.tsx +++ b/web/sdk/admin/views/users/details/security/block-user.tsx @@ -134,11 +134,11 @@ export const BlockUserDialog = () => { } /> - - + + {config.dialogTitle} {config.dialogDescription} - + - + Crop your photo diff --git a/web/sdk/react/views-new/billing/components/confirm-cycle-switch-dialog.tsx b/web/sdk/react/views-new/billing/components/confirm-cycle-switch-dialog.tsx index c9db04574..7bdb2e474 100644 --- a/web/sdk/react/views-new/billing/components/confirm-cycle-switch-dialog.tsx +++ b/web/sdk/react/views-new/billing/components/confirm-cycle-switch-dialog.tsx @@ -214,7 +214,7 @@ function ConfirmCycleSwitchContent({ } return ( - + Switch billing cycle diff --git a/web/sdk/react/views-new/general/components/delete-organization-dialog.module.css b/web/sdk/react/views-new/general/components/delete-organization-dialog.module.css deleted file mode 100644 index 9f0acf3ed..000000000 --- a/web/sdk/react/views-new/general/components/delete-organization-dialog.module.css +++ /dev/null @@ -1,3 +0,0 @@ -.deleteButton { - width: 100%; -} diff --git a/web/sdk/react/views-new/general/components/delete-organization-dialog.tsx b/web/sdk/react/views-new/general/components/delete-organization-dialog.tsx index 83a4d2fae..edff67f85 100644 --- a/web/sdk/react/views-new/general/components/delete-organization-dialog.tsx +++ b/web/sdk/react/views-new/general/components/delete-organization-dialog.tsx @@ -9,18 +9,17 @@ import { DeleteOrganizationRequestSchema } from '@raystack/proton/frontier'; import { + AlertDialog, Button, Checkbox, - Text, - Flex, - Dialog, Field, + Flex, Input, + Text, toastManager } from '@raystack/apsara-v1'; import { useFrontier } from '../../../contexts/FrontierContext'; import { useTerminology } from '../../../hooks/useTerminology'; -import styles from './delete-organization-dialog.module.css'; import { handleConnectError } from '~/utils/error'; const deleteOrgSchema = yup @@ -91,16 +90,14 @@ export const DeleteOrganizationDialog = ({ } return ( - - - - - Verify {orgLabel} deletion - - + + - - + + Delete {orgLabel} + + + This action can not be undone. This will permanently delete all the projects and resources in {organization?.title}. @@ -130,22 +127,35 @@ export const DeleteOrganizationDialog = ({ {orgLabel} data will be deleted and want to proceed. - - + + + + Cancel + + } + /> + + - - + + ); }; diff --git a/web/sdk/react/views-new/members/components/remove-member-dialog.tsx b/web/sdk/react/views-new/members/components/remove-member-dialog.tsx index 4aa2e2b4a..06ac4b03b 100644 --- a/web/sdk/react/views-new/members/components/remove-member-dialog.tsx +++ b/web/sdk/react/views-new/members/components/remove-member-dialog.tsx @@ -9,9 +9,8 @@ import { RemoveOrganizationMemberRequestSchema } from '@raystack/proton/frontier'; import { + AlertDialog, Button, - Text, - Dialog, Flex, toastManager } from '@raystack/apsara-v1'; @@ -22,7 +21,7 @@ import { handleConnectError } from '~/utils/error'; export type RemoveMemberPayload = { memberId: string; invited: string }; export interface RemoveMemberDialogProps { - handle: ReturnType>; + handle: ReturnType>; refetch: () => void; } @@ -32,17 +31,12 @@ export function RemoveMemberDialog({ handle, refetch }: RemoveMemberDialogProps) const [isLoading, setIsLoading] = useState(false); const t = useTerminology(); - const handleOpenChange = (open: boolean) => { - if (!open) { - refetch(); - } - }; - const { mutateAsync: deleteInvitation } = useMutation( FrontierServiceQueries.deleteOrganizationInvitation, { onSuccess: () => { handle.close(); + refetch(); toastManager.add({ title: 'Invitation deleted', type: 'success' }); } } @@ -53,6 +47,7 @@ export function RemoveMemberDialog({ handle, refetch }: RemoveMemberDialogProps) { onSuccess: () => { handle.close(); + refetch(); toastManager.add({ title: 'User removed', type: 'success' }); } } @@ -75,6 +70,7 @@ export function RemoveMemberDialog({ handle, refetch }: RemoveMemberDialogProps) }); await removeMember(req); } + handle.close(); } catch (error) { handleConnectError(error, { NotFound: (err) => toastManager.add({ title: 'Not found', description: err.message, type: 'error' }), @@ -88,49 +84,45 @@ export function RemoveMemberDialog({ handle, refetch }: RemoveMemberDialogProps) }; return ( - + {({ payload: rawPayload }) => { const payload = rawPayload as RemoveMemberPayload | undefined; return ( - - - Remove member? - - - + + + Remove member + Are you sure you want to remove this member from the{' '} {t.organization({ case: 'lower' })}? - - - - - - - - - + + + + + + + ); }} - + ); } diff --git a/web/sdk/react/views-new/members/components/update-role-dialog.tsx b/web/sdk/react/views-new/members/components/update-role-dialog.tsx index d2b3504ec..21fb0f3f4 100644 --- a/web/sdk/react/views-new/members/components/update-role-dialog.tsx +++ b/web/sdk/react/views-new/members/components/update-role-dialog.tsx @@ -11,10 +11,8 @@ import { } from '@raystack/proton/frontier'; import type { Role, Policy } from '@raystack/proton/frontier'; import { + AlertDialog, Button, - Text, - Dialog, - Flex, toastManager } from '@raystack/apsara-v1'; import { handleConnectError } from '~/utils/error'; @@ -22,20 +20,14 @@ import { handleConnectError } from '~/utils/error'; export type UpdateRolePayload = { memberId: string; role: Role }; export interface UpdateRoleDialogProps { - handle: ReturnType>; + handle: ReturnType>; organizationId: string; refetch: () => void; } export function UpdateRoleDialog({ handle, organizationId, refetch }: UpdateRoleDialogProps) { - const handleOpenChange = (open: boolean) => { - if (!open) { - refetch(); - } - }; - return ( - + {({ payload: rawPayload }) => { const payload = rawPayload as UpdateRolePayload | undefined; return payload ? ( @@ -43,21 +35,24 @@ export function UpdateRoleDialog({ handle, organizationId, refetch }: UpdateRole payload={payload} organizationId={organizationId} onClose={() => handle.close()} + refetch={refetch} /> ) : null; }} - + ); } function UpdateRoleContent({ payload, organizationId, - onClose + onClose, + refetch }: { payload: UpdateRolePayload; organizationId: string; onClose: () => void; + refetch: () => void; }) { const [isLoading, setIsLoading] = useState(false); @@ -116,6 +111,7 @@ function UpdateRoleContent({ await createPolicy(createReq); toastManager.add({ title: 'Member role updated', type: 'success' }); + refetch(); onClose(); } catch (error) { handleConnectError(error, { @@ -129,42 +125,36 @@ function UpdateRoleContent({ }; return ( - - - - - Update role - - - This will grant additional permissions to the user based on the new - role. - - - - - - - - - - + + + Update role + + This will grant additional permissions to the user based on the new + role. + + + + + + + ); } diff --git a/web/sdk/react/views-new/members/members-view.tsx b/web/sdk/react/views-new/members/members-view.tsx index 74157b69f..d50dfc6e8 100644 --- a/web/sdk/react/views-new/members/members-view.tsx +++ b/web/sdk/react/views-new/members/members-view.tsx @@ -3,6 +3,7 @@ import { useMemo, useState } from 'react'; import { ExclamationTriangleIcon, UpdateIcon } from '@radix-ui/react-icons'; import { + AlertDialog, Button, Tooltip, Skeleton, @@ -30,8 +31,8 @@ import styles from './members-view.module.css'; const memberMenuHandle = Menu.createHandle(); const inviteDialogHandle = Dialog.createHandle(); -const removeMemberDialogHandle = Dialog.createHandle(); -const updateRoleDialogHandle = Dialog.createHandle(); +const removeMemberDialogHandle = AlertDialog.createHandle(); +const updateRoleDialogHandle = AlertDialog.createHandle(); export interface MembersViewProps { showTeamField?: boolean; diff --git a/web/sdk/react/views-new/pat/components/pat-created-dialog.tsx b/web/sdk/react/views-new/pat/components/pat-created-dialog.tsx index 42b05071a..9938bb5a7 100644 --- a/web/sdk/react/views-new/pat/components/pat-created-dialog.tsx +++ b/web/sdk/react/views-new/pat/components/pat-created-dialog.tsx @@ -35,7 +35,7 @@ export function PATCreatedDialog({ handle, onClose }: PATCreatedDialogProps) { ? 'Your personal access token has been regenerated successfully. Please copy and store it securely.' : 'Successfully added a new personal access token. Please copy the token.'; return ( - + Success diff --git a/web/sdk/react/views-new/pat/components/pat-form-dialog.tsx b/web/sdk/react/views-new/pat/components/pat-form-dialog.tsx index feb3d2f52..7db108e08 100644 --- a/web/sdk/react/views-new/pat/components/pat-form-dialog.tsx +++ b/web/sdk/react/views-new/pat/components/pat-form-dialog.tsx @@ -338,7 +338,7 @@ export function PATFormDialog({ return ( - +
diff --git a/web/sdk/react/views-new/pat/components/regenerate-pat-dialog.tsx b/web/sdk/react/views-new/pat/components/regenerate-pat-dialog.tsx index 18c0aaf4b..49cd8ddc8 100644 --- a/web/sdk/react/views-new/pat/components/regenerate-pat-dialog.tsx +++ b/web/sdk/react/views-new/pat/components/regenerate-pat-dialog.tsx @@ -102,7 +102,7 @@ export function RegeneratePATDialog({ expiryValue || payload?.currentExpiryValue || ''; const patId = payload?.patId; return ( - + Regenerate Expiry date diff --git a/web/sdk/react/views-new/pat/components/revoke-pat-dialog.module.css b/web/sdk/react/views-new/pat/components/revoke-pat-dialog.module.css deleted file mode 100644 index 6742c54f4..000000000 --- a/web/sdk/react/views-new/pat/components/revoke-pat-dialog.module.css +++ /dev/null @@ -1,3 +0,0 @@ -.body { - border-bottom: none !important; -} diff --git a/web/sdk/react/views-new/pat/components/revoke-pat-dialog.tsx b/web/sdk/react/views-new/pat/components/revoke-pat-dialog.tsx index 6cccf0e96..735cc10d1 100644 --- a/web/sdk/react/views-new/pat/components/revoke-pat-dialog.tsx +++ b/web/sdk/react/views-new/pat/components/revoke-pat-dialog.tsx @@ -8,7 +8,6 @@ import { DeleteCurrentUserPATRequestSchema } from '@raystack/proton/frontier'; import { AlertDialog, Button, toastManager } from '@raystack/apsara-v1'; -import styles from './revoke-pat-dialog.module.css'; import { handleConnectError } from '~/utils/error'; export interface RevokePATDialogProps { @@ -49,16 +48,16 @@ export function RevokePATDialog({ handle, onRevoked }: RevokePATDialogProps) { return ( {({ payload: patId }) => ( - - + + Revoke This action cannot be undone. Revoking this token will permanently remove access for any users using it. You'll need to generate a new token if access is required again. - - + + - - + + ); diff --git a/web/sdk/react/views-new/projects/components/edit-project-dialog.tsx b/web/sdk/react/views-new/projects/components/edit-project-dialog.tsx index 76e999260..14ee17261 100644 --- a/web/sdk/react/views-new/projects/components/edit-project-dialog.tsx +++ b/web/sdk/react/views-new/projects/components/edit-project-dialog.tsx @@ -47,7 +47,7 @@ export function EditProjectDialog({ handle, refetch }: EditProjectDialogProps) { {({ payload }) => { const p = payload as EditProjectPayload | undefined; return ( - + {p ? ( { const p = payload as RemoveMemberPayload | undefined; return ( - + {p ? ( - - - - + + ); diff --git a/web/sdk/react/views-new/projects/components/update-role-dialog.tsx b/web/sdk/react/views-new/projects/components/update-role-dialog.tsx new file mode 100644 index 000000000..3f44a91d2 --- /dev/null +++ b/web/sdk/react/views-new/projects/components/update-role-dialog.tsx @@ -0,0 +1,131 @@ +'use client'; + +import { useState } from 'react'; +import { create } from '@bufbuild/protobuf'; +import { useMutation } from '@connectrpc/connect-query'; +import { + FrontierServiceQueries, + SetProjectMemberRoleRequestSchema +} from '@raystack/proton/frontier'; +import type { Role } from '@raystack/proton/frontier'; +import { + AlertDialog, + Button, + toastManager +} from '@raystack/apsara-v1'; +import { PERMISSIONS } from '../../../../utils'; +import { handleConnectError } from '~/utils/error'; + +export type UpdateRolePayload = { + memberId: string; + isTeam: boolean; + role: Role; +}; + +export interface UpdateRoleDialogProps { + handle: ReturnType>; + projectId: string; + refetch: () => void; +} + +export function UpdateRoleDialog({ + handle, + projectId, + refetch +}: UpdateRoleDialogProps) { + return ( + + {({ payload: rawPayload }) => { + const payload = rawPayload as UpdateRolePayload | undefined; + return payload ? ( + handle.close()} + refetch={refetch} + /> + ) : null; + }} + + ); +} + +function UpdateRoleContent({ + payload, + projectId, + onClose, + refetch +}: { + payload: UpdateRolePayload; + projectId: string; + onClose: () => void; + refetch: () => void; +}) { + const [isLoading, setIsLoading] = useState(false); + + const { mutateAsync: setProjectMemberRole } = useMutation( + FrontierServiceQueries.setProjectMemberRole + ); + + const handleUpdate = async () => { + setIsLoading(true); + try { + await setProjectMemberRole( + create(SetProjectMemberRoleRequestSchema, { + projectId, + principalId: payload.memberId, + principalType: payload.isTeam + ? PERMISSIONS.GroupNamespace + : PERMISSIONS.UserNamespace, + roleId: payload.role.id as string + }) + ); + + toastManager.add({ title: 'Member role updated', type: 'success' }); + refetch(); + onClose(); + } catch (error) { + handleConnectError(error, { + PermissionDenied: () => toastManager.add({ title: "You don't have permission to perform this action", type: 'error' }), + NotFound: (err) => toastManager.add({ title: 'Not found', description: err.message, type: 'error' }), + Default: (err) => toastManager.add({ title: 'Something went wrong', description: err.message, type: 'error' }), + }); + } finally { + setIsLoading(false); + } + }; + + return ( + + + Update role + + This will grant additional permissions to the member based on the new + role. + + + + + + + + ); +} diff --git a/web/sdk/react/views-new/projects/project-details-view.tsx b/web/sdk/react/views-new/projects/project-details-view.tsx index b0e77dbf3..957db376d 100644 --- a/web/sdk/react/views-new/projects/project-details-view.tsx +++ b/web/sdk/react/views-new/projects/project-details-view.tsx @@ -22,17 +22,13 @@ import { } from '@raystack/apsara-v1'; import deleteIcon from '../../assets/delete.svg'; import { toastManager } from '@raystack/apsara-v1'; -import { - useQuery, - useMutation -} from '@connectrpc/connect-query'; +import { useQuery } from '@connectrpc/connect-query'; import { FrontierServiceQueries, ListProjectGroupsRequestSchema, ListProjectUsersRequestSchema, GetProjectRequestSchema, ListRolesRequestSchema, - SetProjectMemberRoleRequestSchema, type Role as ProtoRole } from '@raystack/proton/frontier'; import { create } from '@bufbuild/protobuf'; @@ -53,6 +49,10 @@ import { RemoveMemberDialog, type RemoveMemberPayload } from './components/remove-member-dialog'; +import { + UpdateRoleDialog, + type UpdateRolePayload +} from './components/update-role-dialog'; import { getColumns, type MemberRow, @@ -60,7 +60,6 @@ import { } from './components/member-columns'; import { AddMemberMenu } from './components/add-member-menu'; import styles from './project-details-view.module.css'; -import { handleConnectError } from '~/utils/error'; interface ProjectGroupRolePair { groupId?: string; @@ -78,6 +77,7 @@ const deleteProjectDialogHandle = AlertDialog.createHandle(); const removeMemberDialogHandle = AlertDialog.createHandle(); +const updateRoleDialogHandle = AlertDialog.createHandle(); export interface ProjectDetailsViewProps { projectId: string; @@ -283,37 +283,6 @@ export function ProjectDetailsView({ ] ); - const { mutateAsync: setProjectMemberRole } = useMutation( - FrontierServiceQueries.setProjectMemberRole - ); - - const updateMemberRole = useCallback( - async (memberId: string, isTeam: boolean, role: ProtoRole) => { - try { - await setProjectMemberRole( - create(SetProjectMemberRoleRequestSchema, { - projectId, - principalId: memberId, - principalType: isTeam ? PERMISSIONS.GroupNamespace : PERMISSIONS.UserNamespace, - roleId: role.id as string - }) - ); - refetchMembers(); - toastManager.add({ - title: 'Member role updated', - type: 'success' - }); - } catch (error) { - handleConnectError(error, { - PermissionDenied: () => toastManager.add({ title: "You don't have permission to perform this action", type: 'error' }), - NotFound: (err) => toastManager.add({ title: 'Not found', description: err.message, type: 'error' }), - Default: (err) => toastManager.add({ title: 'Something went wrong', description: err.message, type: 'error' }), - }); - } - }, - [setProjectMemberRole, projectId, refetchMembers] - ); - const handleDeleteSuccess = useCallback(() => { onDeleteSuccess?.(); }, [onDeleteSuccess]); @@ -359,7 +328,7 @@ export function ProjectDetailsView({ } onClick={() => payload && - updateMemberRole( - payload.memberId, - payload.isTeam, + updateRoleDialogHandle.openWithPayload({ + memberId: payload.memberId, + isTeam: payload.isTeam, role - ) + }) } data-test-id="frontier-sdk-update-member-role-btn" > @@ -477,6 +446,11 @@ export function ProjectDetailsView({ handle={removeMemberDialogHandle} refetch={refetchMembers} /> + ); } diff --git a/web/sdk/react/views-new/security/components/add-domain-dialog.tsx b/web/sdk/react/views-new/security/components/add-domain-dialog.tsx index 5f1cfa970..ff205d05f 100644 --- a/web/sdk/react/views-new/security/components/add-domain-dialog.tsx +++ b/web/sdk/react/views-new/security/components/add-domain-dialog.tsx @@ -107,7 +107,7 @@ export function AddDomainDialog({ return ( - + Add domain diff --git a/web/sdk/react/views-new/security/components/delete-domain-dialog.tsx b/web/sdk/react/views-new/security/components/delete-domain-dialog.tsx index 2f1fef995..dc79b6e48 100644 --- a/web/sdk/react/views-new/security/components/delete-domain-dialog.tsx +++ b/web/sdk/react/views-new/security/components/delete-domain-dialog.tsx @@ -141,11 +141,11 @@ function DeleteDomainContent({ const domainName = watch('domain', ''); return ( - - - Delete Domain - + + + Delete Domain + {isDomainLoading ? ( @@ -188,23 +188,21 @@ function DeleteDomainContent({ - - {isDomainLoading ? ( - - ) : ( - - )} - + {isDomainLoading ? ( + + ) : ( + + )} diff --git a/web/sdk/react/views-new/security/components/verify-domain-dialog.tsx b/web/sdk/react/views-new/security/components/verify-domain-dialog.tsx index 63b0f9330..e8d6e274d 100644 --- a/web/sdk/react/views-new/security/components/verify-domain-dialog.tsx +++ b/web/sdk/react/views-new/security/components/verify-domain-dialog.tsx @@ -115,7 +115,7 @@ function VerifyDomainContent({ } return ( - + Verify domain diff --git a/web/sdk/react/views-new/service-accounts/components/add-service-account-dialog.tsx b/web/sdk/react/views-new/service-accounts/components/add-service-account-dialog.tsx index 623ff92ba..7596d213f 100644 --- a/web/sdk/react/views-new/service-accounts/components/add-service-account-dialog.tsx +++ b/web/sdk/react/views-new/service-accounts/components/add-service-account-dialog.tsx @@ -240,7 +240,7 @@ export function AddServiceAccountDialog({ return ( - +
New Service Account diff --git a/web/sdk/react/views-new/service-accounts/components/delete-service-account-dialog.module.css b/web/sdk/react/views-new/service-accounts/components/delete-service-account-dialog.module.css deleted file mode 100644 index 6742c54f4..000000000 --- a/web/sdk/react/views-new/service-accounts/components/delete-service-account-dialog.module.css +++ /dev/null @@ -1,3 +0,0 @@ -.body { - border-bottom: none !important; -} diff --git a/web/sdk/react/views-new/service-accounts/components/delete-service-account-dialog.tsx b/web/sdk/react/views-new/service-accounts/components/delete-service-account-dialog.tsx index b1de80cd2..cf5c5bdbc 100644 --- a/web/sdk/react/views-new/service-accounts/components/delete-service-account-dialog.tsx +++ b/web/sdk/react/views-new/service-accounts/components/delete-service-account-dialog.tsx @@ -10,14 +10,12 @@ import { } from '@raystack/proton/frontier'; import { Button, - Text, AlertDialog, Flex, toastManager } from '@raystack/apsara-v1'; import { useFrontier } from '~/react/contexts/FrontierContext'; import { useQueryClient } from '@tanstack/react-query'; -import styles from './delete-service-account-dialog.module.css'; export type DeleteServiceAccountPayload = { serviceAccountId: string }; @@ -77,40 +75,38 @@ export function DeleteServiceAccountDialog({ handle, refetch }: DeleteServiceAcc {({ payload: rawPayload }) => { const payload = rawPayload as DeleteServiceAccountPayload | undefined; return ( - - + + Delete Service Account - + This action is irreversible and may result in the deletion of all keys associated with this account. Are you sure you want to proceed? - - + + - - - - + + ); diff --git a/web/sdk/react/views-new/service-accounts/components/manage-project-access-dialog.tsx b/web/sdk/react/views-new/service-accounts/components/manage-project-access-dialog.tsx index 54c6d2e3b..717fa8f8a 100644 --- a/web/sdk/react/views-new/service-accounts/components/manage-project-access-dialog.tsx +++ b/web/sdk/react/views-new/service-accounts/components/manage-project-access-dialog.tsx @@ -339,7 +339,7 @@ export function ManageProjectAccessDialog({ return ( - + Manage Project Access diff --git a/web/sdk/react/views-new/service-accounts/components/revoke-token-dialog.module.css b/web/sdk/react/views-new/service-accounts/components/revoke-token-dialog.module.css deleted file mode 100644 index 6742c54f4..000000000 --- a/web/sdk/react/views-new/service-accounts/components/revoke-token-dialog.module.css +++ /dev/null @@ -1,3 +0,0 @@ -.body { - border-bottom: none !important; -} diff --git a/web/sdk/react/views-new/service-accounts/components/revoke-token-dialog.tsx b/web/sdk/react/views-new/service-accounts/components/revoke-token-dialog.tsx index 4828901ba..dc7967f0f 100644 --- a/web/sdk/react/views-new/service-accounts/components/revoke-token-dialog.tsx +++ b/web/sdk/react/views-new/service-accounts/components/revoke-token-dialog.tsx @@ -9,14 +9,12 @@ import { } from '@raystack/proton/frontier'; import { Button, - Text, AlertDialog, Flex, toastManager } from '@raystack/apsara-v1'; import { useFrontier } from '~/react/contexts/FrontierContext'; import { useTerminology } from '~/react/hooks/useTerminology'; -import styles from './revoke-token-dialog.module.css'; export type RevokeTokenPayload = { tokenId: string }; @@ -69,38 +67,36 @@ export function RevokeTokenDialog({ {({ payload: rawPayload }) => { const payload = rawPayload as RevokeTokenPayload | undefined; return ( - - + + Revoke API Key - + This is an irreversible action doing this might lead to discontinuation of access to the {t.appName()} features. Do you wish to proceed? - - + + - - - - + + ); diff --git a/web/sdk/react/views-new/sessions/components/revoke-session-confirm-dialog.tsx b/web/sdk/react/views-new/sessions/components/revoke-session-confirm-dialog.tsx index 5b8ee89ab..ff0eab2a3 100644 --- a/web/sdk/react/views-new/sessions/components/revoke-session-confirm-dialog.tsx +++ b/web/sdk/react/views-new/sessions/components/revoke-session-confirm-dialog.tsx @@ -21,16 +21,16 @@ export const RevokeSessionConfirmDialog = ({ return ( - - + + {isCurrentSession ? 'Log out' : 'Revoke'} Are you sure you want to {isCurrentSession ? 'log out' : 'revoke'} of this session? This action cannot be undone. - - + + - - - + + + - + Add Team diff --git a/web/sdk/react/views-new/teams/components/delete-team-dialog.tsx b/web/sdk/react/views-new/teams/components/delete-team-dialog.tsx index 889c83cb8..408eb95ea 100644 --- a/web/sdk/react/views-new/teams/components/delete-team-dialog.tsx +++ b/web/sdk/react/views-new/teams/components/delete-team-dialog.tsx @@ -61,7 +61,7 @@ export function DeleteTeamDialog({ handle, refetch }: DeleteTeamDialogProps) { {({ payload: rawPayload }) => { const payload = rawPayload as DeleteTeamPayload | undefined; return ( - + Delete Team @@ -73,30 +73,28 @@ export function DeleteTeamDialog({ handle, refetch }: DeleteTeamDialogProps) { - - - - + + ); diff --git a/web/sdk/react/views-new/teams/components/edit-team-dialog.tsx b/web/sdk/react/views-new/teams/components/edit-team-dialog.tsx index c0e6af902..888673623 100644 --- a/web/sdk/react/views-new/teams/components/edit-team-dialog.tsx +++ b/web/sdk/react/views-new/teams/components/edit-team-dialog.tsx @@ -47,7 +47,7 @@ export function EditTeamDialog({ handle, refetch }: EditTeamDialogProps) { {({ payload }) => { const p = payload as EditTeamPayload | undefined; return ( - + {p ? ( { const p = payload as RemoveMemberPayload | undefined; return ( - + {p ? ( - - - - + + ); diff --git a/web/sdk/react/views-new/tokens/components/add-tokens-dialog.tsx b/web/sdk/react/views-new/tokens/components/add-tokens-dialog.tsx index bca938885..97e9f8b32 100644 --- a/web/sdk/react/views-new/tokens/components/add-tokens-dialog.tsx +++ b/web/sdk/react/views-new/tokens/components/add-tokens-dialog.tsx @@ -132,7 +132,7 @@ export function AddTokensDialog({ handle }: AddTokensDialogProps) { return ( - + Add tokens