Compare commits
29 Commits
@nhost/rea
...
@nhost/das
| Author | SHA1 | Date | |
|---|---|---|---|
|
5747659320 | ||
|
0793ddd9cd | ||
|
|
48c5946120 | ||
|
|
5ca2cd9a67 | ||
|
|
2849c86cc7 | ||
|
|
264d414898 | ||
|
|
dd48eb9aac | ||
|
12a3226df2 | ||
|
|
7d5edb4064 | ||
|
|
37dae7d42c | ||
|
|
6903484f09 | ||
|
|
c5e50deb9c | ||
|
|
92d349a1ae | ||
|
|
789f53204d | ||
|
|
50c0302f6a | ||
|
|
9834cd19ea | ||
|
|
e8bc14c076 | ||
|
|
f76dbc28ba | ||
|
|
5b95d41275 | ||
|
|
e12a651bda | ||
|
|
9d91857bab | ||
|
fb7be360a8 | ||
|
|
2e42eacfbd | ||
|
|
d19750728c | ||
|
|
551298b568 | ||
|
50441a84cb | ||
|
|
c4aa159f1f | ||
|
|
91f0465cbc | ||
|
|
6f61262045 |
@@ -15,6 +15,7 @@ module.exports = {
|
|||||||
],
|
],
|
||||||
rules: {
|
rules: {
|
||||||
'react/react-in-jsx-scope': 'off',
|
'react/react-in-jsx-scope': 'off',
|
||||||
|
'react/prop-types': [2, { ignore: ['className'] }],
|
||||||
'react/jsx-props-no-spreading': 'off',
|
'react/jsx-props-no-spreading': 'off',
|
||||||
'react/require-default-props': 'off',
|
'react/require-default-props': 'off',
|
||||||
'react-hooks/exhaustive-deps': 'warn',
|
'react-hooks/exhaustive-deps': 'warn',
|
||||||
@@ -76,4 +77,29 @@ module.exports = {
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
overrides: [
|
||||||
|
{
|
||||||
|
files: ['**/components/ui/v3/*.tsx'],
|
||||||
|
rules: {
|
||||||
|
'react/prop-types': [
|
||||||
|
2,
|
||||||
|
{
|
||||||
|
ignore: [
|
||||||
|
'className',
|
||||||
|
'align',
|
||||||
|
'sideOffset',
|
||||||
|
'orientation',
|
||||||
|
'decorative',
|
||||||
|
'checked',
|
||||||
|
'position',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
'react-refresh/only-export-components': 'off',
|
||||||
|
'react/function-component-definition': 'off',
|
||||||
|
'arrow-body-style': 'off',
|
||||||
|
'react/no-unknown-property': 'off',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,5 +1,11 @@
|
|||||||
# @nhost/dashboard
|
# @nhost/dashboard
|
||||||
|
|
||||||
|
## 1.30.0
|
||||||
|
|
||||||
|
### Minor Changes
|
||||||
|
|
||||||
|
- 50441a8: feat: add ui for project autoscaler settings and run services autoscaler settings
|
||||||
|
|
||||||
## 1.29.0
|
## 1.29.0
|
||||||
|
|
||||||
### Minor Changes
|
### Minor Changes
|
||||||
|
|||||||
20
dashboard/components.json
Normal file
20
dashboard/components.json
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://ui.shadcn.com/schema.json",
|
||||||
|
"style": "default",
|
||||||
|
"rsc": false,
|
||||||
|
"tsx": true,
|
||||||
|
"tailwind": {
|
||||||
|
"config": "tailwind.config.js",
|
||||||
|
"css": "src/styles/globals.css",
|
||||||
|
"baseColor": "slate",
|
||||||
|
"cssVariables": true,
|
||||||
|
"prefix": ""
|
||||||
|
},
|
||||||
|
"aliases": {
|
||||||
|
"components": "@/components",
|
||||||
|
"utils": "@/lib/utils",
|
||||||
|
"ui": "@/components/ui/v3",
|
||||||
|
"lib": "@/lib",
|
||||||
|
"hooks": "@/hooks"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -39,22 +39,6 @@ test('should create and delete a run service', async () => {
|
|||||||
await page.getByPlaceholder(/service name/i).click();
|
await page.getByPlaceholder(/service name/i).click();
|
||||||
await page.getByPlaceholder(/service name/i).fill('test');
|
await page.getByPlaceholder(/service name/i).fill('test');
|
||||||
|
|
||||||
const sliderRail = page.locator(
|
|
||||||
'.space-y-4 > .MuiSlider-root > .MuiSlider-rail',
|
|
||||||
);
|
|
||||||
|
|
||||||
// Get the bounding box of the slider rail to determine where to click
|
|
||||||
const box = await sliderRail.boundingBox();
|
|
||||||
|
|
||||||
if (box) {
|
|
||||||
// Calculate the position to click (start of the rail)
|
|
||||||
const x = box.x + 1; // A little offset to ensure click inside the rail
|
|
||||||
const y = box.y + box.height / 2; // Middle of the rail height-wise
|
|
||||||
|
|
||||||
// Perform the click
|
|
||||||
await page.mouse.click(x, y);
|
|
||||||
}
|
|
||||||
|
|
||||||
await page.getByRole('button', { name: /create/i }).click();
|
await page.getByRole('button', { name: /create/i }).click();
|
||||||
|
|
||||||
await expect(
|
await expect(
|
||||||
|
|||||||
@@ -19,7 +19,7 @@ const cspHeader = `
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
module.exports = withBundleAnalyzer({
|
module.exports = withBundleAnalyzer({
|
||||||
reactStrictMode: true,
|
reactStrictMode: false,
|
||||||
swcMinify: false,
|
swcMinify: false,
|
||||||
output: 'standalone',
|
output: 'standalone',
|
||||||
experimental: {
|
experimental: {
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@nhost/dashboard",
|
"name": "@nhost/dashboard",
|
||||||
"version": "1.29.0",
|
"version": "2.0.5",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"preinstall": "npx only-allow pnpm",
|
"preinstall": "npx only-allow pnpm",
|
||||||
@@ -27,13 +27,13 @@
|
|||||||
"@emotion/react": "^11.11.4",
|
"@emotion/react": "^11.11.4",
|
||||||
"@emotion/server": "^11.11.0",
|
"@emotion/server": "^11.11.0",
|
||||||
"@emotion/styled": "^11.11.5",
|
"@emotion/styled": "^11.11.5",
|
||||||
"@fontsource/inter": "^5.0.17",
|
"@fontsource/inter": "^5.0.21",
|
||||||
"@fontsource/roboto-mono": "^5.0.17",
|
"@fontsource/roboto-mono": "^5.0.20",
|
||||||
"@graphiql/react": "^0.22.3",
|
"@graphiql/react": "^0.22.3",
|
||||||
"@graphiql/toolkit": "^0.9.1",
|
"@graphiql/toolkit": "^0.9.1",
|
||||||
"@headlessui/react": "^1.7.18",
|
"@headlessui/react": "^1.7.18",
|
||||||
"@heroicons/react": "^1.0.6",
|
"@heroicons/react": "^1.0.6",
|
||||||
"@hookform/resolvers": "^3.3.4",
|
"@hookform/resolvers": "^3.9.0",
|
||||||
"@iarna/toml": "^2.2.5",
|
"@iarna/toml": "^2.2.5",
|
||||||
"@marsidev/react-turnstile": "^1.0.2",
|
"@marsidev/react-turnstile": "^1.0.2",
|
||||||
"@mui/base": "5.0.0-beta.31",
|
"@mui/base": "5.0.0-beta.31",
|
||||||
@@ -42,6 +42,19 @@
|
|||||||
"@mui/x-date-pickers": "^5.0.20",
|
"@mui/x-date-pickers": "^5.0.20",
|
||||||
"@nhost/nextjs": "workspace:*",
|
"@nhost/nextjs": "workspace:*",
|
||||||
"@nhost/react-apollo": "workspace:*",
|
"@nhost/react-apollo": "workspace:*",
|
||||||
|
"@radix-ui/react-alert-dialog": "^1.1.2",
|
||||||
|
"@radix-ui/react-checkbox": "^1.1.2",
|
||||||
|
"@radix-ui/react-dialog": "^1.1.1",
|
||||||
|
"@radix-ui/react-dropdown-menu": "^2.1.1",
|
||||||
|
"@radix-ui/react-hover-card": "^1.1.2",
|
||||||
|
"@radix-ui/react-label": "^2.1.0",
|
||||||
|
"@radix-ui/react-popover": "^1.1.1",
|
||||||
|
"@radix-ui/react-progress": "^1.1.0",
|
||||||
|
"@radix-ui/react-radio-group": "^1.2.0",
|
||||||
|
"@radix-ui/react-select": "^2.1.2",
|
||||||
|
"@radix-ui/react-separator": "^1.1.0",
|
||||||
|
"@radix-ui/react-slot": "^1.1.0",
|
||||||
|
"@radix-ui/react-tooltip": "^1.1.2",
|
||||||
"@segment/snippet": "^4.16.2",
|
"@segment/snippet": "^4.16.2",
|
||||||
"@stripe/react-stripe-js": "^2.6.2",
|
"@stripe/react-stripe-js": "^2.6.2",
|
||||||
"@stripe/stripe-js": "^1.54.2",
|
"@stripe/stripe-js": "^1.54.2",
|
||||||
@@ -55,8 +68,11 @@
|
|||||||
"@uiw/react-codemirror": "^4.21.25",
|
"@uiw/react-codemirror": "^4.21.25",
|
||||||
"analytics-node": "^6.2.0",
|
"analytics-node": "^6.2.0",
|
||||||
"bcryptjs": "^2.4.3",
|
"bcryptjs": "^2.4.3",
|
||||||
|
"class-variance-authority": "^0.7.0",
|
||||||
"clsx": "^1.2.1",
|
"clsx": "^1.2.1",
|
||||||
|
"cmdk": "1.0.0",
|
||||||
"date-fns": "^2.30.0",
|
"date-fns": "^2.30.0",
|
||||||
|
"dequal": "^2.0.3",
|
||||||
"framer-motion": "^10.18.0",
|
"framer-motion": "^10.18.0",
|
||||||
"generate-password": "^1.7.1",
|
"generate-password": "^1.7.1",
|
||||||
"graphiql": "^3.3.1",
|
"graphiql": "^3.3.1",
|
||||||
@@ -66,15 +82,19 @@
|
|||||||
"graphql-ws": "^5.16.0",
|
"graphql-ws": "^5.16.0",
|
||||||
"just-kebab-case": "^4.2.0",
|
"just-kebab-case": "^4.2.0",
|
||||||
"lodash.debounce": "^4.0.8",
|
"lodash.debounce": "^4.0.8",
|
||||||
|
"lucide-react": "^0.416.0",
|
||||||
"next": "^14.2.10",
|
"next": "^14.2.10",
|
||||||
|
"next-nprogress-bar": "^2.3.13",
|
||||||
"next-seo": "^6.5.0",
|
"next-seo": "^6.5.0",
|
||||||
|
"next-themes": "^0.3.0",
|
||||||
"node-pg-format": "^1.3.5",
|
"node-pg-format": "^1.3.5",
|
||||||
"pluralize": "^8.0.0",
|
"pluralize": "^8.0.0",
|
||||||
"react": "18.2.0",
|
"react": "18.2.0",
|
||||||
"react-children-utilities": "^2.10.0",
|
"react-children-utilities": "^2.10.0",
|
||||||
|
"react-complex-tree": "^2.4.5",
|
||||||
"react-dom": "18.2.0",
|
"react-dom": "18.2.0",
|
||||||
"react-error-boundary": "^4.0.13",
|
"react-error-boundary": "^4.0.13",
|
||||||
"react-hook-form": "^7.51.2",
|
"react-hook-form": "^7.53.0",
|
||||||
"react-hot-toast": "^2.4.1",
|
"react-hot-toast": "^2.4.1",
|
||||||
"react-intersection-observer": "^9.8.1",
|
"react-intersection-observer": "^9.8.1",
|
||||||
"react-is": "18.2.0",
|
"react-is": "18.2.0",
|
||||||
@@ -91,10 +111,13 @@
|
|||||||
"slugify": "^1.6.6",
|
"slugify": "^1.6.6",
|
||||||
"stripe": "^10.17.0",
|
"stripe": "^10.17.0",
|
||||||
"tailwind-merge": "^1.14.0",
|
"tailwind-merge": "^1.14.0",
|
||||||
|
"tailwindcss-animate": "^1.0.7",
|
||||||
"utility-types": "^3.11.0",
|
"utility-types": "^3.11.0",
|
||||||
|
"uuid": "^9.0.1",
|
||||||
"validator": "^13.11.0",
|
"validator": "^13.11.0",
|
||||||
"yup": "^1.4.0",
|
"yup": "^1.4.0",
|
||||||
"yup-password": "^0.2.2"
|
"yup-password": "^0.2.2",
|
||||||
|
"zod": "^3.23.8"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.24.3",
|
"@babel/core": "^7.24.3",
|
||||||
@@ -130,6 +153,7 @@
|
|||||||
"@types/react-table": "^7.7.20",
|
"@types/react-table": "^7.7.20",
|
||||||
"@types/shell-quote": "^1.7.5",
|
"@types/shell-quote": "^1.7.5",
|
||||||
"@types/testing-library__jest-dom": "^5.14.9",
|
"@types/testing-library__jest-dom": "^5.14.9",
|
||||||
|
"@types/uuid": "^9.0.8",
|
||||||
"@types/validator": "^13.11.9",
|
"@types/validator": "^13.11.9",
|
||||||
"@typescript-eslint/eslint-plugin": "^6.21.0",
|
"@typescript-eslint/eslint-plugin": "^6.21.0",
|
||||||
"@typescript-eslint/parser": "^6.21.0",
|
"@typescript-eslint/parser": "^6.21.0",
|
||||||
@@ -156,14 +180,14 @@
|
|||||||
"msw-storybook-addon": "^1.10.0",
|
"msw-storybook-addon": "^1.10.0",
|
||||||
"node-fetch": "^3.3.2",
|
"node-fetch": "^3.3.2",
|
||||||
"postcss": "^8.4.38",
|
"postcss": "^8.4.38",
|
||||||
"prettier": "^2.8.8",
|
"prettier": "^3.3.3",
|
||||||
"prettier-plugin-organize-imports": "^3.2.4",
|
"prettier-plugin-organize-imports": "^4.1.0",
|
||||||
"prettier-plugin-tailwindcss": "^0.4.1",
|
"prettier-plugin-tailwindcss": "^0.6.6",
|
||||||
"react-date-fns-hooks": "^0.9.4",
|
"react-date-fns-hooks": "^0.9.4",
|
||||||
"require-from-string": "^2.0.2",
|
"require-from-string": "^2.0.2",
|
||||||
"snake-case": "^3.0.4",
|
"snake-case": "^3.0.4",
|
||||||
"storybook-addon-next-router": "^4.0.2",
|
"storybook-addon-next-router": "^4.0.2",
|
||||||
"tailwindcss": "^3.4.3",
|
"tailwindcss": "^3.4.12",
|
||||||
"ts-node": "^10.9.2",
|
"ts-node": "^10.9.2",
|
||||||
"tsconfig-paths-webpack-plugin": "^4.1.0",
|
"tsconfig-paths-webpack-plugin": "^4.1.0",
|
||||||
"vite": "^5.4.6",
|
"vite": "^5.4.6",
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ module.exports = {
|
|||||||
endOfLine: 'auto',
|
endOfLine: 'auto',
|
||||||
semi: true,
|
semi: true,
|
||||||
plugins: [
|
plugins: [
|
||||||
require('prettier-plugin-organize-imports'),
|
'prettier-plugin-organize-imports',
|
||||||
require('prettier-plugin-tailwindcss'),
|
'prettier-plugin-tailwindcss'
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -291,7 +291,7 @@ function DialogProvider({ children }: PropsWithChildren<unknown>) {
|
|||||||
PaperProps={{
|
PaperProps={{
|
||||||
...drawerProps?.PaperProps,
|
...drawerProps?.PaperProps,
|
||||||
className: twMerge(
|
className: twMerge(
|
||||||
'max-w-2.5xl w-full',
|
'max-w-4xl w-full',
|
||||||
drawerProps?.PaperProps?.className,
|
drawerProps?.PaperProps?.className,
|
||||||
),
|
),
|
||||||
}}
|
}}
|
||||||
|
|||||||
@@ -5,8 +5,9 @@ import { Button } from '@/components/ui/v2/Button';
|
|||||||
import { ArrowSquareOutIcon } from '@/components/ui/v2/icons/ArrowSquareOutIcon';
|
import { ArrowSquareOutIcon } from '@/components/ui/v2/icons/ArrowSquareOutIcon';
|
||||||
import { Link } from '@/components/ui/v2/Link';
|
import { Link } from '@/components/ui/v2/Link';
|
||||||
import { Text } from '@/components/ui/v2/Text';
|
import { Text } from '@/components/ui/v2/Text';
|
||||||
import { ChangePlanModal } from '@/features/projects/common/components/ChangePlanModal';
|
import { TransferProjectDialog } from '@/features/orgs/components/common/TransferProjectDialog';
|
||||||
import { useIsCurrentUserOwner } from '@/features/projects/common/hooks/useIsCurrentUserOwner';
|
import { useIsCurrentUserOwner } from '@/features/orgs/projects/common/hooks/useIsCurrentUserOwner';
|
||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
import Image from 'next/image';
|
import Image from 'next/image';
|
||||||
import { type ReactNode } from 'react';
|
import { type ReactNode } from 'react';
|
||||||
@@ -20,22 +21,24 @@ export default function UpgradeToProBanner({
|
|||||||
title,
|
title,
|
||||||
description,
|
description,
|
||||||
}: UpgradeToProBannerProps) {
|
}: UpgradeToProBannerProps) {
|
||||||
const { openDialog, openAlertDialog } = useDialog();
|
|
||||||
const isOwner = useIsCurrentUserOwner();
|
const isOwner = useIsCurrentUserOwner();
|
||||||
|
const { openAlertDialog } = useDialog();
|
||||||
|
const [transferProjectDialogOpen, setTransferProjectDialogOpen] =
|
||||||
|
useState(false);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box
|
<Box
|
||||||
sx={{ backgroundColor: 'primary.light' }}
|
sx={{ backgroundColor: 'primary.light' }}
|
||||||
className="flex flex-col justify-between p-4 space-y-4 rounded-md lg:flex-row lg:items-center lg:space-y-0"
|
className="flex flex-col justify-between space-y-4 rounded-md p-4 lg:flex-row lg:items-center lg:space-y-0"
|
||||||
>
|
>
|
||||||
<div className="flex flex-col justify-between space-y-4">
|
<div className="flex flex-col justify-between space-y-4">
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<div className="flex flex-col space-y-2 xs:flex-row xs:space-y-0 xs:space-x-2">
|
<div className="flex flex-col space-y-2 xs:flex-row xs:space-x-2 xs:space-y-0">
|
||||||
<Text>Available with</Text>
|
<Text>Available with</Text>
|
||||||
<div className="flex flex-row space-x-2">
|
<div className="flex flex-row space-x-2">
|
||||||
<NhostIcon />
|
<NhostIcon />
|
||||||
<Text sx={{ color: 'primary.main' }} className="font-semibold">
|
<Text sx={{ color: 'primary.main' }} className="font-semibold">
|
||||||
Nhost Pro
|
Nhost Pro & Team
|
||||||
</Text>
|
</Text>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -47,47 +50,48 @@ export default function UpgradeToProBanner({
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex flex-col space-y-2 lg:flex-row lg:items-center lg:space-y-0 lg:space-x-2">
|
<div className="flex flex-col space-y-2 lg:flex-row lg:items-center lg:space-y-0 lg:space-x-2 gap-2">
|
||||||
<Button
|
<Button
|
||||||
className="rounded-md"
|
className="lg:w-auto max-w-xs"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
if (isOwner) {
|
if (isOwner) {
|
||||||
openDialog({
|
setTransferProjectDialogOpen(true);
|
||||||
component: <ChangePlanModal />,
|
|
||||||
props: {
|
|
||||||
PaperProps: { className: 'p-0 max-w-xl w-full' },
|
|
||||||
},
|
|
||||||
});
|
|
||||||
} else {
|
} else {
|
||||||
openAlertDialog({
|
openAlertDialog({
|
||||||
title: "You can't upgrade this project",
|
title: "You can't migrate this project",
|
||||||
payload: (
|
payload: (
|
||||||
<Text variant="subtitle1" component="span">
|
<Text variant="subtitle1" component="span">
|
||||||
Ask an owner of this workspace to upgrade the project.
|
Ask an owner of this organization to migrate the project.
|
||||||
</Text>
|
</Text>
|
||||||
),
|
),
|
||||||
props: {
|
props: {
|
||||||
secondaryButtonText: 'I understand',
|
secondaryButtonText: 'I understand',
|
||||||
hidePrimaryAction: true,
|
hidePrimaryAction: true,
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Upgrade to Pro
|
Transfer Project
|
||||||
</Button>
|
</Button>
|
||||||
|
<TransferProjectDialog
|
||||||
|
open={transferProjectDialogOpen}
|
||||||
|
setOpen={setTransferProjectDialogOpen}
|
||||||
|
/>
|
||||||
<Link
|
<Link
|
||||||
href="https://nhost.io/pricing"
|
href="https://nhost.io/pricing"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
underline="hover"
|
underline="hover"
|
||||||
className="font-medium text-center"
|
className="text-center font-medium"
|
||||||
sx={{
|
sx={{
|
||||||
color: 'text.secondary',
|
color: 'text.secondary',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
See all features
|
See all features
|
||||||
<ArrowSquareOutIcon className="w-4 h-4 ml-1" />
|
<ArrowSquareOutIcon className="ml-1 h-4 w-4" />
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -97,7 +101,7 @@ export default function UpgradeToProBanner({
|
|||||||
width={300}
|
width={300}
|
||||||
height={140}
|
height={140}
|
||||||
objectFit="contain"
|
objectFit="contain"
|
||||||
alt='Upgrade to Pro illustration'
|
alt="Upgrade to Pro illustration"
|
||||||
/>
|
/>
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
|
|||||||
1
dashboard/src/components/common/useMediaQuery/index.ts
Normal file
1
dashboard/src/components/common/useMediaQuery/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export { default as useMediaQuery } from './useMediaQuery';
|
||||||
@@ -0,0 +1,40 @@
|
|||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import resolveConfig from 'tailwindcss/resolveConfig';
|
||||||
|
// eslint-disable-next-line no-restricted-imports
|
||||||
|
import tailwindConfig from '../../../../tailwind.config';
|
||||||
|
|
||||||
|
const fullConfig = resolveConfig(tailwindConfig);
|
||||||
|
|
||||||
|
const {
|
||||||
|
theme: { screens },
|
||||||
|
} = fullConfig;
|
||||||
|
|
||||||
|
const useMediaQuery = (query: keyof typeof screens): boolean => {
|
||||||
|
const [isMatch, setMatch] = useState<boolean>(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Ensure this runs only on the client side
|
||||||
|
if (typeof window === 'undefined') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const mediaQuery = `(min-width: ${screens[query]})`;
|
||||||
|
const matchQueryList = window.matchMedia(mediaQuery);
|
||||||
|
|
||||||
|
const onChange = (e: MediaQueryListEvent) => setMatch(e.matches);
|
||||||
|
|
||||||
|
// Set initial value
|
||||||
|
setMatch(matchQueryList.matches);
|
||||||
|
|
||||||
|
// Listen for changes
|
||||||
|
matchQueryList.addEventListener('change', onChange);
|
||||||
|
|
||||||
|
// Clean up the listener on unmount
|
||||||
|
// eslint-disable-next-line consistent-return
|
||||||
|
return () => matchQueryList.removeEventListener('change', onChange);
|
||||||
|
}, [query]);
|
||||||
|
|
||||||
|
return isMatch;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useMediaQuery;
|
||||||
@@ -3,19 +3,29 @@ import type { BaseLayoutProps } from '@/components/layout/BaseLayout';
|
|||||||
import { BaseLayout } from '@/components/layout/BaseLayout';
|
import { BaseLayout } from '@/components/layout/BaseLayout';
|
||||||
import { Container } from '@/components/layout/Container';
|
import { Container } from '@/components/layout/Container';
|
||||||
import { Header } from '@/components/layout/Header';
|
import { Header } from '@/components/layout/Header';
|
||||||
|
import { MainNav } from '@/components/layout/MainNav';
|
||||||
|
import { useTreeNavState } from '@/components/layout/MainNav/TreeNavStateContext';
|
||||||
import { HighlightedText } from '@/components/presentational/HighlightedText';
|
import { HighlightedText } from '@/components/presentational/HighlightedText';
|
||||||
import { RetryableErrorBoundary } from '@/components/presentational/RetryableErrorBoundary';
|
import { RetryableErrorBoundary } from '@/components/presentational/RetryableErrorBoundary';
|
||||||
import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
|
import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
|
||||||
import { Link } from '@/components/ui/v2/Link';
|
import { Link } from '@/components/ui/v2/Link';
|
||||||
import { Text } from '@/components/ui/v2/Text';
|
import { Text } from '@/components/ui/v2/Text';
|
||||||
import { useIsHealthy } from '@/features/projects/common/hooks/useIsHealthy';
|
|
||||||
import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
|
import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
|
||||||
import { useAuthenticationStatus } from '@nhost/nextjs';
|
import { useAuthenticationStatus } from '@nhost/nextjs';
|
||||||
|
|
||||||
|
import { useMediaQuery } from '@/components/common/useMediaQuery';
|
||||||
|
import PinnedMainNav from '@/components/layout/MainNav/PinnedMainNav';
|
||||||
|
import { OrgStatus } from '@/features/orgs/components/OrgStatus';
|
||||||
|
import { useIsHealthy } from '@/features/orgs/projects/common/hooks/useIsHealthy';
|
||||||
|
import { useNotFoundRedirect } from '@/features/projects/common/hooks/useNotFoundRedirect';
|
||||||
import Image from 'next/image';
|
import Image from 'next/image';
|
||||||
import { useRouter } from 'next/router';
|
import { useRouter } from 'next/router';
|
||||||
import type { DetailedHTMLProps, HTMLProps } from 'react';
|
import {
|
||||||
import { useEffect } from 'react';
|
useEffect,
|
||||||
import { twMerge } from 'tailwind-merge';
|
useState,
|
||||||
|
type DetailedHTMLProps,
|
||||||
|
type HTMLProps,
|
||||||
|
} from 'react';
|
||||||
|
|
||||||
export interface AuthenticatedLayoutProps extends BaseLayoutProps {
|
export interface AuthenticatedLayoutProps extends BaseLayoutProps {
|
||||||
/**
|
/**
|
||||||
@@ -29,16 +39,18 @@ export interface AuthenticatedLayoutProps extends BaseLayoutProps {
|
|||||||
|
|
||||||
export default function AuthenticatedLayout({
|
export default function AuthenticatedLayout({
|
||||||
children,
|
children,
|
||||||
contentContainerProps: {
|
|
||||||
className: contentContainerClassName,
|
|
||||||
...contentContainerProps
|
|
||||||
} = {},
|
|
||||||
...props
|
...props
|
||||||
}: AuthenticatedLayoutProps) {
|
}: AuthenticatedLayoutProps) {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const isPlatform = useIsPlatform();
|
const isPlatform = useIsPlatform();
|
||||||
|
const isMdOrLarger = useMediaQuery('md');
|
||||||
|
|
||||||
const { isAuthenticated, isLoading } = useAuthenticationStatus();
|
const { isAuthenticated, isLoading } = useAuthenticationStatus();
|
||||||
const isHealthy = useIsHealthy();
|
const isHealthy = useIsHealthy();
|
||||||
|
const [mainNavContainer, setMainNavContainer] = useState(null);
|
||||||
|
const { mainNavPinned } = useTreeNavState();
|
||||||
|
|
||||||
|
useNotFoundRedirect();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!isPlatform || isLoading || isAuthenticated) {
|
if (!isPlatform || isLoading || isAuthenticated) {
|
||||||
@@ -54,13 +66,13 @@ export default function AuthenticatedLayout({
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (
|
if (
|
||||||
router.query.workspaceSlug === 'local' &&
|
router.query.orgSlug === 'local' &&
|
||||||
router.query.appSlug === 'local'
|
router.query.appSubdomain === 'local'
|
||||||
) {
|
) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
router.push('/local/local');
|
router.push('/orgs/local/projects/local');
|
||||||
}, [isPlatform, router]);
|
}, [isPlatform, router]);
|
||||||
|
|
||||||
if (isPlatform && isLoading) {
|
if (isPlatform && isLoading) {
|
||||||
@@ -78,7 +90,7 @@ export default function AuthenticatedLayout({
|
|||||||
|
|
||||||
<Container
|
<Container
|
||||||
rootClassName="h-full"
|
rootClassName="h-full"
|
||||||
className="my-12 grid max-w-md grid-flow-row justify-center gap-2 text-center"
|
className="grid justify-center max-w-md grid-flow-row gap-2 my-12 text-center"
|
||||||
>
|
>
|
||||||
<div className="mx-auto">
|
<div className="mx-auto">
|
||||||
<Image
|
<Image
|
||||||
@@ -115,22 +127,36 @@ export default function AuthenticatedLayout({
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<BaseLayout className="flex h-full flex-col" {...props}>
|
<BaseLayout className="flex flex-col h-full" {...props}>
|
||||||
<Header className="flex max-h-[59px] flex-auto" />
|
<Header className="flex py-1" />
|
||||||
|
|
||||||
<InviteNotification />
|
<div
|
||||||
|
className="relative flex flex-row h-full overflow-x-hidden"
|
||||||
|
ref={setMainNavContainer}
|
||||||
|
>
|
||||||
|
{mainNavPinned && isMdOrLarger && <PinnedMainNav />}
|
||||||
|
|
||||||
<RetryableErrorBoundary errorMessageProps={{ className: 'pt-20' }}>
|
<div className="relative flex flex-row w-full h-full bg-accent">
|
||||||
<div
|
{(!mainNavPinned || !isMdOrLarger) && (
|
||||||
className={twMerge(
|
<div className="flex justify-center w-6 h-full">
|
||||||
'relative flex flex-auto overflow-x-hidden',
|
<MainNav container={mainNavContainer} />
|
||||||
contentContainerClassName,
|
</div>
|
||||||
)}
|
)}
|
||||||
{...contentContainerProps}
|
|
||||||
>
|
<RetryableErrorBoundary
|
||||||
{children}
|
errorMessageProps={{
|
||||||
|
className: 'flex flex-col items-center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="flex flex-col w-full h-full">
|
||||||
|
<OrgStatus />
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</RetryableErrorBoundary>
|
||||||
|
|
||||||
|
<InviteNotification />
|
||||||
</div>
|
</div>
|
||||||
</RetryableErrorBoundary>
|
</div>
|
||||||
</BaseLayout>
|
</BaseLayout>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -16,9 +16,9 @@ export default function Container({
|
|||||||
...props
|
...props
|
||||||
}: ContainerProps) {
|
}: ContainerProps) {
|
||||||
return (
|
return (
|
||||||
<Box className={twMerge('mx-auto w-full', rootClassName)}>
|
<Box className={twMerge('mx-auto w-full', rootClassName)} {...props}>
|
||||||
<Box
|
<Box
|
||||||
className={twMerge('mx-auto max-w-7xl px-5 pt-6 pb-20', className)}
|
className={twMerge('mx-auto max-w-7xl px-5 py-4', className)}
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
|
|||||||
109
dashboard/src/components/layout/Header/BreadcrumbComboBox.tsx
Normal file
109
dashboard/src/components/layout/Header/BreadcrumbComboBox.tsx
Normal file
@@ -0,0 +1,109 @@
|
|||||||
|
import { Button } from '@/components/ui/v3/button';
|
||||||
|
import {
|
||||||
|
Command,
|
||||||
|
CommandEmpty,
|
||||||
|
CommandGroup,
|
||||||
|
CommandInput,
|
||||||
|
CommandItem,
|
||||||
|
CommandList,
|
||||||
|
} from '@/components/ui/v3/command';
|
||||||
|
import {
|
||||||
|
Popover,
|
||||||
|
PopoverContent,
|
||||||
|
PopoverTrigger,
|
||||||
|
} from '@/components/ui/v3/popover';
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
import { Check, ChevronsUpDown } from 'lucide-react';
|
||||||
|
import { useState, type ReactNode } from 'react';
|
||||||
|
|
||||||
|
type BreadCrumbComboBoxItem<T> = {
|
||||||
|
label: string | ReactNode;
|
||||||
|
value: string | T;
|
||||||
|
};
|
||||||
|
|
||||||
|
interface BreadCrumbComboBoxProps<T> {
|
||||||
|
selectedValue?: T;
|
||||||
|
options: BreadCrumbComboBoxItem<T>[];
|
||||||
|
renderItem?: (item: T) => ReactNode;
|
||||||
|
onChange?: (item: BreadCrumbComboBoxItem<T>) => void;
|
||||||
|
filter?: (value: string, search: string) => number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function BreadCrumbComboBox<T>({
|
||||||
|
selectedValue,
|
||||||
|
options,
|
||||||
|
renderItem,
|
||||||
|
onChange,
|
||||||
|
filter,
|
||||||
|
}: BreadCrumbComboBoxProps<T>) {
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const [selectedItem, setSelectedItem] =
|
||||||
|
useState<BreadCrumbComboBoxItem<T> | null>(
|
||||||
|
options.find((option) => option.value === selectedValue) || null,
|
||||||
|
);
|
||||||
|
|
||||||
|
const renderSelectedItem = (item: BreadCrumbComboBoxItem<T>) => {
|
||||||
|
if (typeof item.value === 'string') {
|
||||||
|
return typeof item.label === 'string' ? (
|
||||||
|
<span className="text-foreground">{item.label}</span>
|
||||||
|
) : (
|
||||||
|
item.label
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return renderItem ? renderItem(item.value) : null;
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Popover open={open} onOpenChange={setOpen}>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="justify-start text-foreground"
|
||||||
|
>
|
||||||
|
<div className="flex flex-row items-center justify-center gap-1">
|
||||||
|
{selectedItem && renderSelectedItem(selectedItem)}
|
||||||
|
<ChevronsUpDown className="h-5 w-5 text-muted-foreground" />
|
||||||
|
</div>
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent className="p-0" side="bottom" align="start">
|
||||||
|
<Command filter={filter}>
|
||||||
|
<CommandInput placeholder="Search..." autoFocus />
|
||||||
|
<CommandList>
|
||||||
|
<CommandEmpty>No results found.</CommandEmpty>
|
||||||
|
<CommandGroup>
|
||||||
|
{options.map((option, index) => (
|
||||||
|
<CommandItem
|
||||||
|
key={`${
|
||||||
|
typeof option.value === 'string' ? option.value : index
|
||||||
|
}`}
|
||||||
|
value={
|
||||||
|
typeof option.value === 'string' ? option.value : `${index}`
|
||||||
|
}
|
||||||
|
onSelect={() => {
|
||||||
|
setSelectedItem(option);
|
||||||
|
setOpen(false);
|
||||||
|
onChange?.(option);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Check
|
||||||
|
className={cn(
|
||||||
|
'mr-2 h-4 w-4',
|
||||||
|
selectedItem?.value === option.value
|
||||||
|
? 'opacity-100'
|
||||||
|
: 'opacity-0',
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
{typeof option.value === 'string'
|
||||||
|
? option.label
|
||||||
|
: renderItem && renderItem(option.value)}
|
||||||
|
</CommandItem>
|
||||||
|
))}
|
||||||
|
</CommandGroup>
|
||||||
|
</CommandList>
|
||||||
|
</Command>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
);
|
||||||
|
}
|
||||||
91
dashboard/src/components/layout/Header/BreadcrumbNav.tsx
Normal file
91
dashboard/src/components/layout/Header/BreadcrumbNav.tsx
Normal file
@@ -0,0 +1,91 @@
|
|||||||
|
import { Slash } from 'lucide-react';
|
||||||
|
import { useMemo } from 'react';
|
||||||
|
|
||||||
|
import {
|
||||||
|
Breadcrumb,
|
||||||
|
BreadcrumbItem,
|
||||||
|
BreadcrumbList,
|
||||||
|
BreadcrumbSeparator,
|
||||||
|
} from '@/components/ui/v3/breadcrumb';
|
||||||
|
import { useRouter } from 'next/router';
|
||||||
|
import OrgPagesComboBox from './OrgPagesComboBox';
|
||||||
|
import OrgsComboBox from './OrgsComboBox';
|
||||||
|
import ProjectPagesComboBox from './ProjectPagesComboBox';
|
||||||
|
import ProjectsComboBox from './ProjectsComboBox';
|
||||||
|
import ProjectSettingsPagesComboBox from './ProjectSettingsPagesComboBox';
|
||||||
|
|
||||||
|
export default function BreadcrumbNav() {
|
||||||
|
const { query, asPath, route } = useRouter();
|
||||||
|
|
||||||
|
// Extract orgSlug and appSubdomain from router.query
|
||||||
|
const { appSubdomain, workspaceSlug } = query;
|
||||||
|
|
||||||
|
// Extract path segments from the URL
|
||||||
|
const pathSegments = useMemo(() => asPath.split('/'), [asPath]);
|
||||||
|
|
||||||
|
// Identify project and settings pages based on the URL pattern
|
||||||
|
const projectPage = pathSegments[3] || null;
|
||||||
|
const isSettingsPage = pathSegments[5] === 'settings';
|
||||||
|
|
||||||
|
const showBreadcrumbs =
|
||||||
|
!workspaceSlug && !['/', '/orgs/verify'].includes(route);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Breadcrumb className="mt-2 flex w-full flex-row flex-nowrap overflow-x-auto lg:mt-0 lg:overflow-visible">
|
||||||
|
<BreadcrumbList className="flex-nowrap">
|
||||||
|
<BreadcrumbSeparator>
|
||||||
|
<Slash strokeWidth={3.5} className="text-muted-foreground/50" />
|
||||||
|
</BreadcrumbSeparator>
|
||||||
|
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<OrgsComboBox />
|
||||||
|
</BreadcrumbItem>
|
||||||
|
|
||||||
|
{showBreadcrumbs && (
|
||||||
|
<>
|
||||||
|
<BreadcrumbSeparator>
|
||||||
|
<Slash strokeWidth={3.5} className="text-muted-foreground/50" />
|
||||||
|
</BreadcrumbSeparator>
|
||||||
|
|
||||||
|
{projectPage && <OrgPagesComboBox />}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{showBreadcrumbs && appSubdomain && (
|
||||||
|
<>
|
||||||
|
<BreadcrumbSeparator>
|
||||||
|
<Slash strokeWidth={3.5} className="text-muted-foreground/50" />
|
||||||
|
</BreadcrumbSeparator>
|
||||||
|
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<ProjectsComboBox />
|
||||||
|
</BreadcrumbItem>
|
||||||
|
|
||||||
|
<BreadcrumbSeparator>
|
||||||
|
<Slash strokeWidth={3.5} className="text-muted-foreground/50" />
|
||||||
|
</BreadcrumbSeparator>
|
||||||
|
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<ProjectPagesComboBox />
|
||||||
|
</BreadcrumbItem>
|
||||||
|
|
||||||
|
{isSettingsPage && (
|
||||||
|
<>
|
||||||
|
<BreadcrumbSeparator>
|
||||||
|
<Slash
|
||||||
|
strokeWidth={3.5}
|
||||||
|
className="text-muted-foreground/50"
|
||||||
|
/>
|
||||||
|
</BreadcrumbSeparator>
|
||||||
|
|
||||||
|
<BreadcrumbItem>
|
||||||
|
<ProjectSettingsPagesComboBox />
|
||||||
|
</BreadcrumbItem>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</BreadcrumbList>
|
||||||
|
</Breadcrumb>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,24 +1,22 @@
|
|||||||
import { useDialog } from '@/components/common/DialogProvider';
|
import { useDialog } from '@/components/common/DialogProvider';
|
||||||
import { NavLink } from '@/components/common/NavLink';
|
import { NavLink } from '@/components/common/NavLink';
|
||||||
import { AccountMenu } from '@/components/layout/AccountMenu';
|
import { AccountMenu } from '@/components/layout/AccountMenu';
|
||||||
import { Breadcrumbs } from '@/components/layout/Breadcrumbs';
|
|
||||||
import { LocalAccountMenu } from '@/components/layout/LocalAccountMenu';
|
import { LocalAccountMenu } from '@/components/layout/LocalAccountMenu';
|
||||||
import { MobileNav } from '@/components/layout/MobileNav';
|
import { MobileNav } from '@/components/layout/MobileNav';
|
||||||
import { Logo } from '@/components/presentational/Logo';
|
import { Logo } from '@/components/presentational/Logo';
|
||||||
import { Box } from '@/components/ui/v2/Box';
|
import { Box } from '@/components/ui/v2/Box';
|
||||||
import { Button } from '@/components/ui/v2/Button';
|
import { Button } from '@/components/ui/v2/Button';
|
||||||
import { Chip } from '@/components/ui/v2/Chip';
|
|
||||||
import { GraphiteIcon } from '@/components/ui/v2/icons/GraphiteIcon';
|
import { GraphiteIcon } from '@/components/ui/v2/icons/GraphiteIcon';
|
||||||
import { DevAssistant } from '@/features/ai/DevAssistant';
|
import { DevAssistant } from '@/features/ai/DevAssistant';
|
||||||
import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
|
import { AnnouncementsTray } from '@/features/orgs/components/members/components/AnnouncementsTray';
|
||||||
|
import { NotificationsTray } from '@/features/orgs/components/members/components/NotificationsTray';
|
||||||
|
import { useProject } from '@/features/orgs/projects/hooks/useProject';
|
||||||
import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
|
import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
|
||||||
import { ApplicationStatus } from '@/types/application';
|
|
||||||
import { getToastStyleProps } from '@/utils/constants/settings';
|
import { getToastStyleProps } from '@/utils/constants/settings';
|
||||||
import { useRouter } from 'next/router';
|
|
||||||
import type { DetailedHTMLProps, HTMLProps, PropsWithoutRef } from 'react';
|
import type { DetailedHTMLProps, HTMLProps, PropsWithoutRef } from 'react';
|
||||||
import { useEffect } from 'react';
|
|
||||||
import { toast } from 'react-hot-toast';
|
import { toast } from 'react-hot-toast';
|
||||||
import { twMerge } from 'tailwind-merge';
|
import { twMerge } from 'tailwind-merge';
|
||||||
|
import BreadcrumbNav from './BreadcrumbNav';
|
||||||
|
|
||||||
export interface HeaderProps
|
export interface HeaderProps
|
||||||
extends PropsWithoutRef<
|
extends PropsWithoutRef<
|
||||||
@@ -26,39 +24,15 @@ export interface HeaderProps
|
|||||||
> {}
|
> {}
|
||||||
|
|
||||||
export default function Header({ className, ...props }: HeaderProps) {
|
export default function Header({ className, ...props }: HeaderProps) {
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
const isPlatform = useIsPlatform();
|
const isPlatform = useIsPlatform();
|
||||||
|
|
||||||
const { openDrawer } = useDialog();
|
const { openDrawer } = useDialog();
|
||||||
|
|
||||||
const { currentProject, refetch: refetchProject } =
|
const { project } = useProject();
|
||||||
useCurrentWorkspaceAndProject();
|
|
||||||
|
|
||||||
const isProjectUpdating =
|
|
||||||
currentProject?.appStates[0]?.stateId === ApplicationStatus.Updating;
|
|
||||||
|
|
||||||
const isProjectMigratingDatabase =
|
|
||||||
currentProject?.appStates[0]?.stateId === ApplicationStatus.Migrating;
|
|
||||||
|
|
||||||
// Poll for project updates
|
|
||||||
useEffect(() => {
|
|
||||||
if (!isProjectUpdating && !isProjectMigratingDatabase) {
|
|
||||||
return () => {};
|
|
||||||
}
|
|
||||||
|
|
||||||
const interval = setInterval(async () => {
|
|
||||||
await refetchProject();
|
|
||||||
}, 5000);
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
clearInterval(interval);
|
|
||||||
};
|
|
||||||
}, [isProjectUpdating, isProjectMigratingDatabase, refetchProject]);
|
|
||||||
|
|
||||||
const openDevAssistant = () => {
|
const openDevAssistant = () => {
|
||||||
// The dev assistant can be only answer questions related to a particular project
|
// The dev assistant can be only answer questions related to a particular project
|
||||||
if (!currentProject) {
|
if (!project) {
|
||||||
toast.error('You need to be inside a project to open the Assistant', {
|
toast.error('You need to be inside a project to open the Assistant', {
|
||||||
style: getToastStyleProps().style,
|
style: getToastStyleProps().style,
|
||||||
...getToastStyleProps().error,
|
...getToastStyleProps().error,
|
||||||
@@ -77,43 +51,32 @@ export default function Header({ className, ...props }: HeaderProps) {
|
|||||||
<Box
|
<Box
|
||||||
component="header"
|
component="header"
|
||||||
className={twMerge(
|
className={twMerge(
|
||||||
'z-40 grid w-full transform-gpu grid-flow-col items-center justify-between gap-2 border-b-1 px-4 py-3',
|
'relative z-40 grid w-full transform-gpu grid-flow-col items-center justify-between gap-2 border-b px-4',
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
sx={{ backgroundColor: 'background.paper' }}
|
sx={{ backgroundColor: 'background.paper' }}
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
<div className="grid grid-flow-col items-center gap-3">
|
<div className="w-6 h-6 mr-2">
|
||||||
<NavLink href="/" className="w-12">
|
<Logo className="w-6 h-6 mx-auto cursor-pointer" />
|
||||||
<Logo className="mx-auto cursor-pointer" />
|
|
||||||
</NavLink>
|
|
||||||
|
|
||||||
{(router.query.workspaceSlug || router.query.appSlug) && (
|
|
||||||
<Breadcrumbs aria-label="Workspace breadcrumbs" />
|
|
||||||
)}
|
|
||||||
|
|
||||||
{isProjectUpdating && (
|
|
||||||
<Chip size="small" label="Updating" color="warning" />
|
|
||||||
)}
|
|
||||||
{isProjectMigratingDatabase && (
|
|
||||||
<Chip
|
|
||||||
size="small"
|
|
||||||
label="Upgrading Postgres version"
|
|
||||||
color="warning"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="hidden grid-flow-col items-center gap-2 sm:grid">
|
<BreadcrumbNav />
|
||||||
|
|
||||||
|
<div className="items-center hidden grid-flow-col gap-1 sm:grid">
|
||||||
<Button className="rounded-full" onClick={openDevAssistant}>
|
<Button className="rounded-full" onClick={openDevAssistant}>
|
||||||
<GraphiteIcon />
|
<GraphiteIcon className="w-4 h-4" />
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
|
<NotificationsTray />
|
||||||
|
|
||||||
|
<AnnouncementsTray />
|
||||||
|
|
||||||
{isPlatform && (
|
{isPlatform && (
|
||||||
<NavLink
|
<NavLink
|
||||||
underline="none"
|
underline="none"
|
||||||
href="/support"
|
href="/support"
|
||||||
className="mr-2 rounded-md px-2.5 py-1.5 text-sm motion-safe:transition-colors"
|
className="mr-1 rounded-md px-2.5 py-1.5 text-sm motion-safe:transition-colors"
|
||||||
sx={{
|
sx={{
|
||||||
color: 'text.primary',
|
color: 'text.primary',
|
||||||
'&:hover': { backgroundColor: 'grey.200' },
|
'&:hover': { backgroundColor: 'grey.200' },
|
||||||
|
|||||||
116
dashboard/src/components/layout/Header/OrgPagesComboBox.tsx
Normal file
116
dashboard/src/components/layout/Header/OrgPagesComboBox.tsx
Normal file
@@ -0,0 +1,116 @@
|
|||||||
|
import { Button } from '@/components/ui/v3/button';
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
|
import {
|
||||||
|
Command,
|
||||||
|
CommandEmpty,
|
||||||
|
CommandGroup,
|
||||||
|
CommandInput,
|
||||||
|
CommandItem,
|
||||||
|
CommandList,
|
||||||
|
} from '@/components/ui/v3/command';
|
||||||
|
|
||||||
|
import { useRouter } from 'next/router';
|
||||||
|
|
||||||
|
import {
|
||||||
|
Popover,
|
||||||
|
PopoverContent,
|
||||||
|
PopoverTrigger,
|
||||||
|
} from '@/components/ui/v3/popover';
|
||||||
|
|
||||||
|
import { Check, ChevronsUpDown } from 'lucide-react';
|
||||||
|
import { useEffect, useMemo, useState } from 'react';
|
||||||
|
|
||||||
|
type Option = {
|
||||||
|
value: string;
|
||||||
|
label: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
const orgPages = [
|
||||||
|
{ label: 'Settings', value: 'settings' },
|
||||||
|
{ label: 'Projects', value: 'projects' },
|
||||||
|
{ label: 'Members', value: 'members' },
|
||||||
|
{ label: 'Billing', value: 'billing' },
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function OrgPagesComboBox() {
|
||||||
|
const {
|
||||||
|
query: { orgSlug },
|
||||||
|
push,
|
||||||
|
asPath,
|
||||||
|
} = useRouter();
|
||||||
|
|
||||||
|
const pathSegments = useMemo(() => asPath.split('/'), [asPath]);
|
||||||
|
const orgPageFromUrl = pathSegments[3] || null;
|
||||||
|
|
||||||
|
const selectedOrgPageFromUrl = orgPages.find(
|
||||||
|
(item) => item.value === orgPageFromUrl,
|
||||||
|
);
|
||||||
|
|
||||||
|
const [selectedOrgPage, setSelectedOrgPage] = useState<Option | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (selectedOrgPageFromUrl) {
|
||||||
|
setSelectedOrgPage(selectedOrgPageFromUrl);
|
||||||
|
}
|
||||||
|
}, [selectedOrgPageFromUrl]);
|
||||||
|
|
||||||
|
const options: Option[] = orgPages.map((page) => ({
|
||||||
|
label: page.label,
|
||||||
|
value: page.value,
|
||||||
|
}));
|
||||||
|
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Popover open={open} onOpenChange={setOpen}>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="justify-start gap-2 bg-background text-foreground hover:bg-accent dark:hover:bg-muted"
|
||||||
|
>
|
||||||
|
{selectedOrgPage ? (
|
||||||
|
<div>{selectedOrgPage.label}</div>
|
||||||
|
) : (
|
||||||
|
<>Select a page</>
|
||||||
|
)}
|
||||||
|
<ChevronsUpDown className="w-5 h-5 text-muted-foreground" />
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent className="p-0" side="bottom" align="start">
|
||||||
|
<Command>
|
||||||
|
<CommandInput placeholder="Select a page..." />
|
||||||
|
<CommandList>
|
||||||
|
<CommandEmpty>No results found.</CommandEmpty>
|
||||||
|
<CommandGroup>
|
||||||
|
{options.map((option) => (
|
||||||
|
<CommandItem
|
||||||
|
key={option.value}
|
||||||
|
value={option.label}
|
||||||
|
onSelect={() => {
|
||||||
|
setSelectedOrgPage(option);
|
||||||
|
setOpen(false);
|
||||||
|
push(`/orgs/${orgSlug}/${option.value}`);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Check
|
||||||
|
className={cn(
|
||||||
|
'mr-2 h-4 w-4',
|
||||||
|
selectedOrgPage?.value === option.value
|
||||||
|
? 'opacity-100'
|
||||||
|
: 'opacity-0',
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<div className="flex flex-row items-center gap-2">
|
||||||
|
<span className="truncate max-w-52">{option.label}</span>
|
||||||
|
</div>
|
||||||
|
</CommandItem>
|
||||||
|
))}
|
||||||
|
</CommandGroup>
|
||||||
|
</CommandList>
|
||||||
|
</Command>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
);
|
||||||
|
}
|
||||||
210
dashboard/src/components/layout/Header/OrgsComboBox.tsx
Normal file
210
dashboard/src/components/layout/Header/OrgsComboBox.tsx
Normal file
@@ -0,0 +1,210 @@
|
|||||||
|
import { Badge } from '@/components/ui/v3/badge';
|
||||||
|
import { Button } from '@/components/ui/v3/button';
|
||||||
|
import {
|
||||||
|
Command,
|
||||||
|
CommandEmpty,
|
||||||
|
CommandGroup,
|
||||||
|
CommandInput,
|
||||||
|
CommandItem,
|
||||||
|
CommandList,
|
||||||
|
CommandSeparator,
|
||||||
|
} from '@/components/ui/v3/command';
|
||||||
|
import {
|
||||||
|
Popover,
|
||||||
|
PopoverContent,
|
||||||
|
PopoverTrigger,
|
||||||
|
} from '@/components/ui/v3/popover';
|
||||||
|
import { useIsPlatform } from '@/features/orgs/projects/common/hooks/useIsPlatform';
|
||||||
|
import { useOrgs } from '@/features/orgs/projects/hooks/useOrgs';
|
||||||
|
import { useWorkspaces } from '@/features/orgs/projects/hooks/useWorkspaces';
|
||||||
|
import { useSSRLocalStorage } from '@/hooks/useSSRLocalStorage';
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
import { Check, ChevronsUpDown } from 'lucide-react';
|
||||||
|
import { useRouter } from 'next/router';
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
|
||||||
|
type Option = {
|
||||||
|
value: string;
|
||||||
|
label: string;
|
||||||
|
plan: string;
|
||||||
|
type: 'organization' | 'workspace';
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function OrgsComboBox() {
|
||||||
|
const { orgs } = useOrgs();
|
||||||
|
const isPlatform = useIsPlatform();
|
||||||
|
const { workspaces } = useWorkspaces();
|
||||||
|
const [, setLastSlug] = useSSRLocalStorage('slug', null);
|
||||||
|
|
||||||
|
const {
|
||||||
|
query: { orgSlug, workspaceSlug },
|
||||||
|
push,
|
||||||
|
} = useRouter();
|
||||||
|
|
||||||
|
const selectedOrgFromUrl =
|
||||||
|
Boolean(orgSlug) && orgs.find((item) => item.slug === orgSlug);
|
||||||
|
const selectedWorkspaceFromUrl =
|
||||||
|
Boolean(workspaceSlug) &&
|
||||||
|
workspaces.find((item) => item.slug === workspaceSlug);
|
||||||
|
|
||||||
|
const [selectedItem, setSelectedItem] = useState<Option | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const selectedItemFromUrl = selectedOrgFromUrl || selectedWorkspaceFromUrl;
|
||||||
|
|
||||||
|
if (selectedItemFromUrl) {
|
||||||
|
setSelectedItem({
|
||||||
|
label: selectedItemFromUrl.name,
|
||||||
|
value: selectedItemFromUrl.slug,
|
||||||
|
plan: selectedOrgFromUrl ? selectedOrgFromUrl.plan.name : 'Legacy',
|
||||||
|
type: selectedOrgFromUrl ? 'organization' : 'workspace',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, [selectedOrgFromUrl, selectedWorkspaceFromUrl]);
|
||||||
|
|
||||||
|
const orgsOptions: Option[] = orgs.map((org) => ({
|
||||||
|
label: org.name,
|
||||||
|
value: org.slug,
|
||||||
|
plan: org.plan.name,
|
||||||
|
type: 'organization',
|
||||||
|
}));
|
||||||
|
|
||||||
|
const workspacesOptions: Option[] = workspaces.map((workspace) => ({
|
||||||
|
label: workspace.name,
|
||||||
|
value: workspace.slug,
|
||||||
|
plan: 'Legacy',
|
||||||
|
type: 'workspace',
|
||||||
|
}));
|
||||||
|
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
|
||||||
|
const renderBadge = (plan: string) => {
|
||||||
|
if (!isPlatform) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Badge
|
||||||
|
variant={plan === 'Starter' ? 'outline' : 'default'}
|
||||||
|
className={cn(
|
||||||
|
plan === 'Starter' ? 'bg-muted' : '',
|
||||||
|
plan === 'Legacy'
|
||||||
|
? 'bg-orange-200 text-foreground hover:bg-orange-200 dark:bg-orange-500'
|
||||||
|
: '',
|
||||||
|
'hover:none ml-2 h-5 px-[6px] text-[10px]',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{plan}
|
||||||
|
</Badge>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Popover open={open} onOpenChange={setOpen}>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="ghost"
|
||||||
|
className="justify-between w-full gap-2 bg-background text-foreground hover:bg-accent dark:hover:bg-muted"
|
||||||
|
>
|
||||||
|
{selectedItem ? (
|
||||||
|
<div className="flex flex-row items-center justify-center">
|
||||||
|
{selectedItem.label}
|
||||||
|
{renderBadge(selectedItem.plan)}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
'Select organization / workspace'
|
||||||
|
)}
|
||||||
|
<ChevronsUpDown className="w-5 h-5 text-muted-foreground" />
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent className="p-0" side="bottom" align="start">
|
||||||
|
<Command>
|
||||||
|
<CommandInput placeholder="Select organization..." />
|
||||||
|
<CommandList>
|
||||||
|
<CommandEmpty>No results found.</CommandEmpty>
|
||||||
|
<CommandGroup heading="Organizations">
|
||||||
|
{orgsOptions.map((option) => (
|
||||||
|
<CommandItem
|
||||||
|
key={option.value}
|
||||||
|
value={option.label}
|
||||||
|
className="flex items-center justify-between bg-background text-foreground dark:hover:bg-muted"
|
||||||
|
onSelect={() => {
|
||||||
|
setSelectedItem(option);
|
||||||
|
setOpen(false);
|
||||||
|
|
||||||
|
// persist last slug in local storage
|
||||||
|
setLastSlug(option.value);
|
||||||
|
|
||||||
|
if (option.type === 'organization') {
|
||||||
|
push(`/orgs/${option.value}/projects`);
|
||||||
|
} else {
|
||||||
|
push(`/${option.value}`);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="flex items-center font-normal">
|
||||||
|
<Check
|
||||||
|
className={cn(
|
||||||
|
'mr-2 h-4 w-4',
|
||||||
|
selectedItem?.value === option.value
|
||||||
|
? 'opacity-100'
|
||||||
|
: 'opacity-0',
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<span className="truncate max-w-52">{option.label}</span>
|
||||||
|
</div>
|
||||||
|
{renderBadge(option.plan)}
|
||||||
|
</CommandItem>
|
||||||
|
))}
|
||||||
|
</CommandGroup>
|
||||||
|
|
||||||
|
{workspaces.length > 0 && (
|
||||||
|
<>
|
||||||
|
<CommandSeparator />
|
||||||
|
|
||||||
|
<CommandGroup heading="Workspaces">
|
||||||
|
{workspacesOptions.map((option) => (
|
||||||
|
<CommandItem
|
||||||
|
key={option.value}
|
||||||
|
value={option.label}
|
||||||
|
className="flex items-center justify-between bg-background text-foreground hover:bg-accent dark:hover:bg-muted"
|
||||||
|
onSelect={() => {
|
||||||
|
setSelectedItem(option);
|
||||||
|
setOpen(false);
|
||||||
|
|
||||||
|
// persist last slug in local storage
|
||||||
|
setLastSlug(option.value);
|
||||||
|
|
||||||
|
if (option.type === 'organization') {
|
||||||
|
push(`/orgs/${option.value}/projects`);
|
||||||
|
} else {
|
||||||
|
push(`/${option.value}`);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<Check
|
||||||
|
className={cn(
|
||||||
|
'mr-2 h-4 w-4',
|
||||||
|
selectedItem?.value === option.value
|
||||||
|
? 'opacity-100'
|
||||||
|
: 'opacity-0',
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<span className="truncate max-w-52">
|
||||||
|
{option.label}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{renderBadge(option.plan)}
|
||||||
|
</CommandItem>
|
||||||
|
))}
|
||||||
|
</CommandGroup>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</CommandList>
|
||||||
|
</Command>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
);
|
||||||
|
}
|
||||||
219
dashboard/src/components/layout/Header/ProjectPagesComboBox.tsx
Normal file
219
dashboard/src/components/layout/Header/ProjectPagesComboBox.tsx
Normal file
@@ -0,0 +1,219 @@
|
|||||||
|
import { Button } from '@/components/ui/v3/button';
|
||||||
|
import {
|
||||||
|
Command,
|
||||||
|
CommandEmpty,
|
||||||
|
CommandGroup,
|
||||||
|
CommandInput,
|
||||||
|
CommandItem,
|
||||||
|
CommandList,
|
||||||
|
} from '@/components/ui/v3/command';
|
||||||
|
|
||||||
|
import {
|
||||||
|
Check,
|
||||||
|
ChevronsUpDown,
|
||||||
|
CloudIcon,
|
||||||
|
CogIcon,
|
||||||
|
DatabaseIcon,
|
||||||
|
FileTextIcon,
|
||||||
|
GaugeIcon,
|
||||||
|
HomeIcon,
|
||||||
|
RocketIcon,
|
||||||
|
UserIcon,
|
||||||
|
} from 'lucide-react';
|
||||||
|
|
||||||
|
import { AIIcon } from '@/components/ui/v2/icons/AIIcon';
|
||||||
|
import { GraphQLIcon } from '@/components/ui/v2/icons/GraphQLIcon';
|
||||||
|
import { HasuraIcon } from '@/components/ui/v2/icons/HasuraIcon';
|
||||||
|
import { ServicesIcon } from '@/components/ui/v2/icons/ServicesIcon';
|
||||||
|
import { StorageIcon } from '@/components/ui/v2/icons/StorageIcon';
|
||||||
|
|
||||||
|
import {
|
||||||
|
Popover,
|
||||||
|
PopoverContent,
|
||||||
|
PopoverTrigger,
|
||||||
|
} from '@/components/ui/v3/popover';
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
import { useRouter } from 'next/router';
|
||||||
|
import { useEffect, useMemo, useState, type ReactElement } from 'react';
|
||||||
|
|
||||||
|
type Option = {
|
||||||
|
value: string;
|
||||||
|
label: string;
|
||||||
|
icon: ReactElement;
|
||||||
|
};
|
||||||
|
|
||||||
|
const projectPages = [
|
||||||
|
{
|
||||||
|
label: 'Overview',
|
||||||
|
value: 'overview',
|
||||||
|
icon: <HomeIcon className="w-4 h-4" />,
|
||||||
|
slug: '',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Database',
|
||||||
|
value: 'database',
|
||||||
|
icon: <DatabaseIcon className="w-4 h-4" />,
|
||||||
|
slug: '/database/browser/default',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'GraphQL',
|
||||||
|
value: 'graphql',
|
||||||
|
icon: <GraphQLIcon className="w-4 h-4" />,
|
||||||
|
slug: 'graphql',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Hasura',
|
||||||
|
value: 'hasura',
|
||||||
|
icon: <HasuraIcon className="w-4 h-4" />,
|
||||||
|
slug: 'hasura',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Auth',
|
||||||
|
value: 'users',
|
||||||
|
icon: <UserIcon className="w-4 h-4" />,
|
||||||
|
slug: 'users',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Storage',
|
||||||
|
value: 'storage',
|
||||||
|
icon: <StorageIcon className="w-4 h-4" />,
|
||||||
|
slug: 'storage',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Run',
|
||||||
|
value: 'run',
|
||||||
|
icon: <ServicesIcon className="w-4 h-4" />,
|
||||||
|
slug: 'run',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'AI',
|
||||||
|
value: 'ai',
|
||||||
|
icon: <AIIcon className="w-4 h-4" />,
|
||||||
|
slug: 'ai/auto-embeddings',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Deployments',
|
||||||
|
value: 'deployments',
|
||||||
|
icon: <RocketIcon className="w-4 h-4" />,
|
||||||
|
slug: 'deployments',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Backups',
|
||||||
|
value: 'backups',
|
||||||
|
icon: <CloudIcon className="w-4 h-4" />,
|
||||||
|
slug: 'backups',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Logs',
|
||||||
|
value: 'logs',
|
||||||
|
icon: <FileTextIcon className="w-4 h-4" />,
|
||||||
|
slug: 'logs',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Metrics',
|
||||||
|
value: 'metrics',
|
||||||
|
icon: <GaugeIcon className="w-4 h-4" />,
|
||||||
|
slug: 'metrics',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Settings',
|
||||||
|
value: 'settings',
|
||||||
|
icon: <CogIcon className="w-4 h-4" />,
|
||||||
|
slug: 'settings',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function ProjectPagesComboBox() {
|
||||||
|
const {
|
||||||
|
query: { orgSlug, appSubdomain },
|
||||||
|
push,
|
||||||
|
asPath,
|
||||||
|
} = useRouter();
|
||||||
|
|
||||||
|
const pathSegments = useMemo(() => asPath.split('/'), [asPath]);
|
||||||
|
const projectPageFromUrl = appSubdomain
|
||||||
|
? pathSegments[5] || 'overview'
|
||||||
|
: null;
|
||||||
|
const selectedProjectPageFromUrl = projectPages.find(
|
||||||
|
(item) => item.value === projectPageFromUrl,
|
||||||
|
);
|
||||||
|
const [selectedProjectPage, setSelectedProjectPage] = useState<Option | null>(
|
||||||
|
null,
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (selectedProjectPageFromUrl) {
|
||||||
|
setSelectedProjectPage({
|
||||||
|
label: selectedProjectPageFromUrl.label,
|
||||||
|
value: selectedProjectPageFromUrl.slug,
|
||||||
|
icon: selectedProjectPageFromUrl.icon,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, [selectedProjectPageFromUrl]);
|
||||||
|
|
||||||
|
const options: Option[] = projectPages.map((app) => ({
|
||||||
|
label: app.label,
|
||||||
|
value: app.slug,
|
||||||
|
icon: app.icon,
|
||||||
|
}));
|
||||||
|
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Popover open={open} onOpenChange={setOpen}>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="justify-start gap-2 bg-background text-foreground hover:bg-accent dark:hover:bg-muted"
|
||||||
|
>
|
||||||
|
{selectedProjectPage ? (
|
||||||
|
<div className="flex flex-row items-center justify-center gap-2">
|
||||||
|
{selectedProjectPage.icon}
|
||||||
|
{selectedProjectPage.label}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<>Select a page</>
|
||||||
|
)}
|
||||||
|
<ChevronsUpDown className="w-5 h-5 text-muted-foreground" />
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent className="p-0" side="bottom" align="start">
|
||||||
|
<Command>
|
||||||
|
<CommandInput placeholder="Select a page..." />
|
||||||
|
<CommandList>
|
||||||
|
<CommandEmpty>No results found.</CommandEmpty>
|
||||||
|
<CommandGroup>
|
||||||
|
{options.map((option) => (
|
||||||
|
<CommandItem
|
||||||
|
key={option.value}
|
||||||
|
value={option.label}
|
||||||
|
onSelect={() => {
|
||||||
|
setSelectedProjectPage(option);
|
||||||
|
setOpen(false);
|
||||||
|
push(
|
||||||
|
`/orgs/${orgSlug}/projects/${appSubdomain}/${option.value}`,
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Check
|
||||||
|
className={cn(
|
||||||
|
'mr-2 h-4 w-4',
|
||||||
|
selectedProjectPage?.value === option.value
|
||||||
|
? 'opacity-100'
|
||||||
|
: 'opacity-0',
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<div className="flex flex-row items-center gap-2">
|
||||||
|
{option.icon}
|
||||||
|
<span className="truncate max-w-52">{option.label}</span>
|
||||||
|
</div>
|
||||||
|
</CommandItem>
|
||||||
|
))}
|
||||||
|
</CommandGroup>
|
||||||
|
</CommandList>
|
||||||
|
</Command>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,168 @@
|
|||||||
|
import { Button } from '@/components/ui/v3/button';
|
||||||
|
import {
|
||||||
|
Command,
|
||||||
|
CommandEmpty,
|
||||||
|
CommandGroup,
|
||||||
|
CommandInput,
|
||||||
|
CommandItem,
|
||||||
|
CommandList,
|
||||||
|
} from '@/components/ui/v3/command';
|
||||||
|
|
||||||
|
import {
|
||||||
|
Popover,
|
||||||
|
PopoverContent,
|
||||||
|
PopoverTrigger,
|
||||||
|
} from '@/components/ui/v3/popover';
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
import { Check, ChevronsUpDown } from 'lucide-react';
|
||||||
|
import { useRouter } from 'next/router';
|
||||||
|
import { useEffect, useMemo, useState } from 'react';
|
||||||
|
|
||||||
|
type Option = {
|
||||||
|
value: string;
|
||||||
|
label: string;
|
||||||
|
route: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
const projectSettingsPages = [
|
||||||
|
{ name: 'General', slug: 'general', route: '' },
|
||||||
|
{
|
||||||
|
name: 'Compute Resources',
|
||||||
|
slug: 'compute-resources',
|
||||||
|
route: 'compute-resources',
|
||||||
|
},
|
||||||
|
{ name: 'Database', slug: 'database', route: 'database' },
|
||||||
|
{ name: 'Hasura', slug: 'hasura', route: 'hasura' },
|
||||||
|
{
|
||||||
|
name: 'Authentication',
|
||||||
|
slug: 'authentication',
|
||||||
|
route: 'authentication',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Sign-In methods',
|
||||||
|
slug: 'sign-in-methods',
|
||||||
|
route: 'sign-in-methods',
|
||||||
|
},
|
||||||
|
{ name: 'Storage', slug: 'storage', route: 'storage' },
|
||||||
|
{
|
||||||
|
name: 'Roles and Permissions',
|
||||||
|
slug: 'roles-and-permissions',
|
||||||
|
route: 'roles-and-permissions',
|
||||||
|
},
|
||||||
|
{ name: 'SMTP', slug: 'smtp', route: 'smtp' },
|
||||||
|
{ name: 'Git', slug: 'git', route: 'git' },
|
||||||
|
{
|
||||||
|
name: 'Environment Variables',
|
||||||
|
slug: 'environment-variables',
|
||||||
|
route: 'environment-variables',
|
||||||
|
},
|
||||||
|
{ name: 'Secrets', slug: 'secrets', route: 'secrets' },
|
||||||
|
{
|
||||||
|
name: 'Custom Domains',
|
||||||
|
slug: 'custom-domains',
|
||||||
|
route: 'custom-domains',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Rate Limiting',
|
||||||
|
slug: 'rate-limiting',
|
||||||
|
route: 'rate-limiting',
|
||||||
|
},
|
||||||
|
{ name: 'AI', slug: 'ai', route: 'ai' },
|
||||||
|
{ name: 'Configuration Editor', slug: 'editor', route: 'editor' },
|
||||||
|
].map((item) => ({
|
||||||
|
label: item.name,
|
||||||
|
value: item.slug,
|
||||||
|
route: item.route,
|
||||||
|
}));
|
||||||
|
|
||||||
|
export default function ProjectSettingsPagesComboBox() {
|
||||||
|
const {
|
||||||
|
query: { orgSlug, appSubdomain },
|
||||||
|
push,
|
||||||
|
asPath,
|
||||||
|
} = useRouter();
|
||||||
|
|
||||||
|
const pathSegments = useMemo(() => asPath.split('/'), [asPath]);
|
||||||
|
const isSettingsPage = pathSegments.includes('settings');
|
||||||
|
const settingsPageFromUrl = isSettingsPage
|
||||||
|
? pathSegments[6] || 'general'
|
||||||
|
: null;
|
||||||
|
|
||||||
|
const selectedSettingsPageFromUrl = projectSettingsPages.find(
|
||||||
|
(item) => item.value === settingsPageFromUrl,
|
||||||
|
);
|
||||||
|
const [selectedSettingsPage, setSelectedSettingsPage] =
|
||||||
|
useState<Option | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (selectedSettingsPageFromUrl) {
|
||||||
|
setSelectedSettingsPage({
|
||||||
|
label: selectedSettingsPageFromUrl.label,
|
||||||
|
value: selectedSettingsPageFromUrl.value,
|
||||||
|
route: selectedSettingsPageFromUrl.route,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, [selectedSettingsPageFromUrl]);
|
||||||
|
|
||||||
|
const options: Option[] = projectSettingsPages.map((page) => ({
|
||||||
|
label: page.label,
|
||||||
|
value: page.value,
|
||||||
|
route: page.route,
|
||||||
|
}));
|
||||||
|
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Popover open={open} onOpenChange={setOpen}>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="justify-start gap-2 bg-background text-foreground hover:bg-accent dark:hover:bg-muted"
|
||||||
|
>
|
||||||
|
{selectedSettingsPage ? (
|
||||||
|
<div>{selectedSettingsPage.label}</div>
|
||||||
|
) : (
|
||||||
|
<>Select a page</>
|
||||||
|
)}
|
||||||
|
<ChevronsUpDown className="w-5 h-5 text-muted-foreground" />
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent className="p-0" side="bottom" align="start">
|
||||||
|
<Command>
|
||||||
|
<CommandInput placeholder="Select a page..." />
|
||||||
|
<CommandList>
|
||||||
|
<CommandEmpty>No results found.</CommandEmpty>
|
||||||
|
<CommandGroup>
|
||||||
|
{options.map((option) => (
|
||||||
|
<CommandItem
|
||||||
|
key={option.value}
|
||||||
|
value={option.label}
|
||||||
|
onSelect={() => {
|
||||||
|
setSelectedSettingsPage(option);
|
||||||
|
setOpen(false);
|
||||||
|
push(
|
||||||
|
`/orgs/${orgSlug}/projects/${appSubdomain}/settings/${option.route}/`,
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Check
|
||||||
|
className={cn(
|
||||||
|
'mr-2 h-4 w-4',
|
||||||
|
selectedSettingsPage?.value === option.value
|
||||||
|
? 'opacity-100'
|
||||||
|
: 'opacity-0',
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<div className="flex flex-row items-center gap-2">
|
||||||
|
<span className="truncate max-w-52">{option.label}</span>
|
||||||
|
</div>
|
||||||
|
</CommandItem>
|
||||||
|
))}
|
||||||
|
</CommandGroup>
|
||||||
|
</CommandList>
|
||||||
|
</Command>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
);
|
||||||
|
}
|
||||||
41
dashboard/src/components/layout/Header/ProjectStatus.tsx
Normal file
41
dashboard/src/components/layout/Header/ProjectStatus.tsx
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
import { Chip } from '@/components/ui/v2/Chip';
|
||||||
|
import { useProject } from '@/features/orgs/projects/hooks/useProject';
|
||||||
|
import { ApplicationStatus } from '@/types/application';
|
||||||
|
import { useEffect } from 'react';
|
||||||
|
|
||||||
|
export default function ProjectStatus() {
|
||||||
|
const { project, refetch: refetchProject } = useProject();
|
||||||
|
|
||||||
|
const isProjectUpdating =
|
||||||
|
project?.appStates[0]?.stateId === ApplicationStatus.Updating;
|
||||||
|
|
||||||
|
const isProjectMigratingDatabase =
|
||||||
|
project?.appStates[0]?.stateId === ApplicationStatus.Migrating;
|
||||||
|
|
||||||
|
// Poll for project updates
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isProjectUpdating && !isProjectMigratingDatabase) {
|
||||||
|
return () => {};
|
||||||
|
}
|
||||||
|
|
||||||
|
const interval = setInterval(async () => {
|
||||||
|
await refetchProject();
|
||||||
|
}, 5000);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
clearInterval(interval);
|
||||||
|
};
|
||||||
|
}, [isProjectUpdating, isProjectMigratingDatabase, refetchProject]);
|
||||||
|
|
||||||
|
if (isProjectUpdating) {
|
||||||
|
return <Chip size="small" label="Updating" color="warning" />;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isProjectMigratingDatabase) {
|
||||||
|
return (
|
||||||
|
<Chip size="small" label="Upgrading Postgres version" color="warning" />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
111
dashboard/src/components/layout/Header/ProjectsComboBox.tsx
Normal file
111
dashboard/src/components/layout/Header/ProjectsComboBox.tsx
Normal file
@@ -0,0 +1,111 @@
|
|||||||
|
import ProjectStatus from '@/components/layout/Header/ProjectStatus';
|
||||||
|
import { Button } from '@/components/ui/v3/button';
|
||||||
|
import {
|
||||||
|
Command,
|
||||||
|
CommandEmpty,
|
||||||
|
CommandGroup,
|
||||||
|
CommandInput,
|
||||||
|
CommandItem,
|
||||||
|
CommandList,
|
||||||
|
} from '@/components/ui/v3/command';
|
||||||
|
import {
|
||||||
|
Popover,
|
||||||
|
PopoverContent,
|
||||||
|
PopoverTrigger,
|
||||||
|
} from '@/components/ui/v3/popover';
|
||||||
|
import { useOrgs } from '@/features/orgs/projects/hooks/useOrgs';
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
import { Box, Check, ChevronsUpDown } from 'lucide-react';
|
||||||
|
import { useRouter } from 'next/router';
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
|
||||||
|
type Option = {
|
||||||
|
value: string;
|
||||||
|
label: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function ProjectsComboBox() {
|
||||||
|
const {
|
||||||
|
query: { appSubdomain },
|
||||||
|
push,
|
||||||
|
} = useRouter();
|
||||||
|
|
||||||
|
const { currentOrg: { slug: orgSlug, apps = [] } = {} } = useOrgs();
|
||||||
|
const selectedProjectFromUrl = apps.find(
|
||||||
|
(item) => item.subdomain === appSubdomain,
|
||||||
|
);
|
||||||
|
const [selectedProject, setSelectedProject] = useState<Option | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (selectedProjectFromUrl) {
|
||||||
|
setSelectedProject({
|
||||||
|
label: selectedProjectFromUrl.name,
|
||||||
|
value: selectedProjectFromUrl.subdomain,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, [selectedProjectFromUrl]);
|
||||||
|
|
||||||
|
const options: Option[] = apps.map((app) => ({
|
||||||
|
label: app.name,
|
||||||
|
value: app.subdomain,
|
||||||
|
}));
|
||||||
|
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Popover open={open} onOpenChange={setOpen}>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="justify-start gap-2 bg-background text-foreground hover:bg-accent dark:hover:bg-muted"
|
||||||
|
>
|
||||||
|
{selectedProject ? (
|
||||||
|
<div className="flex flex-row items-center justify-center gap-1">
|
||||||
|
<Box className="w-4 h-4" />
|
||||||
|
{selectedProject.label}
|
||||||
|
<ProjectStatus />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<>Select a project</>
|
||||||
|
)}
|
||||||
|
<ChevronsUpDown className="w-5 h-5 text-muted-foreground" />
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent className="p-0" side="bottom" align="start">
|
||||||
|
<Command>
|
||||||
|
<CommandInput placeholder="Select a project..." />
|
||||||
|
<CommandList>
|
||||||
|
<CommandEmpty>No results found.</CommandEmpty>
|
||||||
|
<CommandGroup>
|
||||||
|
{options.map((option) => (
|
||||||
|
<CommandItem
|
||||||
|
key={option.value}
|
||||||
|
value={option.label}
|
||||||
|
onSelect={() => {
|
||||||
|
setSelectedProject(option);
|
||||||
|
setOpen(false);
|
||||||
|
push(`/orgs/${orgSlug}/projects/${option.value}`);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Check
|
||||||
|
className={cn(
|
||||||
|
'mr-2 h-4 w-4',
|
||||||
|
selectedProject?.value === option.value
|
||||||
|
? 'opacity-100'
|
||||||
|
: 'opacity-0',
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<div className="flex flex-row items-center gap-1">
|
||||||
|
<Box className="w-4 h-4" />
|
||||||
|
<span className="truncate max-w-52">{option.label}</span>
|
||||||
|
</div>
|
||||||
|
</CommandItem>
|
||||||
|
))}
|
||||||
|
</CommandGroup>
|
||||||
|
</CommandList>
|
||||||
|
</Command>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,2 +1,3 @@
|
|||||||
|
export { default as BreadcrumbNav } from './BreadcrumbNav';
|
||||||
export * from './Header';
|
export * from './Header';
|
||||||
export { default as Header } from './Header';
|
export { default as Header } from './Header';
|
||||||
|
|||||||
110
dashboard/src/components/layout/MainNav/MainNav.tsx
Normal file
110
dashboard/src/components/layout/MainNav/MainNav.tsx
Normal file
@@ -0,0 +1,110 @@
|
|||||||
|
import { Button } from '@/components/ui/v3/button';
|
||||||
|
import { Separator } from '@/components/ui/v3/separator';
|
||||||
|
import {
|
||||||
|
Sheet,
|
||||||
|
SheetContent,
|
||||||
|
SheetDescription,
|
||||||
|
SheetHeader,
|
||||||
|
SheetTitle,
|
||||||
|
} from '@/components/ui/v3/sheet';
|
||||||
|
import CreateOrgDialog from '@/features/orgs/components/CreateOrgFormDialog/CreateOrgFormDialog';
|
||||||
|
import { useWorkspaces } from '@/features/orgs/projects/hooks/useWorkspaces';
|
||||||
|
import { Menu, Pin, PinOff, X } from 'lucide-react';
|
||||||
|
import { useRouter } from 'next/router';
|
||||||
|
import { useEffect, useRef } from 'react';
|
||||||
|
import NavTree from './NavTree';
|
||||||
|
import { useTreeNavState } from './TreeNavStateContext';
|
||||||
|
import WorkspacesNavTree from './WorkspacesNavTree';
|
||||||
|
|
||||||
|
interface MainNavProps {
|
||||||
|
container: HTMLElement;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function MainNav({ container }: MainNavProps) {
|
||||||
|
const { asPath } = useRouter();
|
||||||
|
const { workspaces } = useWorkspaces();
|
||||||
|
const scrollContainerRef = useRef<HTMLDivElement | null>(null);
|
||||||
|
const { open, setOpen, mainNavPinned, setMainNavPinned } = useTreeNavState();
|
||||||
|
|
||||||
|
const scrollToCurrentPath = () => {
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
const element = document.querySelector(`a[href="${asPath}"]`);
|
||||||
|
if (element && scrollContainerRef.current) {
|
||||||
|
element.scrollIntoView({ block: 'center' });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (open) {
|
||||||
|
scrollToCurrentPath();
|
||||||
|
}
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [open]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Sheet open={open} onOpenChange={setOpen}>
|
||||||
|
<div
|
||||||
|
className="min- absolute left-0 z-50 flex h-full w-6 justify-center border-r-[1px] bg-background pt-1 hover:bg-accent"
|
||||||
|
onMouseEnter={() => setOpen(true)}
|
||||||
|
>
|
||||||
|
<Menu className="w-4 h-4" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<SheetContent
|
||||||
|
side="left"
|
||||||
|
container={container}
|
||||||
|
hideCloseButton
|
||||||
|
className="h-full w-full p-0 sm:max-w-[310px]"
|
||||||
|
onMouseLeave={() => setOpen(false)}
|
||||||
|
>
|
||||||
|
<SheetHeader>
|
||||||
|
<SheetTitle className="sr-only">Main navigation</SheetTitle>
|
||||||
|
<SheetDescription className="sr-only">
|
||||||
|
Nhost Dashboard Main Navigation
|
||||||
|
</SheetDescription>
|
||||||
|
</SheetHeader>
|
||||||
|
|
||||||
|
<div className="flex flex-row items-center justify-end w-full h-12 px-1 border-b bg-background">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="hidden sm:flex"
|
||||||
|
onClick={() => setMainNavPinned(!mainNavPinned)}
|
||||||
|
>
|
||||||
|
{mainNavPinned ? (
|
||||||
|
<PinOff className="w-5 h-5" />
|
||||||
|
) : (
|
||||||
|
<Pin className="w-5 h-5" />
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="flex sm:hidden"
|
||||||
|
onClick={() => setOpen(false)}
|
||||||
|
>
|
||||||
|
<X className="w-5 h-5" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
ref={scrollContainerRef}
|
||||||
|
className="h-[calc(100vh-7rem)] space-y-4 overflow-auto pb-12 pt-2 lg:h-[calc(100vh-6rem)]"
|
||||||
|
>
|
||||||
|
<div className="flex flex-col gap-1 px-2">
|
||||||
|
<NavTree />
|
||||||
|
<CreateOrgDialog />
|
||||||
|
</div>
|
||||||
|
{workspaces.length > 0 && (
|
||||||
|
<>
|
||||||
|
<Separator className="mx-auto my-2" />
|
||||||
|
<div className="px-2">
|
||||||
|
<WorkspacesNavTree />
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</SheetContent>
|
||||||
|
</Sheet>
|
||||||
|
);
|
||||||
|
}
|
||||||
538
dashboard/src/components/layout/MainNav/NavTree.tsx
Normal file
538
dashboard/src/components/layout/MainNav/NavTree.tsx
Normal file
@@ -0,0 +1,538 @@
|
|||||||
|
import { AIIcon } from '@/components/ui/v2/icons/AIIcon';
|
||||||
|
import { CloudIcon } from '@/components/ui/v2/icons/CloudIcon';
|
||||||
|
import { DatabaseIcon } from '@/components/ui/v2/icons/DatabaseIcon';
|
||||||
|
import { FileTextIcon } from '@/components/ui/v2/icons/FileTextIcon';
|
||||||
|
import { GaugeIcon } from '@/components/ui/v2/icons/GaugeIcon';
|
||||||
|
import { GraphQLIcon } from '@/components/ui/v2/icons/GraphQLIcon';
|
||||||
|
import { HasuraIcon } from '@/components/ui/v2/icons/HasuraIcon';
|
||||||
|
import { HomeIcon } from '@/components/ui/v2/icons/HomeIcon';
|
||||||
|
import { RocketIcon } from '@/components/ui/v2/icons/RocketIcon';
|
||||||
|
import { ServicesIcon } from '@/components/ui/v2/icons/ServicesIcon';
|
||||||
|
import { StorageIcon } from '@/components/ui/v2/icons/StorageIcon';
|
||||||
|
import { UserIcon } from '@/components/ui/v2/icons/UserIcon';
|
||||||
|
import { Badge } from '@/components/ui/v3/badge';
|
||||||
|
import { Button } from '@/components/ui/v3/button';
|
||||||
|
import { useIsPlatform } from '@/features/orgs/projects/common/hooks/useIsPlatform';
|
||||||
|
import { useOrgs, type Org } from '@/features/orgs/projects/hooks/useOrgs';
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
import { Box, ChevronDown, ChevronRight, Plus } from 'lucide-react';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { useMemo, type ReactElement } from 'react';
|
||||||
|
|
||||||
|
import {
|
||||||
|
ControlledTreeEnvironment,
|
||||||
|
Tree,
|
||||||
|
type TreeItem,
|
||||||
|
type TreeItemIndex,
|
||||||
|
} from 'react-complex-tree';
|
||||||
|
import { useTreeNavState } from './TreeNavStateContext';
|
||||||
|
|
||||||
|
const projectPages = [
|
||||||
|
{
|
||||||
|
name: 'Overview',
|
||||||
|
icon: <HomeIcon className="w-4 h-4" />,
|
||||||
|
route: '',
|
||||||
|
slug: 'overview',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Database',
|
||||||
|
icon: <DatabaseIcon className="w-4 h-4" />,
|
||||||
|
route: 'database/browser/default',
|
||||||
|
slug: 'database',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'GraphQL',
|
||||||
|
icon: <GraphQLIcon className="w-4 h-4" />,
|
||||||
|
route: 'graphql',
|
||||||
|
slug: 'graphql',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Hasura',
|
||||||
|
icon: <HasuraIcon className="w-4 h-4" />,
|
||||||
|
route: 'hasura',
|
||||||
|
slug: 'hasura',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Auth',
|
||||||
|
icon: <UserIcon className="w-4 h-4" />,
|
||||||
|
route: 'users',
|
||||||
|
slug: 'users',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Storage',
|
||||||
|
icon: <StorageIcon className="w-4 h-4" />,
|
||||||
|
route: 'storage',
|
||||||
|
slug: 'storage',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Run',
|
||||||
|
icon: <ServicesIcon className="w-4 h-4" />,
|
||||||
|
route: 'run',
|
||||||
|
slug: 'run',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'AI',
|
||||||
|
icon: <AIIcon className="w-4 h-4" />,
|
||||||
|
route: 'ai/auto-embeddings',
|
||||||
|
slug: 'ai',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Deployments',
|
||||||
|
icon: <RocketIcon className="w-4 h-4" />,
|
||||||
|
route: 'deployments',
|
||||||
|
slug: 'deployments',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Backups',
|
||||||
|
icon: <CloudIcon className="w-4 h-4" />,
|
||||||
|
route: 'backups',
|
||||||
|
slug: 'backups',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Logs',
|
||||||
|
icon: <FileTextIcon className="w-4 h-4" />,
|
||||||
|
route: 'logs',
|
||||||
|
slug: 'logs',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Metrics',
|
||||||
|
icon: <GaugeIcon className="w-4 h-4" />,
|
||||||
|
route: 'metrics',
|
||||||
|
slug: 'metrics',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Settings',
|
||||||
|
route: 'settings',
|
||||||
|
slug: 'settings',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const projectSettingsPages = [
|
||||||
|
{ name: 'General', slug: 'general', route: '' },
|
||||||
|
{
|
||||||
|
name: 'Compute Resources',
|
||||||
|
slug: 'compute-resources',
|
||||||
|
route: 'compute-resources',
|
||||||
|
},
|
||||||
|
{ name: 'Database', slug: 'database', route: 'database' },
|
||||||
|
{ name: 'Hasura', slug: 'hasura', route: 'hasura' },
|
||||||
|
{
|
||||||
|
name: 'Authentication',
|
||||||
|
slug: 'authentication',
|
||||||
|
route: 'authentication',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Sign-In methods',
|
||||||
|
slug: 'sign-in-methods',
|
||||||
|
route: 'sign-in-methods',
|
||||||
|
},
|
||||||
|
{ name: 'Storage', slug: 'storage', route: 'storage' },
|
||||||
|
{
|
||||||
|
name: 'Roles and Permissions',
|
||||||
|
slug: 'roles-and-permissions',
|
||||||
|
route: 'roles-and-permissions',
|
||||||
|
},
|
||||||
|
{ name: 'SMTP', slug: 'smtp', route: 'smtp' },
|
||||||
|
{ name: 'Git', slug: 'git', route: 'git' },
|
||||||
|
{
|
||||||
|
name: 'Environment Variables',
|
||||||
|
slug: 'environment-variables',
|
||||||
|
route: 'environment-variables',
|
||||||
|
},
|
||||||
|
{ name: 'Secrets', slug: 'secrets', route: 'secrets' },
|
||||||
|
{
|
||||||
|
name: 'Custom Domains',
|
||||||
|
slug: 'custom-domains',
|
||||||
|
route: 'custom-domains',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Rate Limiting',
|
||||||
|
slug: 'rate-limiting',
|
||||||
|
route: 'rate-limiting',
|
||||||
|
},
|
||||||
|
{ name: 'AI', slug: 'ai', route: 'ai' },
|
||||||
|
{ name: 'Configuration Editor', slug: 'editor', route: 'editor' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const createOrganization = (org: Org, isPlatform: boolean) => {
|
||||||
|
const result = {};
|
||||||
|
|
||||||
|
result[org.slug] = {
|
||||||
|
index: org.slug,
|
||||||
|
canMove: false,
|
||||||
|
isFolder: true,
|
||||||
|
children: [
|
||||||
|
`${org.slug}-projects`,
|
||||||
|
`${org.slug}-settings`,
|
||||||
|
`${org.slug}-members`,
|
||||||
|
`${org.slug}-billing`,
|
||||||
|
],
|
||||||
|
data: {
|
||||||
|
name: org.name,
|
||||||
|
slug: org.slug,
|
||||||
|
type: 'org',
|
||||||
|
isFree: org.plan.isFree,
|
||||||
|
plan: org.plan.name,
|
||||||
|
targetUrl: `/orgs/${org.slug}/projects`, // default to projects
|
||||||
|
disabled: false,
|
||||||
|
},
|
||||||
|
canRename: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
result[`${org.slug}-projects`] = {
|
||||||
|
index: `${org.slug}-projects`,
|
||||||
|
canMove: false,
|
||||||
|
isFolder: true,
|
||||||
|
children: [
|
||||||
|
...org.apps.map((app) => `${org.slug}-${app.subdomain}`),
|
||||||
|
`${org.slug}-new-project`,
|
||||||
|
],
|
||||||
|
data: {
|
||||||
|
name: 'Projects',
|
||||||
|
targetUrl: `/orgs/${org.slug}/projects`,
|
||||||
|
disabled: false,
|
||||||
|
},
|
||||||
|
canRename: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
result[`${org.slug}-new-project`] = {
|
||||||
|
index: `${org.slug}-new-project`,
|
||||||
|
isFolder: false,
|
||||||
|
canMove: false,
|
||||||
|
canRename: false,
|
||||||
|
data: {
|
||||||
|
name: 'New project',
|
||||||
|
slug: 'new',
|
||||||
|
icon: <Plus className="w-4 h-4 mr-1 font-bold" strokeWidth={3} />,
|
||||||
|
targetUrl: `/orgs/${org.slug}/projects/new`,
|
||||||
|
disabled: !isPlatform,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
org.apps.forEach((app) => {
|
||||||
|
result[`${org.slug}-${app.subdomain}`] = {
|
||||||
|
index: `${org.slug}-${app.subdomain}`,
|
||||||
|
isFolder: true,
|
||||||
|
canMove: false,
|
||||||
|
canRename: false,
|
||||||
|
data: {
|
||||||
|
name: app.name,
|
||||||
|
slug: app.subdomain,
|
||||||
|
icon: <Box className="w-4 h-4" />,
|
||||||
|
targetUrl: `/orgs/${org.slug}/projects/${app.subdomain}`,
|
||||||
|
},
|
||||||
|
children: projectPages.map(
|
||||||
|
(page) => `${org.slug}-${app.subdomain}-${page.slug}`,
|
||||||
|
),
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
org.apps.forEach((_app) => {
|
||||||
|
projectPages.forEach((_page) => {
|
||||||
|
result[`${org.slug}-${_app.subdomain}-${_page.slug}`] = {
|
||||||
|
index: `${org.slug}-${_app.subdomain}-${_page.slug}`,
|
||||||
|
canMove: false,
|
||||||
|
isFolder: _page.name === 'Settings',
|
||||||
|
children:
|
||||||
|
_page.name === 'Settings'
|
||||||
|
? projectSettingsPages.map(
|
||||||
|
(p) => `${org.slug}-${_app.subdomain}-settings-${p.slug}`,
|
||||||
|
)
|
||||||
|
: undefined,
|
||||||
|
data: {
|
||||||
|
name: _page.name,
|
||||||
|
icon: _page.icon,
|
||||||
|
isProjectPage: true,
|
||||||
|
targetUrl: `/orgs/${org.slug}/projects/${_app.subdomain}/${_page.route}`,
|
||||||
|
disabled:
|
||||||
|
['deployments', 'backups', 'logs', 'metrics'].includes(
|
||||||
|
_page.slug,
|
||||||
|
) && !isPlatform,
|
||||||
|
},
|
||||||
|
canRename: false,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
// add the settings pages
|
||||||
|
projectSettingsPages.forEach((p) => {
|
||||||
|
result[`${org.slug}-${_app.subdomain}-settings-${p.slug}`] = {
|
||||||
|
index: `${org.slug}-${_app.subdomain}-settings-${p.slug}`,
|
||||||
|
canMove: false,
|
||||||
|
isFolder: false,
|
||||||
|
children: undefined,
|
||||||
|
data: {
|
||||||
|
name: p.name,
|
||||||
|
targetUrl:
|
||||||
|
p.slug === 'general'
|
||||||
|
? `/orgs/${org.slug}/projects/${_app.subdomain}/settings`
|
||||||
|
: `/orgs/${org.slug}/projects/${_app.subdomain}/settings/${p.route}`,
|
||||||
|
},
|
||||||
|
canRename: false,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
result[`${org.slug}-settings`] = {
|
||||||
|
index: `${org.slug}-settings`,
|
||||||
|
canMove: false,
|
||||||
|
isFolder: false,
|
||||||
|
children: [],
|
||||||
|
data: {
|
||||||
|
name: 'Settings',
|
||||||
|
targetUrl: `/orgs/${org.slug}/settings`,
|
||||||
|
disabled: !isPlatform,
|
||||||
|
},
|
||||||
|
canRename: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
result[`${org.slug}-members`] = {
|
||||||
|
index: `${org.slug}-members`,
|
||||||
|
canMove: false,
|
||||||
|
isFolder: false,
|
||||||
|
children: [],
|
||||||
|
data: {
|
||||||
|
name: 'Members',
|
||||||
|
targetUrl: `/orgs/${org.slug}/members`,
|
||||||
|
disabled: !isPlatform,
|
||||||
|
},
|
||||||
|
canRename: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
result[`${org.slug}-billing`] = {
|
||||||
|
index: `${org.slug}-billing`,
|
||||||
|
canMove: false,
|
||||||
|
isFolder: false,
|
||||||
|
children: [],
|
||||||
|
data: {
|
||||||
|
name: 'Billing',
|
||||||
|
targetUrl: `/orgs/${org.slug}/billing`,
|
||||||
|
disabled: !isPlatform,
|
||||||
|
},
|
||||||
|
canRename: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
|
||||||
|
type NavItem = {
|
||||||
|
name: string;
|
||||||
|
slug?: string;
|
||||||
|
type?: string;
|
||||||
|
isFree?: boolean;
|
||||||
|
plan?: string;
|
||||||
|
icon?: ReactElement;
|
||||||
|
targetUrl?: string;
|
||||||
|
disabled?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
const buildNavTreeData = (
|
||||||
|
org: Org,
|
||||||
|
isPlatform: boolean,
|
||||||
|
): { items: Record<TreeItemIndex, TreeItem<NavItem>> } => {
|
||||||
|
if (!org) {
|
||||||
|
return {
|
||||||
|
items: {
|
||||||
|
root: {
|
||||||
|
index: 'root',
|
||||||
|
canMove: false,
|
||||||
|
isFolder: true,
|
||||||
|
children: [],
|
||||||
|
data: { name: 'root' },
|
||||||
|
canRename: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const navTree = {
|
||||||
|
items: {
|
||||||
|
root: {
|
||||||
|
index: 'root',
|
||||||
|
canMove: false,
|
||||||
|
isFolder: true,
|
||||||
|
children: [
|
||||||
|
`${org.slug}-projects`,
|
||||||
|
`${org.slug}-settings`,
|
||||||
|
`${org.slug}-members`,
|
||||||
|
`${org.slug}-billing`,
|
||||||
|
],
|
||||||
|
data: { name: 'root' },
|
||||||
|
canRename: false,
|
||||||
|
},
|
||||||
|
...createOrganization(org, isPlatform),
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
return navTree;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function NavTree() {
|
||||||
|
const { currentOrg: org } = useOrgs();
|
||||||
|
const isPlatform = useIsPlatform();
|
||||||
|
const navTree = useMemo(
|
||||||
|
() => buildNavTreeData(org, isPlatform),
|
||||||
|
[org, isPlatform],
|
||||||
|
);
|
||||||
|
const { orgsTreeViewState, setOrgsTreeViewState, setOpen } =
|
||||||
|
useTreeNavState();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ControlledTreeEnvironment
|
||||||
|
items={navTree.items}
|
||||||
|
getItemTitle={(item) => item.data.name}
|
||||||
|
viewState={{
|
||||||
|
'nav-tree': orgsTreeViewState,
|
||||||
|
}}
|
||||||
|
renderItemTitle={({ title }) => <span>{title}</span>}
|
||||||
|
renderItemArrow={({ item, context }) => {
|
||||||
|
if (!item.isFolder) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => context.toggleExpandedState()}
|
||||||
|
className="h-8 px-1"
|
||||||
|
>
|
||||||
|
{context.isExpanded ? (
|
||||||
|
<ChevronDown className="w-4 h-4 font-bold" strokeWidth={3} />
|
||||||
|
) : (
|
||||||
|
<ChevronRight className="w-4 h-4" strokeWidth={3} />
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
renderItem={({ arrow, context, item, children }) => (
|
||||||
|
<li
|
||||||
|
{...context.itemContainerWithChildrenProps}
|
||||||
|
className="flex flex-col gap-1"
|
||||||
|
>
|
||||||
|
<div className="flex flex-row items-center">
|
||||||
|
{arrow}
|
||||||
|
<Button
|
||||||
|
asChild
|
||||||
|
onClick={() => {
|
||||||
|
// do not focus an item if we already there
|
||||||
|
// this will prevent the case where clikcing on the project name
|
||||||
|
// would focus on the project name instead of the overview page
|
||||||
|
if (
|
||||||
|
navTree.items[item.index].data.targetUrl ===
|
||||||
|
item.data.targetUrl
|
||||||
|
) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (item.data.type !== 'org') {
|
||||||
|
context.focusItem();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className={cn(
|
||||||
|
'flex h-8 w-full flex-row justify-start gap-1 bg-background px-1 text-foreground hover:bg-accent dark:hover:bg-muted',
|
||||||
|
context.isFocused &&
|
||||||
|
'bg-[#ebf3ff] hover:bg-[#ebf3ff] dark:bg-muted',
|
||||||
|
item.data.disabled && 'pointer-events-none opacity-50',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Link
|
||||||
|
href={item.data.targetUrl || '/'}
|
||||||
|
shallow
|
||||||
|
onClick={() => setOpen(false)}
|
||||||
|
>
|
||||||
|
{item.data.icon && (
|
||||||
|
<span
|
||||||
|
className={cn(
|
||||||
|
'flex items-start',
|
||||||
|
context.isFocused ? 'text-primary' : '',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{item.data.icon}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<span
|
||||||
|
className={cn(
|
||||||
|
item?.index === 'organizations' && 'font-bold',
|
||||||
|
context.isFocused ? 'font-bold text-primary' : '',
|
||||||
|
'max-w-52 truncate',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{item.data.name}
|
||||||
|
</span>
|
||||||
|
{item.data?.plan && (
|
||||||
|
<Badge
|
||||||
|
variant={item.data.isFree ? 'outline' : 'default'}
|
||||||
|
className={cn(
|
||||||
|
'h-5 px-[6px] text-[10px]',
|
||||||
|
item.data.isFree ? 'bg-muted' : '',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{item.data.plan}
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div>{children}</div>
|
||||||
|
</li>
|
||||||
|
)}
|
||||||
|
renderTreeContainer={({ children, containerProps }) => (
|
||||||
|
<div {...containerProps} className="w-full">
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
renderItemsContainer={({ children, containerProps, depth }) => {
|
||||||
|
if (depth === 0) {
|
||||||
|
return (
|
||||||
|
<ul {...containerProps} className="w-full">
|
||||||
|
{children}
|
||||||
|
</ul>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-row w-full">
|
||||||
|
<div className="flex justify-center px-[12px] pb-3">
|
||||||
|
<div className="w-0 h-full border-r border-dashed" />
|
||||||
|
</div>
|
||||||
|
<ul {...containerProps} className="w-full">
|
||||||
|
{children}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
canSearch={false}
|
||||||
|
onExpandItem={(item) => {
|
||||||
|
setOrgsTreeViewState(
|
||||||
|
({ expandedItems: prevExpandedItems, ...rest }) => ({
|
||||||
|
...rest,
|
||||||
|
// Add item index to expandedItems only if it's not already present
|
||||||
|
expandedItems: prevExpandedItems.includes(item.index)
|
||||||
|
? prevExpandedItems
|
||||||
|
: [...prevExpandedItems, item.index],
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
onCollapseItem={(item) => {
|
||||||
|
setOrgsTreeViewState(
|
||||||
|
({ expandedItems: prevExpandedItems, ...rest }) => ({
|
||||||
|
...rest,
|
||||||
|
// Remove the item index from expandedItems
|
||||||
|
expandedItems: prevExpandedItems.filter(
|
||||||
|
(index) => index !== item.index,
|
||||||
|
),
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
onFocusItem={(item) => {
|
||||||
|
setOrgsTreeViewState((prevViewState) => ({
|
||||||
|
...prevViewState,
|
||||||
|
// Set the focused item
|
||||||
|
focusedItem: item.index,
|
||||||
|
}));
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Tree treeId="nav-tree" rootItem="root" treeLabel="Navigation Tree" />
|
||||||
|
</ControlledTreeEnvironment>
|
||||||
|
);
|
||||||
|
}
|
||||||
89
dashboard/src/components/layout/MainNav/PinnedMainNav.tsx
Normal file
89
dashboard/src/components/layout/MainNav/PinnedMainNav.tsx
Normal file
@@ -0,0 +1,89 @@
|
|||||||
|
import NavTree from '@/components/layout/MainNav/NavTree';
|
||||||
|
import { Button } from '@/components/ui/v3/button';
|
||||||
|
import { Separator } from '@/components/ui/v3/separator';
|
||||||
|
import CreateOrgDialog from '@/features/orgs/components/CreateOrgFormDialog/CreateOrgFormDialog';
|
||||||
|
import { useWorkspaces } from '@/features/orgs/projects/hooks/useWorkspaces';
|
||||||
|
import { Pin, PinOff } from 'lucide-react';
|
||||||
|
import { useRouter } from 'next/router';
|
||||||
|
import { useEffect, useRef } from 'react';
|
||||||
|
import { useTreeNavState } from './TreeNavStateContext';
|
||||||
|
import WorkspacesNavTree from './WorkspacesNavTree';
|
||||||
|
|
||||||
|
export default function PinnedMainNav() {
|
||||||
|
const {
|
||||||
|
asPath,
|
||||||
|
query: { workspaceSlug, orgSlug },
|
||||||
|
} = useRouter();
|
||||||
|
|
||||||
|
const scrollContainerRef = useRef();
|
||||||
|
const { workspaces } = useWorkspaces();
|
||||||
|
const { mainNavPinned, setMainNavPinned } = useTreeNavState();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let observer: MutationObserver;
|
||||||
|
|
||||||
|
const scrollToElement = () => {
|
||||||
|
const element = document.querySelector(`a[href="${asPath}"]`);
|
||||||
|
if (element) {
|
||||||
|
element.scrollIntoView({ block: 'center' });
|
||||||
|
observer.disconnect(); // Stop observing once the element is found and scrolled to
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (scrollContainerRef.current) {
|
||||||
|
observer = new MutationObserver(scrollToElement);
|
||||||
|
|
||||||
|
// Start observing the tree container for child additions or subtree changes
|
||||||
|
observer.observe(scrollContainerRef.current, {
|
||||||
|
childList: true,
|
||||||
|
subtree: true,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Clean up the observer when the component unmounts or the effect re-runs
|
||||||
|
return () => {
|
||||||
|
if (observer) {
|
||||||
|
observer.disconnect();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}, [asPath]);
|
||||||
|
|
||||||
|
if (!orgSlug && !workspaceSlug) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="h-full w-full border-r p-0 sm:max-w-[310px]">
|
||||||
|
<div className="flex justify-end w-full h-12 p-1 border-b bg-background">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => setMainNavPinned(!mainNavPinned)}
|
||||||
|
>
|
||||||
|
{mainNavPinned ? (
|
||||||
|
<PinOff className="w-5 h-5" />
|
||||||
|
) : (
|
||||||
|
<Pin className="w-5 h-5" />
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
ref={scrollContainerRef}
|
||||||
|
className="h-[calc(100vh-7rem)] overflow-auto pb-12 pt-2 lg:h-[calc(100vh-6rem)]"
|
||||||
|
>
|
||||||
|
<div className="flex flex-col gap-1 px-2">
|
||||||
|
<NavTree />
|
||||||
|
<CreateOrgDialog />
|
||||||
|
</div>
|
||||||
|
{workspaces.length > 0 && (
|
||||||
|
<>
|
||||||
|
<Separator className="mx-auto my-2" />
|
||||||
|
<div className="px-2">
|
||||||
|
<WorkspacesNavTree />
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
120
dashboard/src/components/layout/MainNav/TreeNavStateContext.tsx
Normal file
120
dashboard/src/components/layout/MainNav/TreeNavStateContext.tsx
Normal file
@@ -0,0 +1,120 @@
|
|||||||
|
import { useNavTreeStateFromURL } from '@/features/orgs/projects/hooks/useNavTreeStateFromURL';
|
||||||
|
import { useWorkspacesNavTreeStateFromURL } from '@/features/orgs/projects/hooks/useWorkspacesNavTreeStateFromURL';
|
||||||
|
import { useSSRLocalStorage } from '@/hooks/useSSRLocalStorage';
|
||||||
|
import {
|
||||||
|
createContext,
|
||||||
|
useContext,
|
||||||
|
useEffect,
|
||||||
|
useMemo,
|
||||||
|
useState,
|
||||||
|
type Dispatch,
|
||||||
|
type ReactNode,
|
||||||
|
type SetStateAction,
|
||||||
|
} from 'react';
|
||||||
|
import type { IndividualTreeViewState } from 'react-complex-tree';
|
||||||
|
|
||||||
|
interface TreeNavStateContextType {
|
||||||
|
open: boolean;
|
||||||
|
setOpen: Dispatch<SetStateAction<boolean>>;
|
||||||
|
mainNavPinned: boolean;
|
||||||
|
orgsTreeViewState: IndividualTreeViewState<never>;
|
||||||
|
setOrgsTreeViewState: Dispatch<
|
||||||
|
SetStateAction<IndividualTreeViewState<never>>
|
||||||
|
>;
|
||||||
|
workspacesTreeViewState: IndividualTreeViewState<never>;
|
||||||
|
setWorkspacesTreeViewState: Dispatch<
|
||||||
|
SetStateAction<IndividualTreeViewState<never>>
|
||||||
|
>;
|
||||||
|
setMainNavPinned: (value: boolean) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const TreeNavStateContext = createContext<TreeNavStateContextType | undefined>(
|
||||||
|
undefined,
|
||||||
|
);
|
||||||
|
|
||||||
|
interface TreeNavProviderProps {
|
||||||
|
children: ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
function useSyncedTreeViewState(
|
||||||
|
useTreeStateFromURL: () => {
|
||||||
|
expandedItems: string[];
|
||||||
|
focusedItem: string | null;
|
||||||
|
},
|
||||||
|
) {
|
||||||
|
const { expandedItems, focusedItem } = useTreeStateFromURL();
|
||||||
|
|
||||||
|
const [state, setState] = useState<IndividualTreeViewState<never>>({
|
||||||
|
expandedItems,
|
||||||
|
focusedItem,
|
||||||
|
selectedItems: null,
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setState((prevState) => ({
|
||||||
|
...prevState,
|
||||||
|
expandedItems: [
|
||||||
|
...new Set([...prevState.expandedItems, ...expandedItems]),
|
||||||
|
],
|
||||||
|
focusedItem,
|
||||||
|
}));
|
||||||
|
}, [expandedItems, focusedItem]);
|
||||||
|
|
||||||
|
return { state, setState };
|
||||||
|
}
|
||||||
|
|
||||||
|
function TreeNavStateProvider({ children }: TreeNavProviderProps) {
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const [mainNavPinned, setMainNavPinned] = useSSRLocalStorage(
|
||||||
|
'pin-nav-tree',
|
||||||
|
true,
|
||||||
|
);
|
||||||
|
const orgsTreeViewState = useSyncedTreeViewState(useNavTreeStateFromURL);
|
||||||
|
|
||||||
|
const workspacesTreeViewState = useSyncedTreeViewState(
|
||||||
|
useWorkspacesNavTreeStateFromURL,
|
||||||
|
);
|
||||||
|
|
||||||
|
const value = useMemo(
|
||||||
|
() => ({
|
||||||
|
open,
|
||||||
|
setOpen,
|
||||||
|
mainNavPinned,
|
||||||
|
setMainNavPinned,
|
||||||
|
orgsTreeViewState: orgsTreeViewState.state,
|
||||||
|
setOrgsTreeViewState: orgsTreeViewState.setState,
|
||||||
|
workspacesTreeViewState: workspacesTreeViewState.state,
|
||||||
|
setWorkspacesTreeViewState: workspacesTreeViewState.setState,
|
||||||
|
}),
|
||||||
|
[
|
||||||
|
open,
|
||||||
|
setOpen,
|
||||||
|
mainNavPinned,
|
||||||
|
setMainNavPinned,
|
||||||
|
orgsTreeViewState.state,
|
||||||
|
orgsTreeViewState.setState,
|
||||||
|
workspacesTreeViewState.state,
|
||||||
|
workspacesTreeViewState.setState,
|
||||||
|
],
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<TreeNavStateContext.Provider value={value}>
|
||||||
|
{children}
|
||||||
|
</TreeNavStateContext.Provider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const useTreeNavState = (): TreeNavStateContextType => {
|
||||||
|
const context = useContext(TreeNavStateContext);
|
||||||
|
|
||||||
|
if (!context) {
|
||||||
|
throw new Error(
|
||||||
|
'useTreeNavState must be used within a TreeNavStateProvider',
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return context;
|
||||||
|
};
|
||||||
|
|
||||||
|
export { TreeNavStateProvider, useTreeNavState };
|
||||||
495
dashboard/src/components/layout/MainNav/WorkspacesNavTree.tsx
Normal file
495
dashboard/src/components/layout/MainNav/WorkspacesNavTree.tsx
Normal file
@@ -0,0 +1,495 @@
|
|||||||
|
import { AIIcon } from '@/components/ui/v2/icons/AIIcon';
|
||||||
|
import { ArrowSquareOutIcon } from '@/components/ui/v2/icons/ArrowSquareOutIcon';
|
||||||
|
import { CloudIcon } from '@/components/ui/v2/icons/CloudIcon';
|
||||||
|
import { DatabaseIcon } from '@/components/ui/v2/icons/DatabaseIcon';
|
||||||
|
import { FileTextIcon } from '@/components/ui/v2/icons/FileTextIcon';
|
||||||
|
import { GaugeIcon } from '@/components/ui/v2/icons/GaugeIcon';
|
||||||
|
import { GraphQLIcon } from '@/components/ui/v2/icons/GraphQLIcon';
|
||||||
|
import { HasuraIcon } from '@/components/ui/v2/icons/HasuraIcon';
|
||||||
|
import { HomeIcon } from '@/components/ui/v2/icons/HomeIcon';
|
||||||
|
import { RocketIcon } from '@/components/ui/v2/icons/RocketIcon';
|
||||||
|
import { ServicesIcon } from '@/components/ui/v2/icons/ServicesIcon';
|
||||||
|
import { StorageIcon } from '@/components/ui/v2/icons/StorageIcon';
|
||||||
|
import { UserIcon } from '@/components/ui/v2/icons/UserIcon';
|
||||||
|
import { Link } from '@/components/ui/v2/Link';
|
||||||
|
import { Button } from '@/components/ui/v3/button';
|
||||||
|
import {
|
||||||
|
HoverCard,
|
||||||
|
HoverCardContent,
|
||||||
|
HoverCardTrigger,
|
||||||
|
} from '@/components/ui/v3/hover-card';
|
||||||
|
import { useWorkspaces } from '@/features/orgs/projects/hooks/useWorkspaces';
|
||||||
|
import { type Workspace } from '@/features/orgs/projects/hooks/useWorkspaces/useWorkspaces';
|
||||||
|
import { useSSRLocalStorage } from '@/hooks/useSSRLocalStorage';
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
import { Box, ChevronDown, ChevronRight } from 'lucide-react';
|
||||||
|
import NextLink from 'next/link';
|
||||||
|
import { type ReactElement } from 'react';
|
||||||
|
|
||||||
|
import {
|
||||||
|
ControlledTreeEnvironment,
|
||||||
|
Tree,
|
||||||
|
type TreeItem,
|
||||||
|
type TreeItemIndex,
|
||||||
|
} from 'react-complex-tree';
|
||||||
|
import { useTreeNavState } from './TreeNavStateContext';
|
||||||
|
|
||||||
|
const projectPages = [
|
||||||
|
{
|
||||||
|
name: 'Overview',
|
||||||
|
icon: <HomeIcon className="w-4 h-4" />,
|
||||||
|
route: '',
|
||||||
|
slug: 'overview',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Database',
|
||||||
|
icon: <DatabaseIcon className="w-4 h-4" />,
|
||||||
|
route: 'database/browser/default',
|
||||||
|
slug: 'database',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'GraphQL',
|
||||||
|
icon: <GraphQLIcon className="w-4 h-4" />,
|
||||||
|
route: 'graphql',
|
||||||
|
slug: 'graphql',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Hasura',
|
||||||
|
icon: <HasuraIcon className="w-4 h-4" />,
|
||||||
|
route: 'hasura',
|
||||||
|
slug: 'hasura',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Auth',
|
||||||
|
icon: <UserIcon className="w-4 h-4" />,
|
||||||
|
route: 'users',
|
||||||
|
slug: 'users',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Storage',
|
||||||
|
icon: <StorageIcon className="w-4 h-4" />,
|
||||||
|
route: 'storage',
|
||||||
|
slug: 'storage',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Run',
|
||||||
|
icon: <ServicesIcon className="w-4 h-4" />,
|
||||||
|
route: 'services',
|
||||||
|
slug: 'services',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'AI',
|
||||||
|
icon: <AIIcon className="w-4 h-4" />,
|
||||||
|
route: 'ai/auto-embeddings',
|
||||||
|
slug: 'ai',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Deployments',
|
||||||
|
icon: <RocketIcon className="w-4 h-4" />,
|
||||||
|
route: 'deployments',
|
||||||
|
slug: 'deployments',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Backups',
|
||||||
|
icon: <CloudIcon className="w-4 h-4" />,
|
||||||
|
route: 'backups',
|
||||||
|
slug: 'backups',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Logs',
|
||||||
|
icon: <FileTextIcon className="w-4 h-4" />,
|
||||||
|
route: 'logs',
|
||||||
|
slug: 'logs',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Metrics',
|
||||||
|
icon: <GaugeIcon className="w-4 h-4" />,
|
||||||
|
route: 'metrics',
|
||||||
|
slug: 'metrics',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Settings',
|
||||||
|
route: 'settings/general',
|
||||||
|
slug: 'settings',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const projectSettingsPages = [
|
||||||
|
{ name: 'General', slug: 'general', route: 'general' },
|
||||||
|
{
|
||||||
|
name: 'Compute Resources',
|
||||||
|
slug: 'resources',
|
||||||
|
route: 'resources',
|
||||||
|
},
|
||||||
|
{ name: 'Database', slug: 'database', route: 'database' },
|
||||||
|
{ name: 'Hasura', slug: 'hasura', route: 'hasura' },
|
||||||
|
{
|
||||||
|
name: 'Authentication',
|
||||||
|
slug: 'authentication',
|
||||||
|
route: 'authentication',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Sign-In methods',
|
||||||
|
slug: 'sign-in-methods',
|
||||||
|
route: 'sign-in-methods',
|
||||||
|
},
|
||||||
|
{ name: 'Storage', slug: 'storage', route: 'storage' },
|
||||||
|
{
|
||||||
|
name: 'Roles and Permissions',
|
||||||
|
slug: 'roles-and-permissions',
|
||||||
|
route: 'roles-and-permissions',
|
||||||
|
},
|
||||||
|
{ name: 'SMTP', slug: 'smtp', route: 'smtp' },
|
||||||
|
{ name: 'Git', slug: 'git', route: 'git' },
|
||||||
|
{
|
||||||
|
name: 'Environment Variables',
|
||||||
|
slug: 'environment-variables',
|
||||||
|
route: 'environment-variables',
|
||||||
|
},
|
||||||
|
{ name: 'Secrets', slug: 'secrets', route: 'secrets' },
|
||||||
|
{
|
||||||
|
name: 'Custom Domains',
|
||||||
|
slug: 'custom-domains',
|
||||||
|
route: 'custom-domains',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Rate Limiting',
|
||||||
|
slug: 'rate-limiting',
|
||||||
|
route: 'rate-limiting',
|
||||||
|
},
|
||||||
|
{ name: 'AI', slug: 'ai', route: 'ai' },
|
||||||
|
{ name: 'Configuration Editor', slug: 'editor', route: 'editor' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const createWorkspace = (workspace: Workspace) => {
|
||||||
|
const result = {};
|
||||||
|
|
||||||
|
result[workspace.slug] = {
|
||||||
|
index: workspace.slug,
|
||||||
|
canMove: false,
|
||||||
|
isFolder: true,
|
||||||
|
children: [`${workspace.slug}-overview`, `${workspace.slug}-projects`],
|
||||||
|
data: {
|
||||||
|
name: workspace.name,
|
||||||
|
slug: workspace.slug,
|
||||||
|
type: 'workspace',
|
||||||
|
targetUrl: `/${workspace.slug}`,
|
||||||
|
},
|
||||||
|
canRename: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
result[`${workspace.slug}-overview`] = {
|
||||||
|
index: `${workspace.slug}-overview`,
|
||||||
|
canMove: false,
|
||||||
|
isFolder: false,
|
||||||
|
children: null,
|
||||||
|
data: {
|
||||||
|
name: 'Overview',
|
||||||
|
targetUrl: `/${workspace.slug}`,
|
||||||
|
},
|
||||||
|
canRename: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
result[`${workspace.slug}-projects`] = {
|
||||||
|
index: `${workspace.slug}-projects`,
|
||||||
|
canMove: false,
|
||||||
|
isFolder: true,
|
||||||
|
children: workspace.projects.map((app) => `${workspace.slug}-${app.slug}`),
|
||||||
|
data: {
|
||||||
|
name: 'Projects',
|
||||||
|
},
|
||||||
|
canRename: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
workspace.projects.forEach((app) => {
|
||||||
|
result[`${workspace.slug}-${app.slug}`] = {
|
||||||
|
index: `${workspace.slug}-${app.slug}`,
|
||||||
|
isFolder: true,
|
||||||
|
canMove: false,
|
||||||
|
canRename: false,
|
||||||
|
data: {
|
||||||
|
name: app.name,
|
||||||
|
slug: app.slug,
|
||||||
|
icon: <Box className="w-4 h-4" />,
|
||||||
|
targetUrl: `/${workspace.slug}/${app.slug}`,
|
||||||
|
},
|
||||||
|
children: projectPages.map(
|
||||||
|
(page) => `${workspace.slug}-${app.slug}-${page.slug}`,
|
||||||
|
),
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
workspace.projects.forEach((_app) => {
|
||||||
|
projectPages.forEach((_page) => {
|
||||||
|
result[`${workspace.slug}-${_app.slug}-${_page.slug}`] = {
|
||||||
|
index: `${workspace.slug}-${_app.slug}-${_page.slug}`,
|
||||||
|
canMove: false,
|
||||||
|
isFolder: _page.name === 'Settings',
|
||||||
|
children:
|
||||||
|
_page.name === 'Settings'
|
||||||
|
? projectSettingsPages.map(
|
||||||
|
(p) => `${workspace.slug}-${_app.slug}-settings-${p.slug}`,
|
||||||
|
)
|
||||||
|
: undefined,
|
||||||
|
data: {
|
||||||
|
name: _page.name,
|
||||||
|
icon: _page.icon,
|
||||||
|
isProjectPage: true,
|
||||||
|
targetUrl: `/${workspace.slug}/${_app.slug}/${_page.route}`,
|
||||||
|
},
|
||||||
|
canRename: false,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
// add the settings pages
|
||||||
|
projectSettingsPages.forEach((p) => {
|
||||||
|
result[`${workspace.slug}-${_app.slug}-settings-${p.slug}`] = {
|
||||||
|
index: `${workspace.slug}-${_app.slug}-settings-${p.slug}`,
|
||||||
|
canMove: false,
|
||||||
|
isFolder: false,
|
||||||
|
children: undefined,
|
||||||
|
data: {
|
||||||
|
name: p.name,
|
||||||
|
targetUrl: `/${workspace.slug}/${_app.slug}/settings/${p.route}`,
|
||||||
|
},
|
||||||
|
canRename: false,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
|
||||||
|
type NavItem = {
|
||||||
|
name: string;
|
||||||
|
slug?: string;
|
||||||
|
type?: string;
|
||||||
|
icon?: ReactElement;
|
||||||
|
targetUrl?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
const buildNavTreeData = (
|
||||||
|
workspaces: Workspace[],
|
||||||
|
): { items: Record<TreeItemIndex, TreeItem<NavItem>> } => {
|
||||||
|
const navTree = {
|
||||||
|
items: {
|
||||||
|
root: {
|
||||||
|
index: 'root',
|
||||||
|
canMove: false,
|
||||||
|
isFolder: true,
|
||||||
|
children: ['workspaces'],
|
||||||
|
data: { name: 'root' },
|
||||||
|
canRename: false,
|
||||||
|
},
|
||||||
|
workspaces: {
|
||||||
|
index: 'workspaces',
|
||||||
|
canMove: false,
|
||||||
|
isFolder: true,
|
||||||
|
children: workspaces.map((workspace) => workspace.slug),
|
||||||
|
data: { name: 'Workspaces', type: 'workspaces-root' },
|
||||||
|
canRename: false,
|
||||||
|
},
|
||||||
|
...workspaces.reduce(
|
||||||
|
(acc, workspace) => ({ ...acc, ...createWorkspace(workspace) }),
|
||||||
|
{},
|
||||||
|
),
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
return navTree;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function WorkspacesNavTree() {
|
||||||
|
const { workspaces } = useWorkspaces();
|
||||||
|
const navTree = buildNavTreeData(workspaces);
|
||||||
|
const [, setLastSlug] = useSSRLocalStorage('slug', null);
|
||||||
|
|
||||||
|
const { workspacesTreeViewState, setWorkspacesTreeViewState, setOpen } =
|
||||||
|
useTreeNavState();
|
||||||
|
|
||||||
|
const renderItem = ({ arrow, context, item, children }) => {
|
||||||
|
const navItemContent = () => (
|
||||||
|
<>
|
||||||
|
{item.data.icon && (
|
||||||
|
<span
|
||||||
|
className={cn(
|
||||||
|
'flex items-start',
|
||||||
|
context.isFocused ? 'text-primary' : '',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{item.data.icon}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<span
|
||||||
|
className={cn(
|
||||||
|
item?.index === 'workspaces' && 'font-bold',
|
||||||
|
context.isFocused ? 'font-bold text-primary' : '',
|
||||||
|
'max-w-52 truncate',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{item.data.name}
|
||||||
|
</span>
|
||||||
|
{item.data.type === 'workspaces-root' && (
|
||||||
|
<HoverCard openDelay={0}>
|
||||||
|
<HoverCardTrigger asChild>
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
'h-5 rounded-full bg-muted bg-orange-200 px-[6px] text-[10px] dark:bg-orange-500',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
Legacy
|
||||||
|
</div>
|
||||||
|
</HoverCardTrigger>
|
||||||
|
<HoverCardContent className="w-64" side="top">
|
||||||
|
<div className="whitespace-normal">
|
||||||
|
<span>For more information read the </span>
|
||||||
|
<Link
|
||||||
|
href="https://nhost.io/blog/organization-billing"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="font-medium"
|
||||||
|
>
|
||||||
|
announcement
|
||||||
|
<ArrowSquareOutIcon className="w-4 h-4 mb-1 ml-1" />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</HoverCardContent>
|
||||||
|
</HoverCard>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<li
|
||||||
|
{...context.itemContainerWithChildrenProps}
|
||||||
|
className="flex flex-col gap-1"
|
||||||
|
>
|
||||||
|
<div className="flex flex-row items-center">
|
||||||
|
{arrow}
|
||||||
|
<Button
|
||||||
|
asChild
|
||||||
|
onClick={() => {
|
||||||
|
if (item.data.type !== 'workspace') {
|
||||||
|
context.focusItem();
|
||||||
|
} else {
|
||||||
|
// persist last slug if the nav item is a workspace
|
||||||
|
setLastSlug(item.data.slug);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className={cn(
|
||||||
|
'flex h-8 w-full flex-row justify-start gap-1 bg-background px-1 text-foreground hover:bg-accent dark:hover:bg-muted',
|
||||||
|
context.isFocused &&
|
||||||
|
'bg-[#ebf3ff] hover:bg-[#ebf3ff] dark:bg-muted',
|
||||||
|
item.data.disabled && 'pointer-events-none opacity-50',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{item.data.targetUrl ? (
|
||||||
|
<NextLink
|
||||||
|
href={item.data.targetUrl || '/'}
|
||||||
|
onClick={() => setOpen(false)}
|
||||||
|
>
|
||||||
|
{navItemContent()}
|
||||||
|
</NextLink>
|
||||||
|
) : (
|
||||||
|
<div className="cursor-pointer">{navItemContent()}</div>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div>{children}</div>
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ControlledTreeEnvironment
|
||||||
|
items={navTree.items}
|
||||||
|
getItemTitle={(item) => item.data.name}
|
||||||
|
viewState={{
|
||||||
|
'workspaces-nav-tree': workspacesTreeViewState,
|
||||||
|
}}
|
||||||
|
renderItemTitle={({ title }) => <span>{title}</span>}
|
||||||
|
renderItemArrow={({ item, context }) => {
|
||||||
|
if (!item.isFolder) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
onClick={() => context.toggleExpandedState()}
|
||||||
|
className="h-8 px-1"
|
||||||
|
>
|
||||||
|
{context.isExpanded ? (
|
||||||
|
<ChevronDown className="w-4 h-4 font-bold" strokeWidth={3} />
|
||||||
|
) : (
|
||||||
|
<ChevronRight className="w-4 h-4" strokeWidth={3} />
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
renderItem={renderItem}
|
||||||
|
renderTreeContainer={({ children, containerProps }) => (
|
||||||
|
<div {...containerProps} className="w-full">
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
renderItemsContainer={({ children, containerProps, depth }) => {
|
||||||
|
if (depth === 0) {
|
||||||
|
return (
|
||||||
|
<ul {...containerProps} className="w-full">
|
||||||
|
{children}
|
||||||
|
</ul>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-row w-full">
|
||||||
|
<div className="flex justify-center px-[12px] pb-3">
|
||||||
|
<div className="w-0 h-full border-r border-dashed" />
|
||||||
|
</div>
|
||||||
|
<ul {...containerProps} className="w-full">
|
||||||
|
{children}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
canSearch={false}
|
||||||
|
onExpandItem={(item) => {
|
||||||
|
setWorkspacesTreeViewState(
|
||||||
|
({ expandedItems: prevExpandedItems, ...rest }) => ({
|
||||||
|
...rest,
|
||||||
|
// Add item index to expandedItems only if it's not already present
|
||||||
|
expandedItems: prevExpandedItems.includes(item.index)
|
||||||
|
? prevExpandedItems
|
||||||
|
: [...prevExpandedItems, item.index],
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
onCollapseItem={(item) => {
|
||||||
|
setWorkspacesTreeViewState(
|
||||||
|
({ expandedItems: prevExpandedItems, ...rest }) => ({
|
||||||
|
...rest,
|
||||||
|
// Remove the item index from expandedItems
|
||||||
|
expandedItems: prevExpandedItems.filter(
|
||||||
|
(index) => index !== item.index,
|
||||||
|
),
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
onFocusItem={(item) => {
|
||||||
|
setWorkspacesTreeViewState((prevViewState) => ({
|
||||||
|
...prevViewState,
|
||||||
|
// Set the focused item
|
||||||
|
focusedItem: item.index,
|
||||||
|
}));
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Tree
|
||||||
|
rootItem="root"
|
||||||
|
treeId="workspaces-nav-tree"
|
||||||
|
treeLabel="Workspaces Navigation Tree"
|
||||||
|
/>
|
||||||
|
</ControlledTreeEnvironment>
|
||||||
|
);
|
||||||
|
}
|
||||||
1
dashboard/src/components/layout/MainNav/index.ts
Normal file
1
dashboard/src/components/layout/MainNav/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export { default as MainNav } from './MainNav';
|
||||||
@@ -0,0 +1,123 @@
|
|||||||
|
import type { AuthenticatedLayoutProps } from '@/components/layout/AuthenticatedLayout';
|
||||||
|
import { AuthenticatedLayout } from '@/components/layout/AuthenticatedLayout';
|
||||||
|
import { DesktopNav } from '@/components/layout/DesktopNav';
|
||||||
|
import { LoadingScreen } from '@/components/presentational/LoadingScreen';
|
||||||
|
import type { BoxProps } from '@/components/ui/v2/Box';
|
||||||
|
import { Box } from '@/components/ui/v2/Box';
|
||||||
|
import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
|
||||||
|
import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
|
||||||
|
import { useNavigationVisible } from '@/features/projects/common/hooks/useNavigationVisible';
|
||||||
|
import { useProjectRoutes } from '@/features/projects/common/hooks/useProjectRoutes';
|
||||||
|
import { NextSeo } from 'next-seo';
|
||||||
|
import { useRouter } from 'next/router';
|
||||||
|
import { twMerge } from 'tailwind-merge';
|
||||||
|
|
||||||
|
export interface ProjectLayoutProps extends AuthenticatedLayoutProps {
|
||||||
|
/**
|
||||||
|
* Props passed to the internal `<main />` element.
|
||||||
|
*/
|
||||||
|
mainContainerProps?: BoxProps;
|
||||||
|
}
|
||||||
|
|
||||||
|
function ProjectLayoutContent({
|
||||||
|
children,
|
||||||
|
mainContainerProps: {
|
||||||
|
className: mainContainerClassName,
|
||||||
|
...mainContainerProps
|
||||||
|
} = {},
|
||||||
|
}: ProjectLayoutProps) {
|
||||||
|
const { currentProject, loading, error } = useCurrentWorkspaceAndProject();
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const shouldDisplayNav = useNavigationVisible();
|
||||||
|
const isPlatform = useIsPlatform();
|
||||||
|
const { nhostRoutes } = useProjectRoutes();
|
||||||
|
const pathWithoutWorkspaceAndProject = router.asPath.replace(
|
||||||
|
/^\/[\w\-_[\]]+\/[\w\-_[\]]+/i,
|
||||||
|
'',
|
||||||
|
);
|
||||||
|
const isRestrictedPath =
|
||||||
|
!isPlatform &&
|
||||||
|
nhostRoutes.some((route) =>
|
||||||
|
pathWithoutWorkspaceAndProject.startsWith(
|
||||||
|
route.relativeMainPath || route.relativePath,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
|
||||||
|
// useNotFoundRedirect();
|
||||||
|
|
||||||
|
// useEffect(() => {
|
||||||
|
// if (isPlatform || !router.isReady) {
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// TODO // Double check what restricted path means here
|
||||||
|
// if (isRestrictedPath) {
|
||||||
|
// router.push('/local/local');
|
||||||
|
// }
|
||||||
|
// }, [isPlatform, isRestrictedPath, router]);
|
||||||
|
|
||||||
|
if (isRestrictedPath || loading) {
|
||||||
|
return <LoadingScreen />;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!isPlatform) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<DesktopNav className="top-0 hidden w-20 shrink-0 flex-col items-start sm:flex" />
|
||||||
|
|
||||||
|
<Box
|
||||||
|
component="main"
|
||||||
|
className={twMerge(
|
||||||
|
'relative flex-auto overflow-y-auto',
|
||||||
|
mainContainerClassName,
|
||||||
|
)}
|
||||||
|
{...mainContainerProps}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
|
||||||
|
<NextSeo title="Local App" />
|
||||||
|
</Box>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{shouldDisplayNav && (
|
||||||
|
<DesktopNav className="top-0 hidden w-20 shrink-0 flex-col items-start sm:flex" />
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Box
|
||||||
|
component="main"
|
||||||
|
className={twMerge(
|
||||||
|
'relative flex-auto overflow-y-auto',
|
||||||
|
mainContainerClassName,
|
||||||
|
)}
|
||||||
|
{...mainContainerProps}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
|
||||||
|
<NextSeo title={currentProject?.name} />
|
||||||
|
</Box>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function OrgProjectLayout({
|
||||||
|
children,
|
||||||
|
mainContainerProps,
|
||||||
|
...props
|
||||||
|
}: ProjectLayoutProps) {
|
||||||
|
return (
|
||||||
|
<AuthenticatedLayout {...props}>
|
||||||
|
<ProjectLayoutContent mainContainerProps={mainContainerProps}>
|
||||||
|
{children}
|
||||||
|
</ProjectLayoutContent>
|
||||||
|
</AuthenticatedLayout>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
export { default as OrgProjectLayout } from './OrgProjectLayout';
|
||||||
@@ -1,16 +1,14 @@
|
|||||||
import type { AuthenticatedLayoutProps } from '@/components/layout/AuthenticatedLayout';
|
import type { AuthenticatedLayoutProps } from '@/components/layout/AuthenticatedLayout';
|
||||||
import { AuthenticatedLayout } from '@/components/layout/AuthenticatedLayout';
|
import { AuthenticatedLayout } from '@/components/layout/AuthenticatedLayout';
|
||||||
import { DesktopNav } from '@/components/layout/DesktopNav';
|
|
||||||
import { LoadingScreen } from '@/components/presentational/LoadingScreen';
|
import { LoadingScreen } from '@/components/presentational/LoadingScreen';
|
||||||
import type { BoxProps } from '@/components/ui/v2/Box';
|
import type { BoxProps } from '@/components/ui/v2/Box';
|
||||||
import { Box } from '@/components/ui/v2/Box';
|
import { Box } from '@/components/ui/v2/Box';
|
||||||
import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
|
import { useProject } from '@/features/orgs/projects/hooks/useProject';
|
||||||
import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
|
import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
|
||||||
import { useNavigationVisible } from '@/features/projects/common/hooks/useNavigationVisible';
|
|
||||||
import { useNotFoundRedirect } from '@/features/projects/common/hooks/useNotFoundRedirect';
|
|
||||||
import { useProjectRoutes } from '@/features/projects/common/hooks/useProjectRoutes';
|
import { useProjectRoutes } from '@/features/projects/common/hooks/useProjectRoutes';
|
||||||
import { NextSeo } from 'next-seo';
|
import { NextSeo } from 'next-seo';
|
||||||
import { useRouter } from 'next/router';
|
import { useRouter } from 'next/router';
|
||||||
|
import { useEffect } from 'react';
|
||||||
import { twMerge } from 'tailwind-merge';
|
import { twMerge } from 'tailwind-merge';
|
||||||
|
|
||||||
export interface ProjectLayoutProps extends AuthenticatedLayoutProps {
|
export interface ProjectLayoutProps extends AuthenticatedLayoutProps {
|
||||||
@@ -27,10 +25,8 @@ function ProjectLayoutContent({
|
|||||||
...mainContainerProps
|
...mainContainerProps
|
||||||
} = {},
|
} = {},
|
||||||
}: ProjectLayoutProps) {
|
}: ProjectLayoutProps) {
|
||||||
const { currentProject, loading, error } = useCurrentWorkspaceAndProject();
|
const { project, loading, error } = useProject();
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const shouldDisplayNav = useNavigationVisible();
|
|
||||||
const isPlatform = useIsPlatform();
|
const isPlatform = useIsPlatform();
|
||||||
const { nhostRoutes } = useProjectRoutes();
|
const { nhostRoutes } = useProjectRoutes();
|
||||||
const pathWithoutWorkspaceAndProject = router.asPath.replace(
|
const pathWithoutWorkspaceAndProject = router.asPath.replace(
|
||||||
@@ -45,18 +41,18 @@ function ProjectLayoutContent({
|
|||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
|
||||||
useNotFoundRedirect();
|
// TODO(orgs) 1
|
||||||
|
// useNotFoundRedirect();
|
||||||
|
|
||||||
// useEffect(() => {
|
useEffect(() => {
|
||||||
// if (isPlatform || !router.isReady) {
|
if (isPlatform || !router.isReady) {
|
||||||
// return;
|
return;
|
||||||
// }
|
}
|
||||||
|
|
||||||
// TODO // Double check what restricted path means here
|
if (isRestrictedPath) {
|
||||||
// if (isRestrictedPath) {
|
router.push('/local/local');
|
||||||
// router.push('/local/local');
|
}
|
||||||
// }
|
}, [isPlatform, isRestrictedPath, router]);
|
||||||
// }, [isPlatform, isRestrictedPath, router]);
|
|
||||||
|
|
||||||
if (isRestrictedPath || loading) {
|
if (isRestrictedPath || loading) {
|
||||||
return <LoadingScreen />;
|
return <LoadingScreen />;
|
||||||
@@ -68,31 +64,6 @@ function ProjectLayoutContent({
|
|||||||
|
|
||||||
if (!isPlatform) {
|
if (!isPlatform) {
|
||||||
return (
|
return (
|
||||||
<>
|
|
||||||
<DesktopNav className="top-0 hidden w-20 shrink-0 flex-col items-start sm:flex" />
|
|
||||||
|
|
||||||
<Box
|
|
||||||
component="main"
|
|
||||||
className={twMerge(
|
|
||||||
'relative flex-auto overflow-y-auto',
|
|
||||||
mainContainerClassName,
|
|
||||||
)}
|
|
||||||
{...mainContainerProps}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
|
|
||||||
<NextSeo title="Local App" />
|
|
||||||
</Box>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{shouldDisplayNav && (
|
|
||||||
<DesktopNav className="top-0 hidden w-20 shrink-0 flex-col items-start sm:flex" />
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Box
|
<Box
|
||||||
component="main"
|
component="main"
|
||||||
className={twMerge(
|
className={twMerge(
|
||||||
@@ -102,10 +73,24 @@ function ProjectLayoutContent({
|
|||||||
{...mainContainerProps}
|
{...mainContainerProps}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
|
<NextSeo title="Local App" />
|
||||||
<NextSeo title={currentProject?.name} />
|
|
||||||
</Box>
|
</Box>
|
||||||
</>
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
component="main"
|
||||||
|
className={twMerge(
|
||||||
|
'relative flex-auto overflow-y-auto',
|
||||||
|
mainContainerClassName,
|
||||||
|
)}
|
||||||
|
{...mainContainerProps}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
|
||||||
|
<NextSeo title={project?.name} />
|
||||||
|
</Box>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,98 +1,69 @@
|
|||||||
import type { ProjectLayoutProps } from '@/components/layout/ProjectLayout';
|
|
||||||
import { ProjectLayout } from '@/components/layout/ProjectLayout';
|
|
||||||
import type { SettingsSidebarProps } from '@/components/layout/SettingsSidebar';
|
|
||||||
import { SettingsSidebar } from '@/components/layout/SettingsSidebar';
|
|
||||||
import { RetryableErrorBoundary } from '@/components/presentational/RetryableErrorBoundary';
|
import { RetryableErrorBoundary } from '@/components/presentational/RetryableErrorBoundary';
|
||||||
import { Alert } from '@/components/ui/v2/Alert';
|
import { Alert } from '@/components/ui/v2/Alert';
|
||||||
import { Box } from '@/components/ui/v2/Box';
|
import { Box } from '@/components/ui/v2/Box';
|
||||||
import { Text } from '@/components/ui/v2/Text';
|
import { Text } from '@/components/ui/v2/Text';
|
||||||
|
import type { ProjectLayoutProps } from '@/features/orgs/layout/ProjectLayout';
|
||||||
import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
|
import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
|
||||||
import { useTheme } from '@mui/material';
|
import { useTheme } from '@mui/material';
|
||||||
import { twMerge } from 'tailwind-merge';
|
import { twMerge } from 'tailwind-merge';
|
||||||
|
|
||||||
export interface SettingsLayoutProps extends ProjectLayoutProps {
|
export interface SettingsLayoutProps extends ProjectLayoutProps {}
|
||||||
/**
|
|
||||||
* Props passed to the sidebar component.
|
|
||||||
*/
|
|
||||||
sidebarProps?: SettingsSidebarProps;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function SettingsLayout({
|
export default function SettingsLayout({ children }: SettingsLayoutProps) {
|
||||||
children,
|
|
||||||
mainContainerProps: {
|
|
||||||
className: mainContainerClassName,
|
|
||||||
...mainContainerProps
|
|
||||||
} = {},
|
|
||||||
sidebarProps: { className: sidebarClassName, ...sidebarProps } = {},
|
|
||||||
...props
|
|
||||||
}: SettingsLayoutProps) {
|
|
||||||
const theme = useTheme();
|
const theme = useTheme();
|
||||||
const { currentProject } = useCurrentWorkspaceAndProject();
|
const { currentProject } = useCurrentWorkspaceAndProject();
|
||||||
const hasGitRepo = !!currentProject?.githubRepository;
|
const hasGitRepo = !!currentProject?.githubRepository;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ProjectLayout
|
<Box
|
||||||
mainContainerProps={{
|
sx={{ backgroundColor: 'background.default' }}
|
||||||
className: twMerge('flex h-full', mainContainerClassName),
|
className="flex w-full flex-auto flex-col overflow-y-auto overflow-x-hidden"
|
||||||
...mainContainerProps,
|
|
||||||
}}
|
|
||||||
{...props}
|
|
||||||
>
|
>
|
||||||
<SettingsSidebar
|
|
||||||
className={twMerge('w-full max-w-sidebar', sidebarClassName)}
|
|
||||||
{...sidebarProps}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Box
|
<Box
|
||||||
sx={{ backgroundColor: 'background.default' }}
|
sx={{ backgroundColor: 'background.default' }}
|
||||||
className="flex w-full flex-auto flex-col overflow-y-auto overflow-x-hidden"
|
className="flex h-full flex-col"
|
||||||
>
|
>
|
||||||
<Box
|
<RetryableErrorBoundary>
|
||||||
sx={{ backgroundColor: 'background.default' }}
|
<div className="flex flex-col space-y-2">
|
||||||
className="flex h-full flex-col"
|
{hasGitRepo && (
|
||||||
>
|
<Alert
|
||||||
<RetryableErrorBoundary>
|
severity="warning"
|
||||||
<div className="flex flex-col space-y-2">
|
className="grid grid-flow-row place-content-center gap-2"
|
||||||
{hasGitRepo && (
|
>
|
||||||
<Alert
|
<Text color="warning" className="text-sm">
|
||||||
severity="warning"
|
As you have a connected repository, make sure to synchronize
|
||||||
className="grid grid-flow-row place-content-center gap-2"
|
your changes with{' '}
|
||||||
>
|
<code
|
||||||
<Text color="warning" className="text-sm ">
|
className={twMerge(
|
||||||
As you have a connected repository, make sure to synchronize
|
'rounded-md px-2 py-px',
|
||||||
your changes with{' '}
|
theme.palette.mode === 'dark'
|
||||||
<code
|
? 'bg-brown text-copper'
|
||||||
className={twMerge(
|
: 'bg-slate-200 text-slate-700',
|
||||||
'rounded-md px-2 py-px',
|
)}
|
||||||
theme.palette.mode === 'dark'
|
>
|
||||||
? 'bg-brown text-copper'
|
nhost config pull
|
||||||
: 'bg-slate-200 text-slate-700',
|
</code>{' '}
|
||||||
)}
|
or they may be reverted with the next push.
|
||||||
>
|
<br />
|
||||||
nhost config pull
|
If there are multiple projects linked to the same repository
|
||||||
</code>{' '}
|
and you only want these changes to apply to a subset of them,
|
||||||
or they may be reverted with the next push.
|
please check out{' '}
|
||||||
<br />
|
<a
|
||||||
If there are multiple projects linked to the same repository
|
target="_blank"
|
||||||
and you only want these changes to apply to a subset of
|
rel="noopener noreferrer"
|
||||||
them, please check out{' '}
|
className="underline"
|
||||||
<a
|
href="https://docs.nhost.io/cli/overlays"
|
||||||
target="_blank"
|
>
|
||||||
rel="noopener noreferrer"
|
docs.nhost.io/cli/overlays
|
||||||
className="underline"
|
</a>{' '}
|
||||||
href="https://docs.nhost.io/cli/overlays"
|
for guidance.
|
||||||
>
|
</Text>
|
||||||
docs.nhost.io/cli/overlays
|
</Alert>
|
||||||
</a>{' '}
|
)}
|
||||||
for guidance.
|
</div>
|
||||||
</Text>
|
{children}
|
||||||
</Alert>
|
</RetryableErrorBoundary>
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{children}
|
|
||||||
</RetryableErrorBoundary>
|
|
||||||
</Box>
|
|
||||||
</Box>
|
</Box>
|
||||||
</ProjectLayout>
|
</Box>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -59,19 +59,19 @@ export default function UnauthenticatedLayout({
|
|||||||
|
|
||||||
<RetryableErrorBoundary>
|
<RetryableErrorBoundary>
|
||||||
<Box
|
<Box
|
||||||
className="flex min-h-screen items-center"
|
className="flex items-center min-h-screen"
|
||||||
sx={{ backgroundColor: (theme) => theme.palette.common.black }}
|
sx={{ backgroundColor: (theme) => theme.palette.common.black }}
|
||||||
>
|
>
|
||||||
<Container
|
<Container
|
||||||
rootClassName="bg-transparent h-full"
|
rootClassName="bg-transparent h-full"
|
||||||
className="grid h-full w-full items-center justify-items-center gap-12 bg-transparent pt-8 pb-12 lg:grid-cols-2 lg:gap-4 lg:pt-0 lg:pb-0"
|
className="grid items-center w-full h-full gap-12 pt-8 pb-12 bg-transparent justify-items-center lg:grid-cols-2 lg:gap-4 lg:pb-0 lg:pt-0"
|
||||||
>
|
>
|
||||||
<div className="relative z-10 order-2 grid w-full max-w-[544px] grid-flow-row gap-12 lg:order-1">
|
<div className="relative z-10 order-2 grid w-full max-w-[544px] grid-flow-row gap-12 lg:order-1">
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="relative z-0 order-1 flex h-full w-full items-center justify-center md:min-h-[150px] lg:order-2 lg:min-h-[none]">
|
<div className="relative z-0 order-1 flex h-full w-full items-center justify-center md:min-h-[150px] lg:order-2 lg:min-h-[none]">
|
||||||
<div className="absolute top-0 left-0 right-0 bottom-0 mx-auto flex h-full w-full max-w-xl items-center justify-center opacity-70">
|
<div className="absolute top-0 bottom-0 left-0 right-0 flex items-center justify-center w-full h-full max-w-xl mx-auto overflow-hidden opacity-70">
|
||||||
<Image
|
<Image
|
||||||
priority
|
priority
|
||||||
src="/assets/line-grid.svg"
|
src="/assets/line-grid.svg"
|
||||||
|
|||||||
@@ -11,8 +11,9 @@ function Logo(
|
|||||||
return (
|
return (
|
||||||
<svg
|
<svg
|
||||||
ref={ref}
|
ref={ref}
|
||||||
width="32"
|
width="100%"
|
||||||
height="34"
|
height="100%"
|
||||||
|
viewBox="0 0 32 34"
|
||||||
fill="none"
|
fill="none"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
aria-label="Logo of Nhost"
|
aria-label="Logo of Nhost"
|
||||||
|
|||||||
@@ -5,14 +5,21 @@ import CssBaseline from '@mui/material/CssBaseline';
|
|||||||
import GlobalStyles from '@mui/material/GlobalStyles';
|
import GlobalStyles from '@mui/material/GlobalStyles';
|
||||||
import { ThemeProvider as MaterialThemeProvider } from '@mui/material/styles';
|
import { ThemeProvider as MaterialThemeProvider } from '@mui/material/styles';
|
||||||
import Head from 'next/head';
|
import Head from 'next/head';
|
||||||
import type { PropsWithChildren } from 'react';
|
import { useEffect, type PropsWithChildren } from 'react';
|
||||||
|
|
||||||
function ThemeProviderContent({
|
function ThemeProviderContent({
|
||||||
children,
|
children,
|
||||||
color: manualColor,
|
color: manualColor,
|
||||||
}: PropsWithChildren<{ color?: 'light' | 'dark' }>) {
|
}: PropsWithChildren<{ color?: 'light' | 'dark' }>) {
|
||||||
const { color } = useColorPreference();
|
const { color: preferredColor } = useColorPreference();
|
||||||
const theme = createTheme(manualColor || color);
|
const theme = createTheme(manualColor || preferredColor);
|
||||||
|
|
||||||
|
// Use effect to set the class on the root html tag
|
||||||
|
useEffect(() => {
|
||||||
|
const rootElement = document.documentElement;
|
||||||
|
rootElement.classList.remove('light', 'dark'); // Remove previous classes
|
||||||
|
rootElement.classList.add(preferredColor); // Add the current class
|
||||||
|
}, [preferredColor]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<MaterialThemeProvider theme={theme}>
|
<MaterialThemeProvider theme={theme}>
|
||||||
@@ -22,13 +29,14 @@ function ThemeProviderContent({
|
|||||||
'html, body': {
|
'html, body': {
|
||||||
backgroundColor: `${theme.palette.background.default} !important`,
|
backgroundColor: `${theme.palette.background.default} !important`,
|
||||||
},
|
},
|
||||||
|
html: {
|
||||||
|
class: `${preferredColor}`,
|
||||||
|
},
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Head>
|
<Head>
|
||||||
<meta name="theme-color" content={theme.palette.background.paper} />
|
<meta name="theme-color" content={theme.palette.background.paper} />
|
||||||
</Head>
|
</Head>
|
||||||
|
|
||||||
{children}
|
{children}
|
||||||
</MaterialThemeProvider>
|
</MaterialThemeProvider>
|
||||||
);
|
);
|
||||||
@@ -36,9 +44,9 @@ function ThemeProviderContent({
|
|||||||
|
|
||||||
export interface ThemeProviderProps extends PropsWithChildren<unknown> {
|
export interface ThemeProviderProps extends PropsWithChildren<unknown> {
|
||||||
/**
|
/**
|
||||||
* The key used to store the color preference in the local storage.
|
* The key used to store the color preference in local storage.
|
||||||
*
|
*
|
||||||
* @default 'color-mode'
|
* @default 'color-preference'
|
||||||
*/
|
*/
|
||||||
colorPreferenceStorageKey?: string;
|
colorPreferenceStorageKey?: string;
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -0,0 +1,45 @@
|
|||||||
|
import type { IconProps } from '@/components/ui/v2/icons';
|
||||||
|
import { SvgIcon } from '@/components/ui/v2/icons/SvgIcon';
|
||||||
|
import type { ForwardedRef } from 'react';
|
||||||
|
import { forwardRef } from 'react';
|
||||||
|
|
||||||
|
function InfoOutlinedIcon(props: IconProps, ref: ForwardedRef<SVGSVGElement>) {
|
||||||
|
return (
|
||||||
|
<SvgIcon
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
aria-label="Info"
|
||||||
|
stroke="currentColor"
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill="none"
|
||||||
|
d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
|
||||||
|
strokeWidth="2"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
fill="none"
|
||||||
|
d="M12 16V12"
|
||||||
|
strokeWidth="2"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
fill="none"
|
||||||
|
d="M12 8H12.01"
|
||||||
|
strokeWidth="2"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
</SvgIcon>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
InfoOutlinedIcon.displayName = 'NhostInfoOutlinedIcon';
|
||||||
|
|
||||||
|
export default forwardRef(InfoOutlinedIcon);
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
export { default as InfoOutlinedIcon } from './InfoOutlinedIcon';
|
||||||
139
dashboard/src/components/ui/v3/alert-dialog.tsx
Normal file
139
dashboard/src/components/ui/v3/alert-dialog.tsx
Normal file
@@ -0,0 +1,139 @@
|
|||||||
|
import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
|
||||||
|
import * as React from 'react';
|
||||||
|
|
||||||
|
import { buttonVariants } from '@/components/ui/v3/button';
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
|
const AlertDialog = AlertDialogPrimitive.Root;
|
||||||
|
|
||||||
|
const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
|
||||||
|
|
||||||
|
const AlertDialogPortal = AlertDialogPrimitive.Portal;
|
||||||
|
|
||||||
|
const AlertDialogOverlay = React.forwardRef<
|
||||||
|
React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<AlertDialogPrimitive.Overlay
|
||||||
|
className={cn(
|
||||||
|
'fixed inset-0 z-50 bg-black/30 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
ref={ref}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
|
||||||
|
|
||||||
|
const AlertDialogContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof AlertDialogPrimitive.Content>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<AlertDialogPortal>
|
||||||
|
<AlertDialogOverlay />
|
||||||
|
<AlertDialogPrimitive.Content
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</AlertDialogPortal>
|
||||||
|
));
|
||||||
|
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
|
||||||
|
|
||||||
|
const AlertDialogHeader = ({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
'flex flex-col space-y-2 text-center sm:text-left',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
AlertDialogHeader.displayName = 'AlertDialogHeader';
|
||||||
|
|
||||||
|
const AlertDialogFooter = ({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
AlertDialogFooter.displayName = 'AlertDialogFooter';
|
||||||
|
|
||||||
|
const AlertDialogTitle = React.forwardRef<
|
||||||
|
React.ElementRef<typeof AlertDialogPrimitive.Title>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<AlertDialogPrimitive.Title
|
||||||
|
ref={ref}
|
||||||
|
className={cn('text-lg font-semibold', className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
|
||||||
|
|
||||||
|
const AlertDialogDescription = React.forwardRef<
|
||||||
|
React.ElementRef<typeof AlertDialogPrimitive.Description>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<AlertDialogPrimitive.Description
|
||||||
|
ref={ref}
|
||||||
|
className={cn('text-sm text-muted-foreground', className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
AlertDialogDescription.displayName =
|
||||||
|
AlertDialogPrimitive.Description.displayName;
|
||||||
|
|
||||||
|
const AlertDialogAction = React.forwardRef<
|
||||||
|
React.ElementRef<typeof AlertDialogPrimitive.Action>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<AlertDialogPrimitive.Action
|
||||||
|
ref={ref}
|
||||||
|
className={cn(buttonVariants(), className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
|
||||||
|
|
||||||
|
const AlertDialogCancel = React.forwardRef<
|
||||||
|
React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<AlertDialogPrimitive.Cancel
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
buttonVariants({ variant: 'outline' }),
|
||||||
|
'mt-2 sm:mt-0',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
|
||||||
|
|
||||||
|
export {
|
||||||
|
AlertDialog,
|
||||||
|
AlertDialogPortal,
|
||||||
|
AlertDialogOverlay,
|
||||||
|
AlertDialogTrigger,
|
||||||
|
AlertDialogContent,
|
||||||
|
AlertDialogHeader,
|
||||||
|
AlertDialogFooter,
|
||||||
|
AlertDialogTitle,
|
||||||
|
AlertDialogDescription,
|
||||||
|
AlertDialogAction,
|
||||||
|
AlertDialogCancel,
|
||||||
|
};
|
||||||
61
dashboard/src/components/ui/v3/alert.tsx
Normal file
61
dashboard/src/components/ui/v3/alert.tsx
Normal file
@@ -0,0 +1,61 @@
|
|||||||
|
import { cva, type VariantProps } from 'class-variance-authority';
|
||||||
|
import * as React from 'react';
|
||||||
|
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
|
const alertVariants = cva(
|
||||||
|
'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default: 'bg-background text-foreground',
|
||||||
|
destructive:
|
||||||
|
'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: 'default',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
const Alert = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
|
||||||
|
>(({ className, variant, ...props }, ref) => (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
role="alert"
|
||||||
|
className={cn(alertVariants({ variant }), className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
Alert.displayName = 'Alert';
|
||||||
|
|
||||||
|
const AlertTitle = React.forwardRef<
|
||||||
|
HTMLParagraphElement,
|
||||||
|
React.HTMLAttributes<HTMLHeadingElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<h5
|
||||||
|
ref={ref}
|
||||||
|
className={cn('mb-1 font-medium leading-none tracking-tight', className)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{props.children}
|
||||||
|
</h5>
|
||||||
|
));
|
||||||
|
AlertTitle.displayName = 'AlertTitle';
|
||||||
|
|
||||||
|
const AlertDescription = React.forwardRef<
|
||||||
|
HTMLParagraphElement,
|
||||||
|
React.HTMLAttributes<HTMLParagraphElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
className={cn('text-sm [&_p]:leading-relaxed', className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
AlertDescription.displayName = 'AlertDescription';
|
||||||
|
|
||||||
|
export { Alert, AlertTitle, AlertDescription };
|
||||||
36
dashboard/src/components/ui/v3/badge.tsx
Normal file
36
dashboard/src/components/ui/v3/badge.tsx
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
import { cva, type VariantProps } from 'class-variance-authority';
|
||||||
|
import * as React from 'react';
|
||||||
|
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
|
const badgeVariants = cva(
|
||||||
|
'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default:
|
||||||
|
'border-transparent bg-primary text-primary-foreground hover:bg-primary/80 dark:text-white',
|
||||||
|
secondary:
|
||||||
|
'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
|
||||||
|
destructive:
|
||||||
|
'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
|
||||||
|
outline: 'text-foreground',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: 'default',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
export interface BadgeProps
|
||||||
|
extends React.HTMLAttributes<HTMLDivElement>,
|
||||||
|
VariantProps<typeof badgeVariants> {}
|
||||||
|
|
||||||
|
function Badge({ className, variant, ...props }: BadgeProps) {
|
||||||
|
return (
|
||||||
|
<div className={cn(badgeVariants({ variant }), className)} {...props} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Badge, badgeVariants };
|
||||||
115
dashboard/src/components/ui/v3/breadcrumb.tsx
Normal file
115
dashboard/src/components/ui/v3/breadcrumb.tsx
Normal file
@@ -0,0 +1,115 @@
|
|||||||
|
import { Slot } from '@radix-ui/react-slot';
|
||||||
|
import { ChevronRight, MoreHorizontal } from 'lucide-react';
|
||||||
|
import * as React from 'react';
|
||||||
|
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
|
const Breadcrumb = React.forwardRef<
|
||||||
|
HTMLElement,
|
||||||
|
React.ComponentPropsWithoutRef<'nav'> & {
|
||||||
|
separator?: React.ReactNode;
|
||||||
|
}
|
||||||
|
>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
|
||||||
|
Breadcrumb.displayName = 'Breadcrumb';
|
||||||
|
|
||||||
|
const BreadcrumbList = React.forwardRef<
|
||||||
|
HTMLOListElement,
|
||||||
|
React.ComponentPropsWithoutRef<'ol'>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<ol
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-1.5',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
BreadcrumbList.displayName = 'BreadcrumbList';
|
||||||
|
|
||||||
|
const BreadcrumbItem = React.forwardRef<
|
||||||
|
HTMLLIElement,
|
||||||
|
React.ComponentPropsWithoutRef<'li'>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<li
|
||||||
|
ref={ref}
|
||||||
|
className={cn('inline-flex items-center gap-1.5', className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
BreadcrumbItem.displayName = 'BreadcrumbItem';
|
||||||
|
|
||||||
|
const BreadcrumbLink = React.forwardRef<
|
||||||
|
HTMLAnchorElement,
|
||||||
|
React.ComponentPropsWithoutRef<'a'> & {
|
||||||
|
asChild?: boolean;
|
||||||
|
}
|
||||||
|
>(({ asChild, className, ...props }, ref) => {
|
||||||
|
const Comp = asChild ? Slot : 'a';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
ref={ref}
|
||||||
|
className={cn('transition-colors hover:text-foreground', className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
BreadcrumbLink.displayName = 'BreadcrumbLink';
|
||||||
|
|
||||||
|
const BreadcrumbPage = React.forwardRef<
|
||||||
|
HTMLSpanElement,
|
||||||
|
React.ComponentPropsWithoutRef<'span'>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<span
|
||||||
|
ref={ref}
|
||||||
|
role="link"
|
||||||
|
aria-disabled="true"
|
||||||
|
aria-current="page"
|
||||||
|
className={cn('font-normal text-foreground', className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
BreadcrumbPage.displayName = 'BreadcrumbPage';
|
||||||
|
|
||||||
|
const BreadcrumbSeparator = ({
|
||||||
|
children,
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<'li'>) => (
|
||||||
|
<li
|
||||||
|
role="presentation"
|
||||||
|
aria-hidden="true"
|
||||||
|
className={cn('[&>svg]:size-3.5', className)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children ?? <ChevronRight />}
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
BreadcrumbSeparator.displayName = 'BreadcrumbSeparator';
|
||||||
|
|
||||||
|
const BreadcrumbEllipsis = ({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<'span'>) => (
|
||||||
|
<span
|
||||||
|
role="presentation"
|
||||||
|
aria-hidden="true"
|
||||||
|
className={cn('flex h-9 w-9 items-center justify-center', className)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<MoreHorizontal className="w-4 h-4" />
|
||||||
|
<span className="sr-only">More</span>
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
BreadcrumbEllipsis.displayName = 'BreadcrumbElipssis';
|
||||||
|
|
||||||
|
export {
|
||||||
|
Breadcrumb,
|
||||||
|
BreadcrumbList,
|
||||||
|
BreadcrumbItem,
|
||||||
|
BreadcrumbLink,
|
||||||
|
BreadcrumbPage,
|
||||||
|
BreadcrumbSeparator,
|
||||||
|
BreadcrumbEllipsis,
|
||||||
|
};
|
||||||
56
dashboard/src/components/ui/v3/button.tsx
Normal file
56
dashboard/src/components/ui/v3/button.tsx
Normal file
@@ -0,0 +1,56 @@
|
|||||||
|
import { Slot } from '@radix-ui/react-slot';
|
||||||
|
import { cva, type VariantProps } from 'class-variance-authority';
|
||||||
|
import * as React from 'react';
|
||||||
|
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
|
const buttonVariants = cva(
|
||||||
|
'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default: 'bg-primary text-white hover:bg-primary/90',
|
||||||
|
destructive:
|
||||||
|
'bg-destructive text-destructive-foreground hover:bg-destructive/90',
|
||||||
|
outline:
|
||||||
|
'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
|
||||||
|
secondary:
|
||||||
|
'bg-secondary text-secondary-foreground hover:bg-secondary/80',
|
||||||
|
ghost: 'hover:bg-accent hover:text-accent-foreground',
|
||||||
|
link: 'text-primary underline-offset-4 hover:underline',
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
default: 'h-10 px-4 py-2',
|
||||||
|
sm: 'h-9 rounded-md px-3',
|
||||||
|
lg: 'h-11 rounded-md px-8',
|
||||||
|
icon: 'h-10 w-10',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: 'default',
|
||||||
|
size: 'default',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
export interface ButtonProps
|
||||||
|
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||||||
|
VariantProps<typeof buttonVariants> {
|
||||||
|
asChild?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||||
|
({ className, variant, size, asChild = false, ...props }, ref) => {
|
||||||
|
const Comp = asChild ? Slot : 'button';
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
className={cn(buttonVariants({ variant, size, className }))}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
Button.displayName = 'Button';
|
||||||
|
|
||||||
|
export { Button, buttonVariants };
|
||||||
28
dashboard/src/components/ui/v3/checkbox.tsx
Normal file
28
dashboard/src/components/ui/v3/checkbox.tsx
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
|
||||||
|
import { Check } from "lucide-react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
const Checkbox = React.forwardRef<
|
||||||
|
React.ElementRef<typeof CheckboxPrimitive.Root>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<CheckboxPrimitive.Root
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<CheckboxPrimitive.Indicator
|
||||||
|
className={cn("flex items-center justify-center text-current")}
|
||||||
|
>
|
||||||
|
<Check className="h-4 w-4" />
|
||||||
|
</CheckboxPrimitive.Indicator>
|
||||||
|
</CheckboxPrimitive.Root>
|
||||||
|
))
|
||||||
|
Checkbox.displayName = CheckboxPrimitive.Root.displayName
|
||||||
|
|
||||||
|
export { Checkbox }
|
||||||
153
dashboard/src/components/ui/v3/command.tsx
Normal file
153
dashboard/src/components/ui/v3/command.tsx
Normal file
@@ -0,0 +1,153 @@
|
|||||||
|
import { type DialogProps } from '@radix-ui/react-dialog';
|
||||||
|
import { Command as CommandPrimitive } from 'cmdk';
|
||||||
|
import { Search } from 'lucide-react';
|
||||||
|
import * as React from 'react';
|
||||||
|
|
||||||
|
import { Dialog, DialogContent } from '@/components/ui/v3/dialog';
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
|
const Command = React.forwardRef<
|
||||||
|
React.ElementRef<typeof CommandPrimitive>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof CommandPrimitive>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<CommandPrimitive
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
Command.displayName = CommandPrimitive.displayName;
|
||||||
|
|
||||||
|
interface CommandDialogProps extends DialogProps {}
|
||||||
|
|
||||||
|
const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
|
||||||
|
return (
|
||||||
|
<Dialog {...props}>
|
||||||
|
<DialogContent className="p-0 overflow-hidden shadow-lg">
|
||||||
|
<Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
|
||||||
|
{children}
|
||||||
|
</Command>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const CommandInput = React.forwardRef<
|
||||||
|
React.ElementRef<typeof CommandPrimitive.Input>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<div className="flex items-center px-3 border-b" cmdk-input-wrapper="">
|
||||||
|
<Search className="w-4 h-4 mr-2 opacity-50 shrink-0" />
|
||||||
|
<CommandPrimitive.Input
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
'flex h-11 w-full rounded-md border-none bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
));
|
||||||
|
|
||||||
|
CommandInput.displayName = CommandPrimitive.Input.displayName;
|
||||||
|
|
||||||
|
const CommandList = React.forwardRef<
|
||||||
|
React.ElementRef<typeof CommandPrimitive.List>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<CommandPrimitive.List
|
||||||
|
ref={ref}
|
||||||
|
className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
|
||||||
|
CommandList.displayName = CommandPrimitive.List.displayName;
|
||||||
|
|
||||||
|
const CommandEmpty = React.forwardRef<
|
||||||
|
React.ElementRef<typeof CommandPrimitive.Empty>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
|
||||||
|
>((props, ref) => (
|
||||||
|
<CommandPrimitive.Empty
|
||||||
|
ref={ref}
|
||||||
|
className="py-6 text-sm text-center"
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
|
||||||
|
CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
|
||||||
|
|
||||||
|
const CommandGroup = React.forwardRef<
|
||||||
|
React.ElementRef<typeof CommandPrimitive.Group>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<CommandPrimitive.Group
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
|
||||||
|
CommandGroup.displayName = CommandPrimitive.Group.displayName;
|
||||||
|
|
||||||
|
const CommandSeparator = React.forwardRef<
|
||||||
|
React.ElementRef<typeof CommandPrimitive.Separator>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<CommandPrimitive.Separator
|
||||||
|
ref={ref}
|
||||||
|
className={cn('-mx-1 h-px bg-border', className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
|
||||||
|
|
||||||
|
const CommandItem = React.forwardRef<
|
||||||
|
React.ElementRef<typeof CommandPrimitive.Item>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<CommandPrimitive.Item
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 data-[selected='true']:dark:bg-muted",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
|
||||||
|
CommandItem.displayName = CommandPrimitive.Item.displayName;
|
||||||
|
|
||||||
|
const CommandShortcut = ({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.HTMLAttributes<HTMLSpanElement>) => {
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
className={cn(
|
||||||
|
'ml-auto text-xs tracking-widest text-muted-foreground',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
CommandShortcut.displayName = 'CommandShortcut';
|
||||||
|
|
||||||
|
export {
|
||||||
|
Command,
|
||||||
|
CommandDialog,
|
||||||
|
CommandInput,
|
||||||
|
CommandList,
|
||||||
|
CommandEmpty,
|
||||||
|
CommandGroup,
|
||||||
|
CommandItem,
|
||||||
|
CommandShortcut,
|
||||||
|
CommandSeparator,
|
||||||
|
};
|
||||||
121
dashboard/src/components/ui/v3/dialog.tsx
Normal file
121
dashboard/src/components/ui/v3/dialog.tsx
Normal file
@@ -0,0 +1,121 @@
|
|||||||
|
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
||||||
|
import { X } from 'lucide-react';
|
||||||
|
import * as React from 'react';
|
||||||
|
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
|
const Dialog = DialogPrimitive.Root;
|
||||||
|
|
||||||
|
const DialogTrigger = DialogPrimitive.Trigger;
|
||||||
|
|
||||||
|
const DialogPortal = DialogPrimitive.Portal;
|
||||||
|
|
||||||
|
const DialogClose = DialogPrimitive.Close;
|
||||||
|
|
||||||
|
const DialogOverlay = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DialogPrimitive.Overlay>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<DialogPrimitive.Overlay
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
'fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/30 py-4 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
||||||
|
|
||||||
|
const DialogContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DialogPrimitive.Content>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
|
||||||
|
>(({ className, children, ...props }, ref) => (
|
||||||
|
<DialogPortal>
|
||||||
|
<DialogOverlay>
|
||||||
|
<DialogPrimitive.Content
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
'relative z-50 grid w-full max-w-lg gap-4 bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg md:w-full',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
|
||||||
|
<X className="h-4 w-4" />
|
||||||
|
<span className="sr-only">Close</span>
|
||||||
|
</DialogPrimitive.Close>
|
||||||
|
</DialogPrimitive.Content>
|
||||||
|
</DialogOverlay>
|
||||||
|
</DialogPortal>
|
||||||
|
));
|
||||||
|
DialogContent.displayName = DialogPrimitive.Content.displayName;
|
||||||
|
|
||||||
|
const DialogHeader = ({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
'flex flex-col space-y-1.5 text-center sm:text-left',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
DialogHeader.displayName = 'DialogHeader';
|
||||||
|
|
||||||
|
const DialogFooter = ({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
DialogFooter.displayName = 'DialogFooter';
|
||||||
|
|
||||||
|
const DialogTitle = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DialogPrimitive.Title>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<DialogPrimitive.Title
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
'text-lg font-semibold leading-none tracking-tight',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
DialogTitle.displayName = DialogPrimitive.Title.displayName;
|
||||||
|
|
||||||
|
const DialogDescription = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DialogPrimitive.Description>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<DialogPrimitive.Description
|
||||||
|
ref={ref}
|
||||||
|
className={cn('text-sm text-muted-foreground', className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
DialogDescription.displayName = DialogPrimitive.Description.displayName;
|
||||||
|
|
||||||
|
export {
|
||||||
|
Dialog,
|
||||||
|
DialogPortal,
|
||||||
|
DialogOverlay,
|
||||||
|
DialogClose,
|
||||||
|
DialogTrigger,
|
||||||
|
DialogContent,
|
||||||
|
DialogHeader,
|
||||||
|
DialogFooter,
|
||||||
|
DialogTitle,
|
||||||
|
DialogDescription,
|
||||||
|
};
|
||||||
198
dashboard/src/components/ui/v3/dropdown-menu.tsx
Normal file
198
dashboard/src/components/ui/v3/dropdown-menu.tsx
Normal file
@@ -0,0 +1,198 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
|
||||||
|
import { Check, ChevronRight, Circle } from "lucide-react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
const DropdownMenu = DropdownMenuPrimitive.Root
|
||||||
|
|
||||||
|
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
|
||||||
|
|
||||||
|
const DropdownMenuGroup = DropdownMenuPrimitive.Group
|
||||||
|
|
||||||
|
const DropdownMenuPortal = DropdownMenuPrimitive.Portal
|
||||||
|
|
||||||
|
const DropdownMenuSub = DropdownMenuPrimitive.Sub
|
||||||
|
|
||||||
|
const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
|
||||||
|
|
||||||
|
const DropdownMenuSubTrigger = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
|
||||||
|
inset?: boolean
|
||||||
|
}
|
||||||
|
>(({ className, inset, children, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.SubTrigger
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
|
||||||
|
inset && "pl-8",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<ChevronRight className="ml-auto h-4 w-4" />
|
||||||
|
</DropdownMenuPrimitive.SubTrigger>
|
||||||
|
))
|
||||||
|
DropdownMenuSubTrigger.displayName =
|
||||||
|
DropdownMenuPrimitive.SubTrigger.displayName
|
||||||
|
|
||||||
|
const DropdownMenuSubContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.SubContent
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
DropdownMenuSubContent.displayName =
|
||||||
|
DropdownMenuPrimitive.SubContent.displayName
|
||||||
|
|
||||||
|
const DropdownMenuContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
|
||||||
|
>(({ className, sideOffset = 4, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.Portal>
|
||||||
|
<DropdownMenuPrimitive.Content
|
||||||
|
ref={ref}
|
||||||
|
sideOffset={sideOffset}
|
||||||
|
className={cn(
|
||||||
|
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</DropdownMenuPrimitive.Portal>
|
||||||
|
))
|
||||||
|
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
|
||||||
|
|
||||||
|
const DropdownMenuItem = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.Item>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
|
||||||
|
inset?: boolean
|
||||||
|
}
|
||||||
|
>(({ className, inset, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.Item
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||||
|
inset && "pl-8",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
|
||||||
|
|
||||||
|
const DropdownMenuCheckboxItem = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
|
||||||
|
>(({ className, children, checked, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.CheckboxItem
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
checked={checked}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||||
|
<DropdownMenuPrimitive.ItemIndicator>
|
||||||
|
<Check className="h-4 w-4" />
|
||||||
|
</DropdownMenuPrimitive.ItemIndicator>
|
||||||
|
</span>
|
||||||
|
{children}
|
||||||
|
</DropdownMenuPrimitive.CheckboxItem>
|
||||||
|
))
|
||||||
|
DropdownMenuCheckboxItem.displayName =
|
||||||
|
DropdownMenuPrimitive.CheckboxItem.displayName
|
||||||
|
|
||||||
|
const DropdownMenuRadioItem = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
|
||||||
|
>(({ className, children, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.RadioItem
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||||
|
<DropdownMenuPrimitive.ItemIndicator>
|
||||||
|
<Circle className="h-2 w-2 fill-current" />
|
||||||
|
</DropdownMenuPrimitive.ItemIndicator>
|
||||||
|
</span>
|
||||||
|
{children}
|
||||||
|
</DropdownMenuPrimitive.RadioItem>
|
||||||
|
))
|
||||||
|
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
|
||||||
|
|
||||||
|
const DropdownMenuLabel = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.Label>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
|
||||||
|
inset?: boolean
|
||||||
|
}
|
||||||
|
>(({ className, inset, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.Label
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"px-2 py-1.5 text-sm font-semibold",
|
||||||
|
inset && "pl-8",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
|
||||||
|
|
||||||
|
const DropdownMenuSeparator = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<DropdownMenuPrimitive.Separator
|
||||||
|
ref={ref}
|
||||||
|
className={cn("-mx-1 my-1 h-px bg-muted", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
|
||||||
|
|
||||||
|
const DropdownMenuShortcut = ({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.HTMLAttributes<HTMLSpanElement>) => {
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
|
||||||
|
|
||||||
|
export {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuCheckboxItem,
|
||||||
|
DropdownMenuRadioItem,
|
||||||
|
DropdownMenuLabel,
|
||||||
|
DropdownMenuSeparator,
|
||||||
|
DropdownMenuShortcut,
|
||||||
|
DropdownMenuGroup,
|
||||||
|
DropdownMenuPortal,
|
||||||
|
DropdownMenuSub,
|
||||||
|
DropdownMenuSubContent,
|
||||||
|
DropdownMenuSubTrigger,
|
||||||
|
DropdownMenuRadioGroup,
|
||||||
|
}
|
||||||
175
dashboard/src/components/ui/v3/form.tsx
Normal file
175
dashboard/src/components/ui/v3/form.tsx
Normal file
@@ -0,0 +1,175 @@
|
|||||||
|
import type * as LabelPrimitive from '@radix-ui/react-label';
|
||||||
|
import { Slot } from '@radix-ui/react-slot';
|
||||||
|
import * as React from 'react';
|
||||||
|
import type { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
|
||||||
|
import { Controller, FormProvider, useFormContext } from 'react-hook-form';
|
||||||
|
|
||||||
|
import { Label } from '@/components/ui/v3/label';
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
|
const Form = FormProvider;
|
||||||
|
|
||||||
|
type FormFieldContextValue<
|
||||||
|
TFieldValues extends FieldValues = FieldValues,
|
||||||
|
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
|
||||||
|
> = {
|
||||||
|
name: TName;
|
||||||
|
};
|
||||||
|
|
||||||
|
const FormFieldContext = React.createContext<FormFieldContextValue>(
|
||||||
|
{} as FormFieldContextValue,
|
||||||
|
);
|
||||||
|
|
||||||
|
const FormField = <
|
||||||
|
TFieldValues extends FieldValues = FieldValues,
|
||||||
|
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
|
||||||
|
>({
|
||||||
|
...props
|
||||||
|
}: ControllerProps<TFieldValues, TName>) => {
|
||||||
|
const value = React.useMemo(() => ({ name: props.name }), [props.name]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FormFieldContext.Provider value={value}>
|
||||||
|
<Controller {...props} />
|
||||||
|
</FormFieldContext.Provider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
type FormItemContextValue = {
|
||||||
|
id: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
const FormItemContext = React.createContext<FormItemContextValue>(
|
||||||
|
{} as FormItemContextValue,
|
||||||
|
);
|
||||||
|
|
||||||
|
const useFormField = () => {
|
||||||
|
const fieldContext = React.useContext(FormFieldContext);
|
||||||
|
const itemContext = React.useContext(FormItemContext);
|
||||||
|
const { getFieldState, formState } = useFormContext();
|
||||||
|
|
||||||
|
const fieldState = getFieldState(fieldContext.name, formState);
|
||||||
|
|
||||||
|
if (!fieldContext) {
|
||||||
|
throw new Error('useFormField should be used within <FormField>');
|
||||||
|
}
|
||||||
|
|
||||||
|
const { id } = itemContext;
|
||||||
|
|
||||||
|
return {
|
||||||
|
id,
|
||||||
|
name: fieldContext.name,
|
||||||
|
formItemId: `${id}-form-item`,
|
||||||
|
formDescriptionId: `${id}-form-item-description`,
|
||||||
|
formMessageId: `${id}-form-item-message`,
|
||||||
|
...fieldState,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const FormItem = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.HTMLAttributes<HTMLDivElement>
|
||||||
|
>(({ className, ...props }, ref) => {
|
||||||
|
const id = React.useId();
|
||||||
|
|
||||||
|
const contextValue = React.useMemo(() => ({ id }), [id]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FormItemContext.Provider value={contextValue}>
|
||||||
|
<div ref={ref} className={cn('space-y-2', className)} {...props} />
|
||||||
|
</FormItemContext.Provider>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
FormItem.displayName = 'FormItem';
|
||||||
|
|
||||||
|
const FormLabel = React.forwardRef<
|
||||||
|
React.ElementRef<typeof LabelPrimitive.Root>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
|
||||||
|
>(({ className, ...props }, ref) => {
|
||||||
|
const { error, formItemId } = useFormField();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Label
|
||||||
|
ref={ref}
|
||||||
|
className={cn(error && 'text-destructive', className)}
|
||||||
|
htmlFor={formItemId}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
FormLabel.displayName = 'FormLabel';
|
||||||
|
|
||||||
|
const FormControl = React.forwardRef<
|
||||||
|
React.ElementRef<typeof Slot>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof Slot>
|
||||||
|
>(({ ...props }, ref) => {
|
||||||
|
const { error, formItemId, formDescriptionId, formMessageId } =
|
||||||
|
useFormField();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Slot
|
||||||
|
ref={ref}
|
||||||
|
id={formItemId}
|
||||||
|
aria-describedby={
|
||||||
|
!error
|
||||||
|
? `${formDescriptionId}`
|
||||||
|
: `${formDescriptionId} ${formMessageId}`
|
||||||
|
}
|
||||||
|
aria-invalid={!!error}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
FormControl.displayName = 'FormControl';
|
||||||
|
|
||||||
|
const FormDescription = React.forwardRef<
|
||||||
|
HTMLParagraphElement,
|
||||||
|
React.HTMLAttributes<HTMLParagraphElement>
|
||||||
|
>(({ className, ...props }, ref) => {
|
||||||
|
const { formDescriptionId } = useFormField();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<p
|
||||||
|
ref={ref}
|
||||||
|
id={formDescriptionId}
|
||||||
|
className={cn('text-sm text-muted-foreground', className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
FormDescription.displayName = 'FormDescription';
|
||||||
|
|
||||||
|
const FormMessage = React.forwardRef<
|
||||||
|
HTMLParagraphElement,
|
||||||
|
React.HTMLAttributes<HTMLParagraphElement>
|
||||||
|
>(({ className, children, ...props }, ref) => {
|
||||||
|
const { error, formMessageId } = useFormField();
|
||||||
|
const body = error ? String(error?.message) : children;
|
||||||
|
|
||||||
|
if (!body) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<p
|
||||||
|
ref={ref}
|
||||||
|
id={formMessageId}
|
||||||
|
className={cn('text-sm font-medium text-destructive', className)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{body}
|
||||||
|
</p>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
FormMessage.displayName = 'FormMessage';
|
||||||
|
|
||||||
|
export {
|
||||||
|
useFormField,
|
||||||
|
Form,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
FormControl,
|
||||||
|
FormDescription,
|
||||||
|
FormMessage,
|
||||||
|
FormField,
|
||||||
|
};
|
||||||
27
dashboard/src/components/ui/v3/hover-card.tsx
Normal file
27
dashboard/src/components/ui/v3/hover-card.tsx
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
const HoverCard = HoverCardPrimitive.Root
|
||||||
|
|
||||||
|
const HoverCardTrigger = HoverCardPrimitive.Trigger
|
||||||
|
|
||||||
|
const HoverCardContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof HoverCardPrimitive.Content>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
|
||||||
|
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
|
||||||
|
<HoverCardPrimitive.Content
|
||||||
|
ref={ref}
|
||||||
|
align={align}
|
||||||
|
sideOffset={sideOffset}
|
||||||
|
className={cn(
|
||||||
|
"z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
|
||||||
|
|
||||||
|
export { HoverCard, HoverCardTrigger, HoverCardContent }
|
||||||
25
dashboard/src/components/ui/v3/input.tsx
Normal file
25
dashboard/src/components/ui/v3/input.tsx
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
import * as React from 'react';
|
||||||
|
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
|
export interface InputProps
|
||||||
|
extends React.InputHTMLAttributes<HTMLInputElement> {}
|
||||||
|
|
||||||
|
const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
||||||
|
({ className, type, ...props }, ref) => {
|
||||||
|
return (
|
||||||
|
<input
|
||||||
|
type={type}
|
||||||
|
className={cn(
|
||||||
|
'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-accent',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
Input.displayName = 'Input';
|
||||||
|
|
||||||
|
export { Input };
|
||||||
24
dashboard/src/components/ui/v3/label.tsx
Normal file
24
dashboard/src/components/ui/v3/label.tsx
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import * as LabelPrimitive from "@radix-ui/react-label"
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
const labelVariants = cva(
|
||||||
|
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||||
|
)
|
||||||
|
|
||||||
|
const Label = React.forwardRef<
|
||||||
|
React.ElementRef<typeof LabelPrimitive.Root>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
|
||||||
|
VariantProps<typeof labelVariants>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<LabelPrimitive.Root
|
||||||
|
ref={ref}
|
||||||
|
className={cn(labelVariants(), className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
Label.displayName = LabelPrimitive.Root.displayName
|
||||||
|
|
||||||
|
export { Label }
|
||||||
29
dashboard/src/components/ui/v3/popover.tsx
Normal file
29
dashboard/src/components/ui/v3/popover.tsx
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import * as PopoverPrimitive from "@radix-ui/react-popover"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
const Popover = PopoverPrimitive.Root
|
||||||
|
|
||||||
|
const PopoverTrigger = PopoverPrimitive.Trigger
|
||||||
|
|
||||||
|
const PopoverContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof PopoverPrimitive.Content>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
|
||||||
|
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
|
||||||
|
<PopoverPrimitive.Portal>
|
||||||
|
<PopoverPrimitive.Content
|
||||||
|
ref={ref}
|
||||||
|
align={align}
|
||||||
|
sideOffset={sideOffset}
|
||||||
|
className={cn(
|
||||||
|
"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</PopoverPrimitive.Portal>
|
||||||
|
))
|
||||||
|
PopoverContent.displayName = PopoverPrimitive.Content.displayName
|
||||||
|
|
||||||
|
export { Popover, PopoverTrigger, PopoverContent }
|
||||||
33
dashboard/src/components/ui/v3/progress.tsx
Normal file
33
dashboard/src/components/ui/v3/progress.tsx
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
import * as ProgressPrimitive from '@radix-ui/react-progress';
|
||||||
|
import * as React from 'react';
|
||||||
|
|
||||||
|
interface ProgressProps
|
||||||
|
extends React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> {
|
||||||
|
indeterminate?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const Progress = React.forwardRef<
|
||||||
|
React.ElementRef<typeof ProgressPrimitive.Root>,
|
||||||
|
ProgressProps
|
||||||
|
>(({ className, value, indeterminate = false, ...props }, ref) => (
|
||||||
|
<ProgressPrimitive.Root
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
'relative h-4 w-full overflow-hidden rounded-full bg-secondary',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ProgressPrimitive.Indicator
|
||||||
|
className={cn(
|
||||||
|
'h-full w-full flex-1 rounded-full bg-primary transition-all',
|
||||||
|
indeterminate && 'animate-progress origin-left',
|
||||||
|
)}
|
||||||
|
style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
|
||||||
|
/>
|
||||||
|
</ProgressPrimitive.Root>
|
||||||
|
));
|
||||||
|
Progress.displayName = ProgressPrimitive.Root.displayName;
|
||||||
|
|
||||||
|
export { Progress };
|
||||||
42
dashboard/src/components/ui/v3/radio-group.tsx
Normal file
42
dashboard/src/components/ui/v3/radio-group.tsx
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
|
||||||
|
import { Circle } from "lucide-react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
const RadioGroup = React.forwardRef<
|
||||||
|
React.ElementRef<typeof RadioGroupPrimitive.Root>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
|
||||||
|
>(({ className, ...props }, ref) => {
|
||||||
|
return (
|
||||||
|
<RadioGroupPrimitive.Root
|
||||||
|
className={cn("grid gap-2", className)}
|
||||||
|
{...props}
|
||||||
|
ref={ref}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
|
||||||
|
|
||||||
|
const RadioGroupItem = React.forwardRef<
|
||||||
|
React.ElementRef<typeof RadioGroupPrimitive.Item>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
|
||||||
|
>(({ className, ...props }, ref) => {
|
||||||
|
return (
|
||||||
|
<RadioGroupPrimitive.Item
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<RadioGroupPrimitive.Indicator className="flex items-center justify-center">
|
||||||
|
<Circle className="h-2.5 w-2.5 fill-current text-current" />
|
||||||
|
</RadioGroupPrimitive.Indicator>
|
||||||
|
</RadioGroupPrimitive.Item>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
|
||||||
|
|
||||||
|
export { RadioGroup, RadioGroupItem }
|
||||||
158
dashboard/src/components/ui/v3/select.tsx
Normal file
158
dashboard/src/components/ui/v3/select.tsx
Normal file
@@ -0,0 +1,158 @@
|
|||||||
|
import * as SelectPrimitive from '@radix-ui/react-select';
|
||||||
|
import { Check, ChevronDown, ChevronUp } from 'lucide-react';
|
||||||
|
import * as React from 'react';
|
||||||
|
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
|
const Select = SelectPrimitive.Root;
|
||||||
|
|
||||||
|
const SelectGroup = SelectPrimitive.Group;
|
||||||
|
|
||||||
|
const SelectValue = SelectPrimitive.Value;
|
||||||
|
|
||||||
|
const SelectTrigger = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SelectPrimitive.Trigger>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
|
||||||
|
>(({ className, children, ...props }, ref) => (
|
||||||
|
<SelectPrimitive.Trigger
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<SelectPrimitive.Icon asChild>
|
||||||
|
<ChevronDown className="w-4 h-4 opacity-50" />
|
||||||
|
</SelectPrimitive.Icon>
|
||||||
|
</SelectPrimitive.Trigger>
|
||||||
|
));
|
||||||
|
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
|
||||||
|
|
||||||
|
const SelectScrollUpButton = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<SelectPrimitive.ScrollUpButton
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
'flex cursor-default items-center justify-center py-1',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ChevronUp className="w-4 h-4" />
|
||||||
|
</SelectPrimitive.ScrollUpButton>
|
||||||
|
));
|
||||||
|
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
|
||||||
|
|
||||||
|
const SelectScrollDownButton = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<SelectPrimitive.ScrollDownButton
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
'flex cursor-default items-center justify-center py-1',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ChevronDown className="w-4 h-4" />
|
||||||
|
</SelectPrimitive.ScrollDownButton>
|
||||||
|
));
|
||||||
|
SelectScrollDownButton.displayName =
|
||||||
|
SelectPrimitive.ScrollDownButton.displayName;
|
||||||
|
|
||||||
|
const SelectContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SelectPrimitive.Content>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
|
||||||
|
>(({ className, children, position = 'popper', ...props }, ref) => (
|
||||||
|
<SelectPrimitive.Portal>
|
||||||
|
<SelectPrimitive.Content
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
|
||||||
|
position === 'popper' &&
|
||||||
|
'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
position={position}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<SelectScrollUpButton />
|
||||||
|
<SelectPrimitive.Viewport
|
||||||
|
className={cn(
|
||||||
|
'p-1',
|
||||||
|
position === 'popper' &&
|
||||||
|
'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</SelectPrimitive.Viewport>
|
||||||
|
<SelectScrollDownButton />
|
||||||
|
</SelectPrimitive.Content>
|
||||||
|
</SelectPrimitive.Portal>
|
||||||
|
));
|
||||||
|
SelectContent.displayName = SelectPrimitive.Content.displayName;
|
||||||
|
|
||||||
|
const SelectLabel = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SelectPrimitive.Label>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<SelectPrimitive.Label
|
||||||
|
ref={ref}
|
||||||
|
className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
SelectLabel.displayName = SelectPrimitive.Label.displayName;
|
||||||
|
|
||||||
|
const SelectItem = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SelectPrimitive.Item>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
|
||||||
|
>(({ className, children, ...props }, ref) => (
|
||||||
|
<SelectPrimitive.Item
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||||
|
<SelectPrimitive.ItemIndicator>
|
||||||
|
<Check className="w-4 h-4" />
|
||||||
|
</SelectPrimitive.ItemIndicator>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
||||||
|
</SelectPrimitive.Item>
|
||||||
|
));
|
||||||
|
SelectItem.displayName = SelectPrimitive.Item.displayName;
|
||||||
|
|
||||||
|
const SelectSeparator = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SelectPrimitive.Separator>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<SelectPrimitive.Separator
|
||||||
|
ref={ref}
|
||||||
|
className={cn('-mx-1 my-1 h-px bg-muted', className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
|
||||||
|
|
||||||
|
export {
|
||||||
|
Select,
|
||||||
|
SelectGroup,
|
||||||
|
SelectValue,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectContent,
|
||||||
|
SelectLabel,
|
||||||
|
SelectItem,
|
||||||
|
SelectSeparator,
|
||||||
|
SelectScrollUpButton,
|
||||||
|
SelectScrollDownButton,
|
||||||
|
};
|
||||||
29
dashboard/src/components/ui/v3/separator.tsx
Normal file
29
dashboard/src/components/ui/v3/separator.tsx
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import * as SeparatorPrimitive from "@radix-ui/react-separator"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
const Separator = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SeparatorPrimitive.Root>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
|
||||||
|
>(
|
||||||
|
(
|
||||||
|
{ className, orientation = "horizontal", decorative = true, ...props },
|
||||||
|
ref
|
||||||
|
) => (
|
||||||
|
<SeparatorPrimitive.Root
|
||||||
|
ref={ref}
|
||||||
|
decorative={decorative}
|
||||||
|
orientation={orientation}
|
||||||
|
className={cn(
|
||||||
|
"shrink-0 bg-border",
|
||||||
|
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
)
|
||||||
|
Separator.displayName = SeparatorPrimitive.Root.displayName
|
||||||
|
|
||||||
|
export { Separator }
|
||||||
8
dashboard/src/components/ui/v3/shadcn-theme-provider.tsx
Normal file
8
dashboard/src/components/ui/v3/shadcn-theme-provider.tsx
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
import { ThemeProvider as NextThemesProvider } from 'next-themes';
|
||||||
|
import { type ThemeProviderProps } from 'next-themes/dist/types';
|
||||||
|
|
||||||
|
export const ShadcnThemeProvider = (
|
||||||
|
props: ThemeProviderProps,
|
||||||
|
): React.JSX.Element => {
|
||||||
|
return NextThemesProvider(props) as React.JSX.Element;
|
||||||
|
};
|
||||||
162
dashboard/src/components/ui/v3/sheet.tsx
Normal file
162
dashboard/src/components/ui/v3/sheet.tsx
Normal file
@@ -0,0 +1,162 @@
|
|||||||
|
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||||
|
import * as SheetPrimitive from '@radix-ui/react-dialog';
|
||||||
|
import { cva, type VariantProps } from 'class-variance-authority';
|
||||||
|
import { X } from 'lucide-react';
|
||||||
|
import * as React from 'react';
|
||||||
|
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
|
const Sheet = SheetPrimitive.Root;
|
||||||
|
|
||||||
|
const SheetTrigger = SheetPrimitive.Trigger;
|
||||||
|
|
||||||
|
const SheetClose = SheetPrimitive.Close;
|
||||||
|
|
||||||
|
const SheetPortal = SheetPrimitive.Portal;
|
||||||
|
|
||||||
|
const SheetOverlay = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SheetPrimitive.Overlay>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
|
||||||
|
// eslint-disable-next-line react/prop-types
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<SheetPrimitive.Overlay
|
||||||
|
className={cn(
|
||||||
|
'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
ref={ref}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
|
||||||
|
|
||||||
|
const sheetVariants = cva(
|
||||||
|
'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
side: {
|
||||||
|
top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
|
||||||
|
bottom:
|
||||||
|
'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
|
||||||
|
left: 'left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
|
||||||
|
right:
|
||||||
|
'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
side: 'right',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
interface SheetContentProps
|
||||||
|
extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
|
||||||
|
VariantProps<typeof sheetVariants> {
|
||||||
|
container?: HTMLElement;
|
||||||
|
hideCloseButton?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const SheetContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SheetPrimitive.Content>,
|
||||||
|
SheetContentProps
|
||||||
|
>(
|
||||||
|
(
|
||||||
|
{
|
||||||
|
side = 'right',
|
||||||
|
className,
|
||||||
|
container,
|
||||||
|
hideCloseButton,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
},
|
||||||
|
ref,
|
||||||
|
) => (
|
||||||
|
<SheetPortal container={container}>
|
||||||
|
<SheetPrimitive.Content
|
||||||
|
ref={ref}
|
||||||
|
className={cn(sheetVariants({ side }), className)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
{!hideCloseButton && (
|
||||||
|
<SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
|
||||||
|
<X className="w-4 h-4" />
|
||||||
|
<span className="sr-only">Close</span>
|
||||||
|
</SheetPrimitive.Close>
|
||||||
|
)}
|
||||||
|
</SheetPrimitive.Content>
|
||||||
|
</SheetPortal>
|
||||||
|
),
|
||||||
|
);
|
||||||
|
SheetContent.displayName = SheetPrimitive.Content.displayName;
|
||||||
|
|
||||||
|
function SheetHeader({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.HTMLAttributes<HTMLDivElement>) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
'flex flex-col space-y-2 text-center sm:text-left',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
SheetHeader.displayName = 'SheetHeader';
|
||||||
|
|
||||||
|
function SheetFooter({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.HTMLAttributes<HTMLDivElement>) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
SheetFooter.displayName = 'SheetFooter';
|
||||||
|
|
||||||
|
const SheetTitle = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SheetPrimitive.Title>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
|
||||||
|
// eslint-disable-next-line react/prop-types
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<SheetPrimitive.Title
|
||||||
|
ref={ref}
|
||||||
|
className={cn('text-lg font-semibold text-foreground', className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
SheetTitle.displayName = SheetPrimitive.Title.displayName;
|
||||||
|
|
||||||
|
const SheetDescription = React.forwardRef<
|
||||||
|
React.ElementRef<typeof SheetPrimitive.Description>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
|
||||||
|
// eslint-disable-next-line react/prop-types
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<SheetPrimitive.Description
|
||||||
|
ref={ref}
|
||||||
|
className={cn('text-sm text-muted-foreground', className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
));
|
||||||
|
SheetDescription.displayName = SheetPrimitive.Description.displayName;
|
||||||
|
|
||||||
|
export {
|
||||||
|
Sheet,
|
||||||
|
SheetPortal,
|
||||||
|
SheetOverlay,
|
||||||
|
SheetTrigger,
|
||||||
|
SheetClose,
|
||||||
|
SheetContent,
|
||||||
|
SheetHeader,
|
||||||
|
SheetFooter,
|
||||||
|
SheetTitle,
|
||||||
|
SheetDescription,
|
||||||
|
};
|
||||||
117
dashboard/src/components/ui/v3/table.tsx
Normal file
117
dashboard/src/components/ui/v3/table.tsx
Normal file
@@ -0,0 +1,117 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
const Table = React.forwardRef<
|
||||||
|
HTMLTableElement,
|
||||||
|
React.HTMLAttributes<HTMLTableElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<div className="relative w-full overflow-auto">
|
||||||
|
<table
|
||||||
|
ref={ref}
|
||||||
|
className={cn("w-full caption-bottom text-sm", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
Table.displayName = "Table"
|
||||||
|
|
||||||
|
const TableHeader = React.forwardRef<
|
||||||
|
HTMLTableSectionElement,
|
||||||
|
React.HTMLAttributes<HTMLTableSectionElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
|
||||||
|
))
|
||||||
|
TableHeader.displayName = "TableHeader"
|
||||||
|
|
||||||
|
const TableBody = React.forwardRef<
|
||||||
|
HTMLTableSectionElement,
|
||||||
|
React.HTMLAttributes<HTMLTableSectionElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<tbody
|
||||||
|
ref={ref}
|
||||||
|
className={cn("[&_tr:last-child]:border-0", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
TableBody.displayName = "TableBody"
|
||||||
|
|
||||||
|
const TableFooter = React.forwardRef<
|
||||||
|
HTMLTableSectionElement,
|
||||||
|
React.HTMLAttributes<HTMLTableSectionElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<tfoot
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
TableFooter.displayName = "TableFooter"
|
||||||
|
|
||||||
|
const TableRow = React.forwardRef<
|
||||||
|
HTMLTableRowElement,
|
||||||
|
React.HTMLAttributes<HTMLTableRowElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<tr
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
TableRow.displayName = "TableRow"
|
||||||
|
|
||||||
|
const TableHead = React.forwardRef<
|
||||||
|
HTMLTableCellElement,
|
||||||
|
React.ThHTMLAttributes<HTMLTableCellElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<th
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
TableHead.displayName = "TableHead"
|
||||||
|
|
||||||
|
const TableCell = React.forwardRef<
|
||||||
|
HTMLTableCellElement,
|
||||||
|
React.TdHTMLAttributes<HTMLTableCellElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<td
|
||||||
|
ref={ref}
|
||||||
|
className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
TableCell.displayName = "TableCell"
|
||||||
|
|
||||||
|
const TableCaption = React.forwardRef<
|
||||||
|
HTMLTableCaptionElement,
|
||||||
|
React.HTMLAttributes<HTMLTableCaptionElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<caption
|
||||||
|
ref={ref}
|
||||||
|
className={cn("mt-4 text-sm text-muted-foreground", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
TableCaption.displayName = "TableCaption"
|
||||||
|
|
||||||
|
export {
|
||||||
|
Table,
|
||||||
|
TableHeader,
|
||||||
|
TableBody,
|
||||||
|
TableFooter,
|
||||||
|
TableHead,
|
||||||
|
TableRow,
|
||||||
|
TableCell,
|
||||||
|
TableCaption,
|
||||||
|
}
|
||||||
28
dashboard/src/components/ui/v3/tooltip.tsx
Normal file
28
dashboard/src/components/ui/v3/tooltip.tsx
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import * as TooltipPrimitive from "@radix-ui/react-tooltip"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
const TooltipProvider = TooltipPrimitive.Provider
|
||||||
|
|
||||||
|
const Tooltip = TooltipPrimitive.Root
|
||||||
|
|
||||||
|
const TooltipTrigger = TooltipPrimitive.Trigger
|
||||||
|
|
||||||
|
const TooltipContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof TooltipPrimitive.Content>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
|
||||||
|
>(({ className, sideOffset = 4, ...props }, ref) => (
|
||||||
|
<TooltipPrimitive.Content
|
||||||
|
ref={ref}
|
||||||
|
sideOffset={sideOffset}
|
||||||
|
className={cn(
|
||||||
|
"z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
TooltipContent.displayName = TooltipPrimitive.Content.displayName
|
||||||
|
|
||||||
|
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
|
||||||
@@ -4,6 +4,7 @@ import { Checkbox } from '@/components/ui/v2/Checkbox';
|
|||||||
import { Text } from '@/components/ui/v2/Text';
|
import { Text } from '@/components/ui/v2/Text';
|
||||||
import { useAdminApolloClient } from '@/features/projects/common/hooks/useAdminApolloClient';
|
import { useAdminApolloClient } from '@/features/projects/common/hooks/useAdminApolloClient';
|
||||||
import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
|
import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
|
||||||
|
// eslint-disable-next-line import/extensions
|
||||||
import { useDeleteAssistantMutation } from '@/utils/__generated__/graphite.graphql';
|
import { useDeleteAssistantMutation } from '@/utils/__generated__/graphite.graphql';
|
||||||
import { type Assistant } from 'pages/[workspaceSlug]/[appSlug]/ai/assistants';
|
import { type Assistant } from 'pages/[workspaceSlug]/[appSlug]/ai/assistants';
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
|
|||||||
@@ -6,6 +6,7 @@ import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/
|
|||||||
import { generateAppServiceUrl } from '@/features/projects/common/utils/generateAppServiceUrl';
|
import { generateAppServiceUrl } from '@/features/projects/common/utils/generateAppServiceUrl';
|
||||||
import { getHasuraAdminSecret } from '@/utils/env';
|
import { getHasuraAdminSecret } from '@/utils/env';
|
||||||
import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
|
import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
|
||||||
|
// eslint-disable-next-line import/extensions
|
||||||
import { useDeleteGraphiteAutoEmbeddingsConfigurationMutation } from '@/utils/__generated__/graphite.graphql';
|
import { useDeleteGraphiteAutoEmbeddingsConfigurationMutation } from '@/utils/__generated__/graphite.graphql';
|
||||||
import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client';
|
import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client';
|
||||||
import { type AutoEmbeddingsConfiguration } from 'pages/[workspaceSlug]/[appSlug]/ai/auto-embeddings';
|
import { type AutoEmbeddingsConfiguration } from 'pages/[workspaceSlug]/[appSlug]/ai/auto-embeddings';
|
||||||
|
|||||||
@@ -152,7 +152,7 @@ export default function DevAssistant() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
if (isPlatform && currentProject?.plan?.isFree) {
|
if (isPlatform && currentProject?.legacyPlan?.isFree) {
|
||||||
return (
|
return (
|
||||||
<Box className="p-4">
|
<Box className="p-4">
|
||||||
<UpgradeToProBanner
|
<UpgradeToProBanner
|
||||||
@@ -170,18 +170,18 @@ export default function DevAssistant() {
|
|||||||
|
|
||||||
if (
|
if (
|
||||||
(isPlatform &&
|
(isPlatform &&
|
||||||
!currentProject?.plan?.isFree &&
|
!currentProject?.legacyPlan?.isFree &&
|
||||||
!currentProject.config?.ai) ||
|
!currentProject?.config?.ai) ||
|
||||||
!isGraphiteEnabled
|
!isGraphiteEnabled
|
||||||
) {
|
) {
|
||||||
return (
|
return (
|
||||||
<Box className="p-4">
|
<Box className="p-4">
|
||||||
<Alert className="grid w-full grid-flow-col place-content-between items-center gap-2">
|
<Alert className="grid items-center w-full grid-flow-col gap-2 place-content-between">
|
||||||
<Text className="grid grid-flow-row justify-items-start gap-0.5">
|
<Text className="grid grid-flow-row justify-items-start gap-0.5">
|
||||||
<Text component="span">
|
<Text component="span">
|
||||||
To enable graphite, configure the service first in{' '}
|
To enable graphite, configure the service first in{' '}
|
||||||
<Link
|
<Link
|
||||||
href={`/${currentWorkspace.slug}/${currentProject.slug}/settings/ai`}
|
href={`/${currentWorkspace?.slug}/${currentProject?.slug}/settings/ai`}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
underline="hover"
|
underline="hover"
|
||||||
@@ -197,11 +197,11 @@ export default function DevAssistant() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex h-full flex-col overflow-auto">
|
<div className="flex flex-col h-full overflow-auto">
|
||||||
<MessagesList loading={loading} />
|
<MessagesList loading={loading} />
|
||||||
|
|
||||||
<form onSubmit={handleSubmit}>
|
<form onSubmit={handleSubmit}>
|
||||||
<Box className="relative flex w-full flex-row justify-between p-2">
|
<Box className="relative flex flex-row justify-between w-full p-2">
|
||||||
<Input
|
<Input
|
||||||
value={userInput}
|
value={userInput}
|
||||||
onChange={(event) => {
|
onChange={(event) => {
|
||||||
@@ -224,7 +224,7 @@ export default function DevAssistant() {
|
|||||||
color="primary"
|
color="primary"
|
||||||
aria-label="Send"
|
aria-label="Send"
|
||||||
type="submit"
|
type="submit"
|
||||||
className="absolute right-2 h-10 w-12 self-end rounded-xl"
|
className="absolute self-end w-12 h-10 right-2 rounded-xl"
|
||||||
>
|
>
|
||||||
{loading ? <ActivityIndicator /> : <ArrowUpIcon />}
|
{loading ? <ActivityIndicator /> : <ArrowUpIcon />}
|
||||||
</IconButton>
|
</IconButton>
|
||||||
|
|||||||
@@ -22,14 +22,7 @@ import * as yup from 'yup';
|
|||||||
const smtpValidationSchema = yup
|
const smtpValidationSchema = yup
|
||||||
.object({
|
.object({
|
||||||
secure: yup.bool().label('SMTP Secure'),
|
secure: yup.bool().label('SMTP Secure'),
|
||||||
host: yup
|
host: yup.string().label('SMTP Host').required(),
|
||||||
.string()
|
|
||||||
.label('SMTP Host')
|
|
||||||
.matches(
|
|
||||||
/((https?):\/\/)?(www\.)?[a-z0-9]+(\.[a-z]{2,}){1,3}(#[a-zA-Z0-9#]+?)*\/?(\?[a-zA-Z0-9-_]+=[a-zA-Z0-9-%]+&?)?$/,
|
|
||||||
'SMTP Host must be a valid URL',
|
|
||||||
)
|
|
||||||
.required(),
|
|
||||||
port: yup
|
port: yup
|
||||||
.number()
|
.number()
|
||||||
.typeError('The SMTP port should contain only numbers.')
|
.typeError('The SMTP port should contain only numbers.')
|
||||||
|
|||||||
@@ -63,7 +63,7 @@ export default function useEstimatedDatabaseMigrationDowntime(
|
|||||||
): TimePeriod {
|
): TimePeriod {
|
||||||
const { currentProject } = useCurrentWorkspaceAndProject();
|
const { currentProject } = useCurrentWorkspaceAndProject();
|
||||||
|
|
||||||
const isPlanFree = currentProject?.plan?.isFree;
|
const isPlanFree = currentProject?.legacyPlan?.isFree;
|
||||||
|
|
||||||
const { data, loading, error } = useGetApplicationBackupsQuery({
|
const { data, loading, error } = useGetApplicationBackupsQuery({
|
||||||
...options,
|
...options,
|
||||||
|
|||||||
@@ -43,7 +43,7 @@ export default function AuthDomain() {
|
|||||||
|
|
||||||
const capacity =
|
const capacity =
|
||||||
(data?.config?.postgres?.resources?.storage?.capacity ??
|
(data?.config?.postgres?.resources?.storage?.capacity ??
|
||||||
currentProject?.plan?.featureMaxDbSize) ||
|
currentProject?.legacyPlan?.featureMaxDbSize) ||
|
||||||
0;
|
0;
|
||||||
|
|
||||||
const [updateConfig] = useUpdateConfigMutation({
|
const [updateConfig] = useUpdateConfigMutation({
|
||||||
@@ -124,7 +124,7 @@ export default function AuthDomain() {
|
|||||||
}}
|
}}
|
||||||
className="flex flex-col"
|
className="flex flex-col"
|
||||||
>
|
>
|
||||||
{currentProject.plan?.isFree && (
|
{currentProject.legacyPlan?.isFree && (
|
||||||
<UpgradeNotification message="Unlock by upgrading your project to the Pro plan." />
|
<UpgradeNotification message="Unlock by upgrading your project to the Pro plan." />
|
||||||
)}
|
)}
|
||||||
<Box className="grid grid-flow-row lg:grid-cols-5">
|
<Box className="grid grid-flow-row lg:grid-cols-5">
|
||||||
@@ -134,7 +134,7 @@ export default function AuthDomain() {
|
|||||||
name="capacity"
|
name="capacity"
|
||||||
type="number"
|
type="number"
|
||||||
fullWidth
|
fullWidth
|
||||||
disabled={currentProject.plan?.isFree}
|
disabled={currentProject.legacyPlan?.isFree}
|
||||||
className="lg:col-span-2"
|
className="lg:col-span-2"
|
||||||
error={Boolean(formState.errors.capacity?.message)}
|
error={Boolean(formState.errors.capacity?.message)}
|
||||||
helperText={formState.errors.capacity?.message}
|
helperText={formState.errors.capacity?.message}
|
||||||
@@ -145,7 +145,7 @@ export default function AuthDomain() {
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</Box>
|
</Box>
|
||||||
{!currentProject.plan?.isFree && (
|
{!currentProject.legacyPlan?.isFree && (
|
||||||
<Alert severity="info" className="col-span-6 text-left">
|
<Alert severity="info" className="col-span-6 text-left">
|
||||||
Note that volumes can only be increased (not decreased). Also, due
|
Note that volumes can only be increased (not decreased). Also, due
|
||||||
to an AWS limitation, the same volume can only be increased once
|
to an AWS limitation, the same volume can only be increased once
|
||||||
|
|||||||
@@ -0,0 +1,145 @@
|
|||||||
|
import { ApplyLocalSettingsDialog } from '@/components/common/ApplyLocalSettingsDialog';
|
||||||
|
import { useDialog } from '@/components/common/DialogProvider';
|
||||||
|
import { useUI } from '@/components/common/UIProvider';
|
||||||
|
import { Form } from '@/components/form/Form';
|
||||||
|
import { SettingsContainer } from '@/components/layout/SettingsContainer';
|
||||||
|
import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
|
||||||
|
import {
|
||||||
|
GetHasuraSettingsDocument,
|
||||||
|
useGetHasuraSettingsQuery,
|
||||||
|
useUpdateConfigMutation,
|
||||||
|
} from '@/generated/graphql';
|
||||||
|
import { yupResolver } from '@hookform/resolvers/yup';
|
||||||
|
import { useEffect } from 'react';
|
||||||
|
import { FormProvider, useForm } from 'react-hook-form';
|
||||||
|
import * as Yup from 'yup';
|
||||||
|
|
||||||
|
import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
|
||||||
|
import { useIsPlatform } from '@/features/projects/common/hooks/useIsPlatform';
|
||||||
|
import { useLocalMimirClient } from '@/hooks/useLocalMimirClient';
|
||||||
|
import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
|
||||||
|
|
||||||
|
const validationSchema = Yup.object({
|
||||||
|
enabled: Yup.boolean(),
|
||||||
|
});
|
||||||
|
|
||||||
|
export type HasuraInferFunctionPermissionsFormValues = Yup.InferType<
|
||||||
|
typeof validationSchema
|
||||||
|
>;
|
||||||
|
|
||||||
|
export default function HasuraInferFunctionPermissionsSettings() {
|
||||||
|
const { openDialog } = useDialog();
|
||||||
|
const isPlatform = useIsPlatform();
|
||||||
|
const { maintenanceActive } = useUI();
|
||||||
|
const localMimirClient = useLocalMimirClient();
|
||||||
|
const { currentProject, refetch: refetchWorkspaceAndProject } =
|
||||||
|
useCurrentWorkspaceAndProject();
|
||||||
|
const [updateConfig] = useUpdateConfigMutation({
|
||||||
|
refetchQueries: [GetHasuraSettingsDocument],
|
||||||
|
...(!isPlatform ? { client: localMimirClient } : {}),
|
||||||
|
});
|
||||||
|
|
||||||
|
const { data, loading, error } = useGetHasuraSettingsQuery({
|
||||||
|
variables: { appId: currentProject?.id },
|
||||||
|
...(!isPlatform ? { client: localMimirClient } : {}),
|
||||||
|
});
|
||||||
|
|
||||||
|
const { inferFunctionPermissions } = data?.config?.hasura.settings || {};
|
||||||
|
|
||||||
|
const form = useForm<HasuraInferFunctionPermissionsFormValues>({
|
||||||
|
reValidateMode: 'onSubmit',
|
||||||
|
defaultValues: {
|
||||||
|
enabled: inferFunctionPermissions,
|
||||||
|
},
|
||||||
|
resolver: yupResolver(validationSchema),
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!loading) {
|
||||||
|
form.reset({
|
||||||
|
enabled: inferFunctionPermissions,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, [loading, inferFunctionPermissions, form]);
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<ActivityIndicator
|
||||||
|
delay={1000}
|
||||||
|
label="Loading infer function permissions settings..."
|
||||||
|
className="justify-center"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleSubmit(
|
||||||
|
formValues: HasuraInferFunctionPermissionsFormValues,
|
||||||
|
) {
|
||||||
|
const updateConfigPromise = updateConfig({
|
||||||
|
variables: {
|
||||||
|
appId: currentProject.id,
|
||||||
|
config: {
|
||||||
|
hasura: {
|
||||||
|
settings: {
|
||||||
|
inferFunctionPermissions: formValues.enabled,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
await execPromiseWithErrorToast(
|
||||||
|
async () => {
|
||||||
|
await updateConfigPromise;
|
||||||
|
form.reset(formValues);
|
||||||
|
await refetchWorkspaceAndProject();
|
||||||
|
|
||||||
|
if (!isPlatform) {
|
||||||
|
openDialog({
|
||||||
|
title: 'Apply your changes',
|
||||||
|
component: <ApplyLocalSettingsDialog />,
|
||||||
|
props: {
|
||||||
|
PaperProps: {
|
||||||
|
className: 'max-w-2xl',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
loadingMessage:
|
||||||
|
'Infer function permission settings are being updated...',
|
||||||
|
successMessage:
|
||||||
|
'Infer function permission settings have been updated successfully.',
|
||||||
|
errorMessage:
|
||||||
|
'An error occurred while trying to update infer function permission settings.',
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FormProvider {...form}>
|
||||||
|
<Form onSubmit={handleSubmit}>
|
||||||
|
<SettingsContainer
|
||||||
|
title="Infer Function Permissions"
|
||||||
|
description="Enable or disable infer function permissions."
|
||||||
|
slotProps={{
|
||||||
|
submitButton: {
|
||||||
|
disabled: !form.formState.isDirty || maintenanceActive,
|
||||||
|
loading: form.formState.isSubmitting,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
switchId="enabled"
|
||||||
|
docsTitle="enabling or disabling Infer Function Permissions"
|
||||||
|
docsLink="https://hasura.io/docs/2.0/deployment/graphql-engine-flags/reference/#infer-function-permissions"
|
||||||
|
showSwitch
|
||||||
|
className="hidden"
|
||||||
|
/>
|
||||||
|
</Form>
|
||||||
|
</FormProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
export { default as HasuraInferFunctionPermissionsSettings } from './HasuraInferFunctionPermissionsSettings';
|
||||||
@@ -11,6 +11,7 @@ query GetHasuraSettings($appId: uuid!) {
|
|||||||
devMode
|
devMode
|
||||||
corsDomain
|
corsDomain
|
||||||
enabledAPIs
|
enabledAPIs
|
||||||
|
inferFunctionPermissions
|
||||||
}
|
}
|
||||||
logs {
|
logs {
|
||||||
level
|
level
|
||||||
|
|||||||
@@ -0,0 +1,249 @@
|
|||||||
|
import { Button } from '@/components/ui/v3/button';
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
} from '@/components/ui/v3/dialog';
|
||||||
|
import { Input } from '@/components/ui/v3/input';
|
||||||
|
|
||||||
|
import {
|
||||||
|
Form,
|
||||||
|
FormControl,
|
||||||
|
FormDescription,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
FormMessage,
|
||||||
|
} from '@/components/ui/v3/form';
|
||||||
|
|
||||||
|
import { useUI } from '@/components/common/UIProvider';
|
||||||
|
import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
|
||||||
|
import { RadioGroup, RadioGroupItem } from '@/components/ui/v3/radio-group';
|
||||||
|
import { StripeEmbeddedForm } from '@/features/orgs/components/StripeEmbeddedForm';
|
||||||
|
import { useIsPlatform } from '@/features/orgs/projects/common/hooks/useIsPlatform';
|
||||||
|
import { planDescriptions } from '@/features/projects/common/utils/planDescriptions';
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
|
||||||
|
import {
|
||||||
|
useCreateOrganizationRequestMutation,
|
||||||
|
usePrefetchNewAppQuery,
|
||||||
|
type PrefetchNewAppPlansFragment,
|
||||||
|
} from '@/utils/__generated__/graphql';
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import { useUserData } from '@nhost/nextjs';
|
||||||
|
import { DialogDescription } from '@radix-ui/react-dialog';
|
||||||
|
import { Plus } from 'lucide-react';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
import { z } from 'zod';
|
||||||
|
|
||||||
|
const createOrgFormSchema = z.object({
|
||||||
|
name: z.string().min(2),
|
||||||
|
plan: z.optional(z.string()),
|
||||||
|
});
|
||||||
|
|
||||||
|
interface CreateOrgFormProps {
|
||||||
|
plans: PrefetchNewAppPlansFragment[];
|
||||||
|
onSubmit?: ({
|
||||||
|
name,
|
||||||
|
plan,
|
||||||
|
}: z.infer<typeof createOrgFormSchema>) => Promise<void>;
|
||||||
|
onCancel: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
function CreateOrgForm({ plans, onSubmit, onCancel }: CreateOrgFormProps) {
|
||||||
|
const form = useForm<z.infer<typeof createOrgFormSchema>>({
|
||||||
|
resolver: zodResolver(createOrgFormSchema),
|
||||||
|
defaultValues: {
|
||||||
|
name: '',
|
||||||
|
plan: plans[0].id,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Form {...form}>
|
||||||
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="name"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Organization Name</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input placeholder="Acme Inc" {...field} />
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="plan"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="">
|
||||||
|
<div>
|
||||||
|
<FormLabel>Plan</FormLabel>
|
||||||
|
<FormDescription className="text-xs">
|
||||||
|
You can change this later
|
||||||
|
</FormDescription>
|
||||||
|
</div>
|
||||||
|
<FormControl>
|
||||||
|
<RadioGroup
|
||||||
|
onValueChange={field.onChange}
|
||||||
|
defaultValue={field.value}
|
||||||
|
className="flex flex-col space-y-1"
|
||||||
|
>
|
||||||
|
{plans.map((plan) => (
|
||||||
|
<FormItem key={plan.id}>
|
||||||
|
<FormLabel className="flex flex-row items-center justify-between w-full p-3 space-y-0 border rounded-md cursor-pointer">
|
||||||
|
<div className="flex flex-row items-center space-x-3">
|
||||||
|
<FormControl>
|
||||||
|
<RadioGroupItem value={plan.id} />
|
||||||
|
</FormControl>
|
||||||
|
<div className="flex flex-col space-y-2">
|
||||||
|
<div className="font-semibold text-md">
|
||||||
|
{plan.name}
|
||||||
|
</div>
|
||||||
|
<FormDescription className="w-2/3 text-xs">
|
||||||
|
{planDescriptions[plan.name]}
|
||||||
|
</FormDescription>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center h-full mt-0 text-xl font-semibold">
|
||||||
|
{plan.isFree ? 'Free' : `${plan.price}/mo`}
|
||||||
|
</div>
|
||||||
|
</FormLabel>
|
||||||
|
</FormItem>
|
||||||
|
))}
|
||||||
|
</RadioGroup>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="flex justify-end space-x-2">
|
||||||
|
<Button
|
||||||
|
variant="secondary"
|
||||||
|
type="button"
|
||||||
|
disabled={form.formState.isSubmitting}
|
||||||
|
onClick={onCancel}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button type="submit" disabled={form.formState.isSubmitting}>
|
||||||
|
{form.formState.isSubmitting ? (
|
||||||
|
<ActivityIndicator />
|
||||||
|
) : (
|
||||||
|
'Create organization'
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function CreateOrgDialog() {
|
||||||
|
const { maintenanceActive } = useUI();
|
||||||
|
const user = useUserData();
|
||||||
|
const isPlatform = useIsPlatform();
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const { data, loading, error } = usePrefetchNewAppQuery({
|
||||||
|
skip: !user,
|
||||||
|
});
|
||||||
|
const [createOrganizationRequest] = useCreateOrganizationRequestMutation();
|
||||||
|
const [stripeClientSecret, setStripeClientSecret] = useState('');
|
||||||
|
|
||||||
|
const createOrg = async ({
|
||||||
|
name,
|
||||||
|
plan,
|
||||||
|
}: {
|
||||||
|
name?: string;
|
||||||
|
plan?: string;
|
||||||
|
}) => {
|
||||||
|
await execPromiseWithErrorToast(
|
||||||
|
async () => {
|
||||||
|
const {
|
||||||
|
data: { billingCreateOrganizationRequest: clientSecret },
|
||||||
|
} = await createOrganizationRequest({
|
||||||
|
variables: {
|
||||||
|
organizationName: name,
|
||||||
|
planID: plan,
|
||||||
|
redirectURL: `${window.location.origin}/orgs/verify`,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
setStripeClientSecret(clientSecret);
|
||||||
|
},
|
||||||
|
{
|
||||||
|
loadingMessage: 'Redirecting to checkout',
|
||||||
|
successMessage: 'Success',
|
||||||
|
errorMessage: 'An error occurred while redirecting to checkout!',
|
||||||
|
},
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!isPlatform) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={open} onOpenChange={setOpen}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button
|
||||||
|
disabled={maintenanceActive}
|
||||||
|
className={cn(
|
||||||
|
'flex h-8 w-full flex-row justify-start gap-3 px-2',
|
||||||
|
'bg-background text-foreground hover:bg-accent dark:hover:bg-muted',
|
||||||
|
)}
|
||||||
|
onClick={() => setStripeClientSecret('')}
|
||||||
|
>
|
||||||
|
<Plus className="w-4 h-4 font-bold" strokeWidth={3} />
|
||||||
|
New Organization
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent
|
||||||
|
className={cn(
|
||||||
|
'text-foreground sm:max-w-xl',
|
||||||
|
!loading && stripeClientSecret ? 'bg-white text-black' : '',
|
||||||
|
)}
|
||||||
|
onInteractOutside={(e) => e.preventDefault()}
|
||||||
|
onEscapeKeyDown={(e) => e.preventDefault()}
|
||||||
|
>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>New Organization</DialogTitle>
|
||||||
|
<DialogDescription />
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
{loading && (
|
||||||
|
<div className="flex items-center justify-center h-52">
|
||||||
|
<ActivityIndicator
|
||||||
|
circularProgressProps={{
|
||||||
|
className: 'w-5 h-5',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{!loading && !stripeClientSecret && (
|
||||||
|
<CreateOrgForm
|
||||||
|
plans={data?.plans}
|
||||||
|
onSubmit={createOrg}
|
||||||
|
onCancel={() => setOpen(false)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{!loading && stripeClientSecret && (
|
||||||
|
<StripeEmbeddedForm clientSecret={stripeClientSecret} />
|
||||||
|
)}
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
export { default as CreateOrgFormDialog } from './CreateOrgFormDialog';
|
||||||
@@ -0,0 +1,222 @@
|
|||||||
|
import { Button } from '@/components/ui/v3/button';
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
} from '@/components/ui/v3/dialog';
|
||||||
|
import CreateOrgDialog from '@/features/orgs/components/CreateOrgFormDialog/CreateOrgFormDialog';
|
||||||
|
|
||||||
|
import {
|
||||||
|
Form,
|
||||||
|
FormControl,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
FormMessage,
|
||||||
|
} from '@/components/ui/v3/form';
|
||||||
|
|
||||||
|
import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
|
||||||
|
import { ArrowSquareOutIcon } from '@/components/ui/v2/icons/ArrowSquareOutIcon';
|
||||||
|
import { Link } from '@/components/ui/v2/Link';
|
||||||
|
import { Badge } from '@/components/ui/v3/badge';
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from '@/components/ui/v3/select';
|
||||||
|
import { useOrgs } from '@/features/orgs/projects/hooks/useOrgs';
|
||||||
|
import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
|
||||||
|
import { useBillingMigrateProjectToOrganizationMutation } from '@/utils/__generated__/graphql';
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import { DialogDescription } from '@radix-ui/react-dialog';
|
||||||
|
import { CornerRightUp } from 'lucide-react';
|
||||||
|
import { useRouter } from 'next/router';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
import { z } from 'zod';
|
||||||
|
|
||||||
|
const migrateFormSchema = z.object({
|
||||||
|
organization: z.string(),
|
||||||
|
});
|
||||||
|
|
||||||
|
export default function MigrateProjectToOrg() {
|
||||||
|
const { push } = useRouter();
|
||||||
|
const { orgs } = useOrgs();
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const { currentProject } = useCurrentWorkspaceAndProject();
|
||||||
|
const [migrateProjectToOrg] =
|
||||||
|
useBillingMigrateProjectToOrganizationMutation();
|
||||||
|
|
||||||
|
const form = useForm<z.infer<typeof migrateFormSchema>>({
|
||||||
|
resolver: zodResolver(migrateFormSchema),
|
||||||
|
defaultValues: {
|
||||||
|
organization: '',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const noValidOrg = orgs.every((o) => o.plan.isFree);
|
||||||
|
|
||||||
|
const onSubmit = async (values: z.infer<typeof migrateFormSchema>) => {
|
||||||
|
const { organization } = values;
|
||||||
|
|
||||||
|
await execPromiseWithErrorToast(
|
||||||
|
async () => {
|
||||||
|
await migrateProjectToOrg({
|
||||||
|
variables: {
|
||||||
|
appID: currentProject?.id,
|
||||||
|
organizationID: organization,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const targetOrg = orgs.find((o) => o.id === organization);
|
||||||
|
await push(`/orgs/${targetOrg.slug}/projects`);
|
||||||
|
},
|
||||||
|
{
|
||||||
|
loadingMessage: 'Migrating project',
|
||||||
|
successMessage: 'Success',
|
||||||
|
errorMessage: 'An error occurred while migrating project!',
|
||||||
|
},
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog
|
||||||
|
open={open}
|
||||||
|
onOpenChange={(value) => {
|
||||||
|
form.reset();
|
||||||
|
setOpen(value);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button className="flex items-center gap-2 py-1 text-base">
|
||||||
|
Migrate to an Organization
|
||||||
|
<CornerRightUp className="w-5 h-5" />
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent className="text-foreground sm:max-w-xl">
|
||||||
|
<DialogHeader className="gap-2">
|
||||||
|
<DialogTitle>Migrate project to an Organization</DialogTitle>
|
||||||
|
<DialogDescription className="flex flex-col gap-2 text-sm text-muted-foreground">
|
||||||
|
<span className="mt-4 font-medium">
|
||||||
|
Please read the following information before migrating:
|
||||||
|
</span>
|
||||||
|
<ul className="pl-4 space-y-2 list-disc">
|
||||||
|
<li>
|
||||||
|
A project can only be migrated to an organization in the same or
|
||||||
|
higher plan as the project you are migrating.
|
||||||
|
</li>
|
||||||
|
<li className="mt-4">
|
||||||
|
Any remaining usage credits in your current workspace will be
|
||||||
|
transferred and credited to the target organization.
|
||||||
|
</li>
|
||||||
|
<li className="mt-4">
|
||||||
|
While there is no downtime for stateless services, Postgres
|
||||||
|
requires a restart so plan for 1-2 minutes of downtime.
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div className="flex items-center justify-start gap-1 mt-4">
|
||||||
|
<span>For more information read the</span>
|
||||||
|
<Link
|
||||||
|
href="https://nhost.io/blog/organization-billing"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
underline="hover"
|
||||||
|
className="font-medium"
|
||||||
|
>
|
||||||
|
announcement
|
||||||
|
<ArrowSquareOutIcon className="w-4 h-4 mb-1 ml-1" />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
{noValidOrg && (
|
||||||
|
<>
|
||||||
|
<span className="text-sm">
|
||||||
|
We couldn't find a {currentProject.legacyPlan.name}{' '}
|
||||||
|
organization, please create one first.
|
||||||
|
</span>
|
||||||
|
<CreateOrgDialog />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{!noValidOrg && (
|
||||||
|
<Form {...form}>
|
||||||
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="organization"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Organization</FormLabel>
|
||||||
|
<Select
|
||||||
|
onValueChange={field.onChange}
|
||||||
|
defaultValue={field.value}
|
||||||
|
>
|
||||||
|
<FormControl>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Organization" />
|
||||||
|
</SelectTrigger>
|
||||||
|
</FormControl>
|
||||||
|
<SelectContent>
|
||||||
|
{orgs.map((org) => (
|
||||||
|
<SelectItem
|
||||||
|
key={org.id}
|
||||||
|
value={org.id}
|
||||||
|
disabled={org.plan.isFree}
|
||||||
|
>
|
||||||
|
{org.name}
|
||||||
|
<Badge
|
||||||
|
variant={org.plan.isFree ? 'outline' : 'default'}
|
||||||
|
className={cn(
|
||||||
|
org.plan.isFree ? 'bg-muted' : '',
|
||||||
|
'hover:none ml-2 h-5 px-[6px] text-[10px]',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{org.plan.name}
|
||||||
|
</Badge>
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="flex justify-end space-x-2">
|
||||||
|
<Button
|
||||||
|
variant="secondary"
|
||||||
|
type="button"
|
||||||
|
disabled={form.formState.isSubmitting}
|
||||||
|
onClick={() => {
|
||||||
|
form.reset();
|
||||||
|
setOpen(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
disabled={
|
||||||
|
form.formState.isSubmitting || !form.formState.isDirty
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{form.formState.isSubmitting ? (
|
||||||
|
<ActivityIndicator />
|
||||||
|
) : (
|
||||||
|
'Migrate'
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
)}
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
export { default as MigrateProjectToOrg } from './MigrateProjectToOrg';
|
||||||
@@ -0,0 +1,95 @@
|
|||||||
|
import { useCurrentOrg } from '@/features/orgs/projects/hooks/useCurrentOrg';
|
||||||
|
import { Organization_Status_Enum } from '@/utils/__generated__/graphql';
|
||||||
|
import { TriangleAlert } from 'lucide-react';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { useRouter } from 'next/router';
|
||||||
|
import { useEffect } from 'react';
|
||||||
|
|
||||||
|
function StatusBanner({
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
}: {
|
||||||
|
title: string;
|
||||||
|
description: React.ReactNode;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div className="m-4 rounded-lg bg-destructive p-4 text-white">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<TriangleAlert className="h-4 w-4" />
|
||||||
|
<h3 className="font-medium">{title}</h3>
|
||||||
|
</div>
|
||||||
|
<p>{description}</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function OrgStatus() {
|
||||||
|
const { org } = useCurrentOrg();
|
||||||
|
const { asPath, push } = useRouter();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (
|
||||||
|
org &&
|
||||||
|
(org.status === Organization_Status_Enum.Disabled ||
|
||||||
|
org?.status === Organization_Status_Enum.Locked)
|
||||||
|
) {
|
||||||
|
push(`/orgs/${org.slug}/billing`);
|
||||||
|
}
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [asPath, org]);
|
||||||
|
|
||||||
|
if (!org) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (org.status === Organization_Status_Enum.AllowanceExceeded) {
|
||||||
|
return (
|
||||||
|
<StatusBanner
|
||||||
|
title="Usage limit has been exceeded for this organization"
|
||||||
|
description="Your project has been paused. You can either migrate it to a paid organization or wait until the billing cycle resets to unpause it."
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (org.status === Organization_Status_Enum.Cancelled) {
|
||||||
|
return (
|
||||||
|
<StatusBanner
|
||||||
|
title="Subscription is cancelled after multiple failed billing attempts"
|
||||||
|
description={
|
||||||
|
<span>
|
||||||
|
Please open a{' '}
|
||||||
|
<Link
|
||||||
|
href="https://app.nhost.io/support"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="font-bold underline"
|
||||||
|
>
|
||||||
|
support ticket
|
||||||
|
</Link>{' '}
|
||||||
|
if you need to restore access to this organization.
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (org.status === Organization_Status_Enum.Disabled) {
|
||||||
|
return (
|
||||||
|
<StatusBanner
|
||||||
|
title="Organization is disabled after multiple failed billing attempts"
|
||||||
|
description="All projects have been paused and new projects cannot be created until a valid payment method is provided and the outstanding invoice is closed."
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (org.status === Organization_Status_Enum.Locked) {
|
||||||
|
return (
|
||||||
|
<StatusBanner
|
||||||
|
title="Organization is locked due to an outstanding invoice"
|
||||||
|
description="New projects cannot be created until a valid payment method is provided and the outstanding invoice is closed. Your existing projects are not affected."
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
export { default as OrgStatus } from './OrgStatus';
|
||||||
@@ -0,0 +1,26 @@
|
|||||||
|
import {
|
||||||
|
EmbeddedCheckout,
|
||||||
|
EmbeddedCheckoutProvider,
|
||||||
|
} from '@stripe/react-stripe-js';
|
||||||
|
import { loadStripe } from '@stripe/stripe-js';
|
||||||
|
|
||||||
|
const stripePromise = process.env.NEXT_PUBLIC_STRIPE_PK
|
||||||
|
? loadStripe(process.env.NEXT_PUBLIC_STRIPE_PK)
|
||||||
|
: null;
|
||||||
|
|
||||||
|
export default function StripeEmbeddedForm({
|
||||||
|
clientSecret,
|
||||||
|
}: {
|
||||||
|
clientSecret: string;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<EmbeddedCheckoutProvider
|
||||||
|
stripe={stripePromise}
|
||||||
|
options={{
|
||||||
|
clientSecret,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<EmbeddedCheckout />
|
||||||
|
</EmbeddedCheckoutProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
export { default as StripeEmbeddedForm } from './StripeEmbeddedForm';
|
||||||
@@ -0,0 +1,30 @@
|
|||||||
|
import { useUI } from '@/components/common/UIProvider';
|
||||||
|
import { SettingsContainer } from '@/components/layout/SettingsContainer';
|
||||||
|
import { TransferProjectDialog } from '@/features/orgs/components/common/TransferProjectDialog';
|
||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
|
export default function TransferProject() {
|
||||||
|
const { maintenanceActive } = useUI();
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<SettingsContainer
|
||||||
|
title="Transfer Project"
|
||||||
|
description="Move the current project to a different organization."
|
||||||
|
submitButtonText="Transfer"
|
||||||
|
slotProps={{
|
||||||
|
submitButton: {
|
||||||
|
type: 'button',
|
||||||
|
color: 'primary',
|
||||||
|
variant: 'contained',
|
||||||
|
disabled: maintenanceActive,
|
||||||
|
onClick: () => setOpen(true),
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<TransferProjectDialog open={open} setOpen={setOpen} />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
export { default as TransferProject } from './TransferProject';
|
||||||
@@ -0,0 +1,286 @@
|
|||||||
|
import { useUI } from '@/components/common/UIProvider';
|
||||||
|
import { ArrowSquareOutIcon } from '@/components/ui/v2/icons/ArrowSquareOutIcon';
|
||||||
|
import { Link } from '@/components/ui/v2/Link';
|
||||||
|
import { Button } from '@/components/ui/v3/button';
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
} from '@/components/ui/v3/dialog';
|
||||||
|
import {
|
||||||
|
Form,
|
||||||
|
FormControl,
|
||||||
|
FormDescription,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
FormMessage,
|
||||||
|
} from '@/components/ui/v3/form';
|
||||||
|
import { RadioGroup, RadioGroupItem } from '@/components/ui/v3/radio-group';
|
||||||
|
import { useCurrentOrg } from '@/features/orgs/projects/hooks/useCurrentOrg';
|
||||||
|
import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
|
||||||
|
import { planDescriptions } from '@/features/projects/common/utils/planDescriptions';
|
||||||
|
import {
|
||||||
|
useBillingChangeOrganizationPlanMutation,
|
||||||
|
useBillingOrganizationCustomePortalLazyQuery,
|
||||||
|
useGetOrganizationPlansQuery,
|
||||||
|
} from '@/utils/__generated__/graphql';
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import { Slash } from 'lucide-react';
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
import { z } from 'zod';
|
||||||
|
|
||||||
|
const changeOrgPlanForm = z.object({
|
||||||
|
plan: z.string(),
|
||||||
|
});
|
||||||
|
|
||||||
|
export default function SubscriptionPlan() {
|
||||||
|
const { maintenanceActive } = useUI();
|
||||||
|
const { org, refetch: refetchOrg } = useCurrentOrg();
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const [changeOrgPlan] = useBillingChangeOrganizationPlanMutation();
|
||||||
|
const { data: { plans = [] } = {} } = useGetOrganizationPlansQuery();
|
||||||
|
const [fetchOrganizationCustomePortalLink] =
|
||||||
|
useBillingOrganizationCustomePortalLazyQuery();
|
||||||
|
|
||||||
|
const form = useForm<z.infer<typeof changeOrgPlanForm>>({
|
||||||
|
resolver: zodResolver(changeOrgPlanForm),
|
||||||
|
defaultValues: {
|
||||||
|
plan: '',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (org) {
|
||||||
|
form.setValue('plan', org?.plan.id, { shouldDirty: false });
|
||||||
|
}
|
||||||
|
}, [form, org]);
|
||||||
|
|
||||||
|
const selectedPlan = form.watch('plan');
|
||||||
|
|
||||||
|
const onSubmit = async (values: z.infer<typeof changeOrgPlanForm>) => {
|
||||||
|
const { plan: planID } = values;
|
||||||
|
const { id: organizationID } = org;
|
||||||
|
|
||||||
|
await execPromiseWithErrorToast(
|
||||||
|
async () => {
|
||||||
|
await changeOrgPlan({
|
||||||
|
variables: {
|
||||||
|
organizationID,
|
||||||
|
planID,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
await refetchOrg();
|
||||||
|
form.reset({ plan: planID });
|
||||||
|
setOpen(false);
|
||||||
|
},
|
||||||
|
{
|
||||||
|
loadingMessage: 'Upgrading organization plan',
|
||||||
|
successMessage: 'Organization plan was upgraded successfully',
|
||||||
|
errorMessage:
|
||||||
|
'An error occurred while upgrading the organization plan! Please try again',
|
||||||
|
},
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleUpdatePaymentDetails = async () => {
|
||||||
|
const { id: organizationID } = org;
|
||||||
|
await execPromiseWithErrorToast(
|
||||||
|
async () => {
|
||||||
|
const { data: { billingOrganizationCustomePortal = null } = {} } =
|
||||||
|
await fetchOrganizationCustomePortalLink({
|
||||||
|
variables: {
|
||||||
|
organizationID,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (billingOrganizationCustomePortal) {
|
||||||
|
window.open(billingOrganizationCustomePortal);
|
||||||
|
} else {
|
||||||
|
throw new Error('Could not fetch customer portal link');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
loadingMessage: 'Processing',
|
||||||
|
successMessage: 'Redirecting to customer portal',
|
||||||
|
errorMessage:
|
||||||
|
'An error occurred while redirecting to customer portal! Please try again',
|
||||||
|
},
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div>
|
||||||
|
<div className="flex flex-col w-full border rounded-md bg-background">
|
||||||
|
<div className="flex flex-col w-full gap-1 p-4 border-b">
|
||||||
|
<h4 className="font-medium">Subscription plan</h4>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col border-b md:flex-row">
|
||||||
|
<div className="flex flex-col w-full gap-4 p-4">
|
||||||
|
<span className="font-medium">Organization name</span>
|
||||||
|
<span className="font-medium">{org?.name}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col w-full gap-2 p-4">
|
||||||
|
<span className="font-medium">Current plan</span>
|
||||||
|
<span className="text-xl font-bold text-primary-main">
|
||||||
|
{org?.plan?.name}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col items-start justify-start w-full gap-4 p-4 md:items-end md:justify-end">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-xl font-semibold">
|
||||||
|
${org?.plan?.price}
|
||||||
|
</span>
|
||||||
|
<Slash
|
||||||
|
className="w-5 h-5 text-muted-foreground/40"
|
||||||
|
strokeWidth={2.5}
|
||||||
|
/>
|
||||||
|
<span className="text-xl font-semibold">month</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col-reverse items-end justify-between w-full gap-2 p-4 md:flex-row md:items-center md:gap-0">
|
||||||
|
<div>
|
||||||
|
<span>For a complete list of features, visit our </span>
|
||||||
|
<Link
|
||||||
|
href="https://nhost.io/pricing"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
underline="hover"
|
||||||
|
className="font-medium"
|
||||||
|
>
|
||||||
|
pricing
|
||||||
|
<ArrowSquareOutIcon className="w-4 h-4 ml-1" />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-row items-center justify-end gap-2">
|
||||||
|
<Button
|
||||||
|
className="h-fit"
|
||||||
|
variant="secondary"
|
||||||
|
onClick={handleUpdatePaymentDetails}
|
||||||
|
disabled={org?.plan?.isFree || maintenanceActive}
|
||||||
|
>
|
||||||
|
Stripe Customer Portal
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
disabled={org?.plan?.isFree || maintenanceActive}
|
||||||
|
className="h-fit"
|
||||||
|
onClick={() => setOpen(true)}
|
||||||
|
>
|
||||||
|
Upgrade
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Dialog open={open} onOpenChange={setOpen}>
|
||||||
|
<DialogContent className="text-foreground sm:max-w-xl">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Upgrade Organization {org?.name}</DialogTitle>
|
||||||
|
<DialogDescription />
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<Form {...form}>
|
||||||
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="plan"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="">
|
||||||
|
<div>
|
||||||
|
<FormLabel>Plan</FormLabel>
|
||||||
|
</div>
|
||||||
|
<FormControl>
|
||||||
|
<RadioGroup
|
||||||
|
onValueChange={field.onChange}
|
||||||
|
defaultValue={field.value}
|
||||||
|
className="flex flex-col space-y-1"
|
||||||
|
>
|
||||||
|
{plans.map((plan) => (
|
||||||
|
<FormItem key={plan.id}>
|
||||||
|
<FormLabel className="flex flex-row items-center justify-between w-full p-3 space-y-0 border rounded-md cursor-pointer">
|
||||||
|
<div className="flex flex-row items-center space-x-3">
|
||||||
|
<FormControl>
|
||||||
|
<RadioGroupItem value={plan.id} />
|
||||||
|
</FormControl>
|
||||||
|
<div className="flex flex-col space-y-2">
|
||||||
|
<div className="font-semibold text-md">
|
||||||
|
{plan.name}
|
||||||
|
</div>
|
||||||
|
<FormDescription className="w-2/3 text-xs">
|
||||||
|
{planDescriptions[plan.name]}
|
||||||
|
</FormDescription>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center h-full mt-0 text-xl font-semibold">
|
||||||
|
{plan.isFree ? 'Free' : `${plan.price}/mo`}
|
||||||
|
</div>
|
||||||
|
</FormLabel>
|
||||||
|
</FormItem>
|
||||||
|
))}
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div className="flex flex-row items-center justify-between w-full p-3 space-y-0 border rounded-md cursor-pointer">
|
||||||
|
<div className="flex flex-row items-center space-x-3">
|
||||||
|
<div className="flex flex-col space-y-2">
|
||||||
|
<div className="font-semibold text-md">
|
||||||
|
Enterprise
|
||||||
|
</div>
|
||||||
|
<div className="w-2/3 text-xs">
|
||||||
|
{planDescriptions.Enterprise}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Link
|
||||||
|
href="mailto:hello@nhost.io"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
underline="hover"
|
||||||
|
className="font-medium"
|
||||||
|
>
|
||||||
|
Contact us
|
||||||
|
<ArrowSquareOutIcon className="w-4 h-4 ml-1" />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</RadioGroup>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<DialogFooter>
|
||||||
|
<Button
|
||||||
|
variant="secondary"
|
||||||
|
type="button"
|
||||||
|
disabled={form.formState.isSubmitting}
|
||||||
|
onClick={() => setOpen(false)}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
disabled={
|
||||||
|
selectedPlan === org?.plan?.id ||
|
||||||
|
form.formState.isSubmitting
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{form.formState.isSubmitting ? 'Upgrading...' : 'Upgrade'}
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
export { default as SubscriptionPlan } from './SubscriptionPlan';
|
||||||
@@ -0,0 +1,97 @@
|
|||||||
|
import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
|
||||||
|
import { Progress } from '@/components/ui/v3/progress';
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableFooter,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from '@/components/ui/v3/table';
|
||||||
|
import { getBillingCycleInfo } from '@/features/orgs/components/billing/utils/getBillingCycle';
|
||||||
|
import { useCurrentOrg } from '@/features/orgs/projects/hooks/useCurrentOrg';
|
||||||
|
import { useBillingGetNextInvoiceQuery } from '@/utils/__generated__/graphql';
|
||||||
|
|
||||||
|
export default function Usage() {
|
||||||
|
const { org } = useCurrentOrg();
|
||||||
|
const { billingCycleRange, progress } = getBillingCycleInfo();
|
||||||
|
const { data, loading } = useBillingGetNextInvoiceQuery({
|
||||||
|
fetchPolicy: 'cache-first',
|
||||||
|
variables: {
|
||||||
|
organizationID: org?.id,
|
||||||
|
},
|
||||||
|
skip: !org,
|
||||||
|
});
|
||||||
|
|
||||||
|
const billingItems = data?.billingGetNextInvoice?.items ?? [];
|
||||||
|
const amountDue = data?.billingGetNextInvoice?.AmountDue ?? null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="font-medium">
|
||||||
|
<div className="flex flex-col w-full border rounded-md bg-background">
|
||||||
|
<div className="flex flex-col w-full gap-1 p-4">
|
||||||
|
<span>Usage</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<div className="flex flex-row items-center justify-between w-full p-4 border-t border-b">
|
||||||
|
<span>Billing cycle ({billingCycleRange})</span>
|
||||||
|
<Progress value={progress} className="h-2 max-w-xl" />
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col gap-4 p-4">
|
||||||
|
{loading && (
|
||||||
|
<div className="flex h-32 place-content-center">
|
||||||
|
<ActivityIndicator
|
||||||
|
label="Loading usage stats..."
|
||||||
|
className="justify-center text-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!loading && data && (
|
||||||
|
<>
|
||||||
|
<span>Breakdown</span>
|
||||||
|
<div className="border rounded-md">
|
||||||
|
<Table>
|
||||||
|
<TableHeader className="w-full bg-accent">
|
||||||
|
<TableRow>
|
||||||
|
<TableHead colSpan={3} className="w-full rounded-tl-md">
|
||||||
|
Item
|
||||||
|
</TableHead>
|
||||||
|
<TableHead className="text-right rounded-tr-md">
|
||||||
|
Amount
|
||||||
|
</TableHead>
|
||||||
|
</TableRow>
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{billingItems.map((billingItem) => (
|
||||||
|
<TableRow key={billingItem.Description}>
|
||||||
|
<TableCell colSpan={3}>
|
||||||
|
{billingItem.Description}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell colSpan={3} className="text-right">
|
||||||
|
${billingItem.Amount}
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
<TableFooter className="bg-accent">
|
||||||
|
<TableRow>
|
||||||
|
<TableCell colSpan={3} className="rounded-bl-md">
|
||||||
|
Total
|
||||||
|
</TableCell>
|
||||||
|
<TableCell className="text-right rounded-br-md">
|
||||||
|
${amountDue}
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableFooter>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
export { default as Usage } from './Usage';
|
||||||
@@ -0,0 +1,26 @@
|
|||||||
|
export const getBillingCycleInfo = () => {
|
||||||
|
const now = new Date();
|
||||||
|
const year = now.getFullYear();
|
||||||
|
|
||||||
|
const startOfMonth = new Date(year, now.getMonth(), 1);
|
||||||
|
const endOfMonth = new Date(year, now.getMonth() + 1, 0);
|
||||||
|
|
||||||
|
const options: Intl.DateTimeFormatOptions = {
|
||||||
|
month: 'short',
|
||||||
|
day: 'numeric',
|
||||||
|
};
|
||||||
|
const billingCycleStart = startOfMonth.toLocaleDateString('en-US', options);
|
||||||
|
const billingCycleEnd = endOfMonth.toLocaleDateString('en-US', options);
|
||||||
|
|
||||||
|
const totalDays =
|
||||||
|
(endOfMonth.getTime() - startOfMonth.getTime()) / (1000 * 60 * 60 * 24) + 1;
|
||||||
|
const daysPassed =
|
||||||
|
(now.getTime() - startOfMonth.getTime()) / (1000 * 60 * 60 * 24) + 1;
|
||||||
|
|
||||||
|
const progress = (daysPassed / totalDays) * 100;
|
||||||
|
|
||||||
|
return {
|
||||||
|
billingCycleRange: `${billingCycleStart} - ${billingCycleEnd}`,
|
||||||
|
progress: Math.min(Math.max(progress, 0), 100), // Ensure the value is between 0 and 100
|
||||||
|
};
|
||||||
|
};
|
||||||
@@ -0,0 +1,166 @@
|
|||||||
|
import { Badge } from '@/components/ui/v3/badge';
|
||||||
|
import { Button } from '@/components/ui/v3/button';
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
} from '@/components/ui/v3/dialog';
|
||||||
|
|
||||||
|
import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
|
||||||
|
import {
|
||||||
|
Form,
|
||||||
|
FormControl,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
FormMessage,
|
||||||
|
} from '@/components/ui/v3/form';
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from '@/components/ui/v3/select';
|
||||||
|
import { useCurrentOrg } from '@/features/orgs/projects/hooks/useCurrentOrg';
|
||||||
|
import { useOrgs } from '@/features/orgs/projects/hooks/useOrgs';
|
||||||
|
import { useProject } from '@/features/orgs/projects/hooks/useProject';
|
||||||
|
import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
import { useBillingTransferAppMutation } from '@/utils/__generated__/graphql';
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import { useRouter } from 'next/router';
|
||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
import { z } from 'zod';
|
||||||
|
|
||||||
|
interface TransferProjectDialogProps {
|
||||||
|
open: boolean;
|
||||||
|
setOpen: (value: boolean) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const transferProjectFormSchema = z.object({
|
||||||
|
organization: z.string(),
|
||||||
|
});
|
||||||
|
|
||||||
|
export default function TransferProjectDialog({
|
||||||
|
open,
|
||||||
|
setOpen,
|
||||||
|
}: TransferProjectDialogProps) {
|
||||||
|
const { orgs } = useOrgs();
|
||||||
|
const { org: currentOrg } = useCurrentOrg();
|
||||||
|
const { project } = useProject();
|
||||||
|
const { push } = useRouter();
|
||||||
|
const [transferProject] = useBillingTransferAppMutation();
|
||||||
|
|
||||||
|
const form = useForm<z.infer<typeof transferProjectFormSchema>>({
|
||||||
|
resolver: zodResolver(transferProjectFormSchema),
|
||||||
|
defaultValues: {
|
||||||
|
organization: '',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const onSubmit = async (
|
||||||
|
values: z.infer<typeof transferProjectFormSchema>,
|
||||||
|
) => {
|
||||||
|
const { organization } = values;
|
||||||
|
|
||||||
|
await execPromiseWithErrorToast(
|
||||||
|
async () => {
|
||||||
|
await transferProject({
|
||||||
|
variables: {
|
||||||
|
appID: project?.id,
|
||||||
|
organizationID: organization,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const targetOrg = orgs.find((o) => o.id === organization);
|
||||||
|
await push(`/orgs/${targetOrg.slug}/projects`);
|
||||||
|
},
|
||||||
|
{
|
||||||
|
loadingMessage: 'Transferring project...',
|
||||||
|
successMessage: 'Project transferred successfully!',
|
||||||
|
errorMessage: 'Error transferring project. Please try again.',
|
||||||
|
},
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={open} onOpenChange={setOpen}>
|
||||||
|
<DialogContent className="text-foreground sm:max-w-xl">
|
||||||
|
<DialogHeader className="flex gap-2">
|
||||||
|
<DialogTitle>
|
||||||
|
Move the current project to a different organization.
|
||||||
|
</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
To transfer a project between two organizations, you must be ADMIN
|
||||||
|
in both.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<Form {...form}>
|
||||||
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="organization"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Organization</FormLabel>
|
||||||
|
<Select
|
||||||
|
onValueChange={field.onChange}
|
||||||
|
defaultValue={field.value}
|
||||||
|
>
|
||||||
|
<FormControl>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Organization" />
|
||||||
|
</SelectTrigger>
|
||||||
|
</FormControl>
|
||||||
|
<SelectContent>
|
||||||
|
{orgs.map((org) => (
|
||||||
|
<SelectItem
|
||||||
|
key={org.id}
|
||||||
|
value={org.id}
|
||||||
|
disabled={org.plan.isFree || org.id === currentOrg.id}
|
||||||
|
>
|
||||||
|
{org.name}
|
||||||
|
<Badge
|
||||||
|
variant={org.plan.isFree ? 'outline' : 'default'}
|
||||||
|
className={cn(
|
||||||
|
org.plan.isFree ? 'bg-muted' : '',
|
||||||
|
'hover:none ml-2 h-5 px-[6px] text-[10px]',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{org.plan.name}
|
||||||
|
</Badge>
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="flex justify-end space-x-2">
|
||||||
|
<Button
|
||||||
|
variant="secondary"
|
||||||
|
type="button"
|
||||||
|
disabled={form.formState.isSubmitting}
|
||||||
|
onClick={() => setOpen(false)}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button type="submit" disabled={form.formState.isSubmitting}>
|
||||||
|
{form.formState.isSubmitting ? (
|
||||||
|
<ActivityIndicator />
|
||||||
|
) : (
|
||||||
|
'Transfer'
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
export { default as TransferProjectDialog } from './TransferProjectDialog';
|
||||||
@@ -0,0 +1,148 @@
|
|||||||
|
import { useUI } from '@/components/common/UIProvider';
|
||||||
|
import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
|
||||||
|
import {
|
||||||
|
AlertDialog,
|
||||||
|
AlertDialogAction,
|
||||||
|
AlertDialogCancel,
|
||||||
|
AlertDialogContent,
|
||||||
|
AlertDialogDescription,
|
||||||
|
AlertDialogFooter,
|
||||||
|
AlertDialogHeader,
|
||||||
|
AlertDialogTitle,
|
||||||
|
AlertDialogTrigger,
|
||||||
|
} from '@/components/ui/v3/alert-dialog';
|
||||||
|
import { Button, buttonVariants } from '@/components/ui/v3/button';
|
||||||
|
import { Checkbox } from '@/components/ui/v3/checkbox';
|
||||||
|
import { Separator } from '@/components/ui/v3/separator';
|
||||||
|
import { useCurrentOrg } from '@/features/orgs/projects/hooks/useCurrentOrg';
|
||||||
|
import { useOrgs } from '@/features/orgs/projects/hooks/useOrgs';
|
||||||
|
import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
|
||||||
|
import { useDeleteOrganizationMutation } from '@/utils/__generated__/graphql';
|
||||||
|
import { useRouter } from 'next/router';
|
||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
|
export default function DeleteOrg() {
|
||||||
|
const { maintenanceActive } = useUI();
|
||||||
|
const router = useRouter();
|
||||||
|
const { org } = useCurrentOrg();
|
||||||
|
const { refetch: refetchOrgs } = useOrgs();
|
||||||
|
const [deleting, setDeleting] = useState(false);
|
||||||
|
const [deleteCheck1, setDeleteCheck1] = useState(false);
|
||||||
|
const [deleteCheck2, setDeleteCheck2] = useState(false);
|
||||||
|
const [deleteOrgMutation] = useDeleteOrganizationMutation();
|
||||||
|
|
||||||
|
const handleDeleteOrg = async () => {
|
||||||
|
setDeleting(true);
|
||||||
|
|
||||||
|
await execPromiseWithErrorToast(
|
||||||
|
async () => {
|
||||||
|
await deleteOrgMutation({
|
||||||
|
variables: {
|
||||||
|
id: org?.id,
|
||||||
|
},
|
||||||
|
onCompleted: async () => {
|
||||||
|
await refetchOrgs();
|
||||||
|
setDeleting(false);
|
||||||
|
await router.push('/');
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
{
|
||||||
|
loadingMessage: 'Deleting the organization',
|
||||||
|
successMessage: 'Successfully deleted the organization',
|
||||||
|
errorMessage: 'An error occurred while deleting the organization!',
|
||||||
|
},
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col w-full border rounded-md border-destructive bg-background">
|
||||||
|
<div className="flex flex-col w-full gap-2 p-4 font-medium border-b">
|
||||||
|
<h3>Delete Organization</h3>
|
||||||
|
<p className="text-sm font-normal text-muted-foreground">
|
||||||
|
Proceed with caution, as this action is irreversible and will
|
||||||
|
permanently remove the organization.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-end gap-2 p-2">
|
||||||
|
<AlertDialog>
|
||||||
|
<AlertDialogTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant="destructive"
|
||||||
|
disabled={deleting || org?.plan?.isFree || maintenanceActive}
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</Button>
|
||||||
|
</AlertDialogTrigger>
|
||||||
|
<AlertDialogContent className="flex flex-col w-full max-w-sm gap-6 p-6 text-left text-foreground">
|
||||||
|
<AlertDialogHeader>
|
||||||
|
<AlertDialogTitle>Delete Organization</AlertDialogTitle>
|
||||||
|
<AlertDialogDescription className="flex flex-col gap-1">
|
||||||
|
Are you sure you want to delete this Organization?
|
||||||
|
<span className="font-bold text-red-500">
|
||||||
|
This cannot be undone.
|
||||||
|
</span>
|
||||||
|
</AlertDialogDescription>
|
||||||
|
</AlertDialogHeader>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<Separator />
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Checkbox
|
||||||
|
id="delete-check1"
|
||||||
|
checked={deleteCheck1}
|
||||||
|
onCheckedChange={(checked) =>
|
||||||
|
setDeleteCheck1(Boolean(checked))
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
{/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
|
||||||
|
<label
|
||||||
|
htmlFor="delete-check1"
|
||||||
|
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||||
|
>
|
||||||
|
I'm sure I want to delete this Organization
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Checkbox
|
||||||
|
id="delete-check2"
|
||||||
|
checked={deleteCheck2}
|
||||||
|
onCheckedChange={(checked) =>
|
||||||
|
setDeleteCheck2(Boolean(checked))
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
{/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
|
||||||
|
<label
|
||||||
|
htmlFor="delete-check2"
|
||||||
|
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||||
|
>
|
||||||
|
I understand this action cannot be undone
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
|
</div>
|
||||||
|
<AlertDialogFooter>
|
||||||
|
<AlertDialogCancel disabled={deleting}>Cancel</AlertDialogCancel>
|
||||||
|
<AlertDialogAction
|
||||||
|
onClick={async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
await handleDeleteOrg();
|
||||||
|
}}
|
||||||
|
className={buttonVariants({ variant: 'destructive' })}
|
||||||
|
disabled={
|
||||||
|
deleting ||
|
||||||
|
!(deleteCheck1 && deleteCheck2) ||
|
||||||
|
maintenanceActive
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{deleting ? <ActivityIndicator /> : 'Delete'}
|
||||||
|
</AlertDialogAction>
|
||||||
|
</AlertDialogFooter>
|
||||||
|
</AlertDialogContent>
|
||||||
|
</AlertDialog>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
export { default as DeleteOrg } from './DeleteOrg';
|
||||||
@@ -0,0 +1,134 @@
|
|||||||
|
import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
|
||||||
|
import { Button } from '@/components/ui/v3/button';
|
||||||
|
import {
|
||||||
|
Form,
|
||||||
|
FormControl,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
FormMessage,
|
||||||
|
} from '@/components/ui/v3/form';
|
||||||
|
import { Input } from '@/components/ui/v3/input';
|
||||||
|
import { Label } from '@/components/ui/v3/label';
|
||||||
|
import { useCurrentOrg } from '@/features/orgs/projects/hooks/useCurrentOrg';
|
||||||
|
import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
|
||||||
|
import { getToastStyleProps } from '@/utils/constants/settings';
|
||||||
|
import { useUpdateOrganizationMutation } from '@/utils/__generated__/graphql';
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import { CopyIcon } from 'lucide-react';
|
||||||
|
import { useEffect } from 'react';
|
||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
import { toast } from 'react-hot-toast';
|
||||||
|
import { z } from 'zod';
|
||||||
|
|
||||||
|
const updateOrgFormSchema = z.object({
|
||||||
|
name: z.string().min(2),
|
||||||
|
});
|
||||||
|
|
||||||
|
export default function GeneralSettings() {
|
||||||
|
const { org } = useCurrentOrg();
|
||||||
|
|
||||||
|
const form = useForm<z.infer<typeof updateOrgFormSchema>>({
|
||||||
|
resolver: zodResolver(updateOrgFormSchema),
|
||||||
|
defaultValues: {
|
||||||
|
name: org?.name || '',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (org?.name !== undefined) {
|
||||||
|
form.setValue('name', org.name, { shouldDirty: false });
|
||||||
|
}
|
||||||
|
}, [org, form]);
|
||||||
|
|
||||||
|
const [updateOrganization] = useUpdateOrganizationMutation();
|
||||||
|
|
||||||
|
const onSubmit = async (values: z.infer<typeof updateOrgFormSchema>) => {
|
||||||
|
const { id } = org;
|
||||||
|
const { name } = values;
|
||||||
|
|
||||||
|
await execPromiseWithErrorToast(
|
||||||
|
async () => {
|
||||||
|
await updateOrganization({
|
||||||
|
variables: {
|
||||||
|
id,
|
||||||
|
organization: {
|
||||||
|
name,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
form.reset({ name });
|
||||||
|
},
|
||||||
|
{
|
||||||
|
loadingMessage: 'Updating organization',
|
||||||
|
successMessage: 'Successfully updated the organization',
|
||||||
|
errorMessage: 'An error occurred while updating the organization!',
|
||||||
|
},
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const toastStyle = getToastStyleProps();
|
||||||
|
|
||||||
|
const copySlugToClipboard = () => {
|
||||||
|
navigator.clipboard.writeText(org?.slug ?? ''); // Ensure default value
|
||||||
|
toast.success('Organization slug copied.', {
|
||||||
|
style: toastStyle.style,
|
||||||
|
...toastStyle.success,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Form {...form}>
|
||||||
|
<form onSubmit={form.handleSubmit(onSubmit)}>
|
||||||
|
<div className="flex w-full flex-col rounded-md border bg-background">
|
||||||
|
<div className="w-full border-b p-4 font-medium">
|
||||||
|
General Settings
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex w-full flex-col gap-4 p-4 sm:max-w-lg">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="name"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Organization name</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input placeholder="Acme Inc" {...field} />
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<Label htmlFor="slug">Organization slug</Label>
|
||||||
|
<div className="relative">
|
||||||
|
<Input
|
||||||
|
id="slug"
|
||||||
|
disabled
|
||||||
|
value={org?.slug ?? ''}
|
||||||
|
className="disabled:opacity-100"
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
onClick={copySlugToClipboard}
|
||||||
|
className="absolute right-0 top-0"
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
>
|
||||||
|
<CopyIcon className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-end gap-2 border-t p-2">
|
||||||
|
<Button type="submit" disabled={!form.formState.isDirty}>
|
||||||
|
{form.formState.isSubmitting ? <ActivityIndicator /> : 'Save'}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
export { default as GeneralSettings } from './GeneralSettings';
|
||||||
@@ -0,0 +1,34 @@
|
|||||||
|
import { Button } from '@/components/ui/v3/button';
|
||||||
|
import {
|
||||||
|
Sheet,
|
||||||
|
SheetContent,
|
||||||
|
SheetDescription,
|
||||||
|
SheetHeader,
|
||||||
|
SheetTitle,
|
||||||
|
SheetTrigger,
|
||||||
|
} from '@/components/ui/v3/sheet';
|
||||||
|
import { Announcements } from '@/features/projects/common/components/Announcements';
|
||||||
|
import { Megaphone } from 'lucide-react';
|
||||||
|
|
||||||
|
export default function AnnouncementsTray() {
|
||||||
|
return (
|
||||||
|
<Sheet>
|
||||||
|
<SheetTrigger asChild>
|
||||||
|
<Button variant="ghost" className="relative h-fit px-3 py-1">
|
||||||
|
<Megaphone className="h-5 w-5" />
|
||||||
|
</Button>
|
||||||
|
</SheetTrigger>
|
||||||
|
<SheetContent className="h-full w-full bg-background p-0 text-foreground sm:max-w-[310px]">
|
||||||
|
<SheetHeader>
|
||||||
|
<SheetTitle className="sr-only">Announcements</SheetTitle>
|
||||||
|
<SheetDescription className="sr-only">
|
||||||
|
Latest news and announcements.
|
||||||
|
</SheetDescription>
|
||||||
|
</SheetHeader>
|
||||||
|
<div className="flex h-full w-full flex-col px-8 pt-3">
|
||||||
|
<Announcements />
|
||||||
|
</div>
|
||||||
|
</SheetContent>
|
||||||
|
</Sheet>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
export { default as AnnouncementsTray } from './AnnouncementsTray';
|
||||||
@@ -0,0 +1,30 @@
|
|||||||
|
import { OrgMember } from '@/features/orgs/components/members/components/OrgMember';
|
||||||
|
import { useIsOrgAdmin } from '@/features/orgs/hooks/useIsOrgAdmin';
|
||||||
|
import { useCurrentOrg } from '@/features/orgs/projects/hooks/useCurrentOrg';
|
||||||
|
|
||||||
|
export default function MembersList() {
|
||||||
|
const { org } = useCurrentOrg();
|
||||||
|
const members = org?.members ?? [];
|
||||||
|
const isAdmin = useIsOrgAdmin();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col w-full border rounded-md bg-background">
|
||||||
|
<div className="flex flex-col w-full gap-1 p-4 border-b">
|
||||||
|
<h4 className="font-medium">
|
||||||
|
Members {members.length > 0 && `(${members.length})`}
|
||||||
|
</h4>
|
||||||
|
<p className="font-normal text-muted-foreground">
|
||||||
|
People of this organization have the ability to manage all projects
|
||||||
|
within the organization.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Todo add an empty state here */}
|
||||||
|
<div className="flex flex-col w-full gap-4 p-4">
|
||||||
|
{members.map((member) => (
|
||||||
|
<OrgMember key={member.id} member={member} isAdmin={isAdmin} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
export { default as MembersList } from './MembersList';
|
||||||
@@ -0,0 +1,284 @@
|
|||||||
|
import { Badge } from '@/components/ui/v3/badge';
|
||||||
|
import { Button } from '@/components/ui/v3/button';
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
} from '@/components/ui/v3/dialog';
|
||||||
|
import {
|
||||||
|
Sheet,
|
||||||
|
SheetContent,
|
||||||
|
SheetDescription,
|
||||||
|
SheetHeader,
|
||||||
|
SheetTitle,
|
||||||
|
SheetTrigger,
|
||||||
|
} from '@/components/ui/v3/sheet';
|
||||||
|
import { StripeEmbeddedForm } from '@/features/orgs/components/StripeEmbeddedForm';
|
||||||
|
import { useOrgs } from '@/features/orgs/projects/hooks/useOrgs';
|
||||||
|
import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
|
||||||
|
import {
|
||||||
|
CheckoutStatus,
|
||||||
|
useDeleteOrganizationMemberInviteMutation,
|
||||||
|
useOrganizationMemberInviteAcceptMutation,
|
||||||
|
useOrganizationMemberInvitesLazyQuery,
|
||||||
|
useOrganizationNewRequestsLazyQuery,
|
||||||
|
usePostOrganizationRequestMutation,
|
||||||
|
type PostOrganizationRequestResponse,
|
||||||
|
} from '@/utils/__generated__/graphql';
|
||||||
|
import { useUserData } from '@nhost/nextjs';
|
||||||
|
import { formatDistance } from 'date-fns';
|
||||||
|
import { Bell } from 'lucide-react';
|
||||||
|
import { useRouter } from 'next/router';
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
|
||||||
|
export default function NotificationsTray() {
|
||||||
|
const { refetch: refetchOrgs } = useOrgs();
|
||||||
|
const { asPath, route } = useRouter();
|
||||||
|
const userData = useUserData();
|
||||||
|
const [
|
||||||
|
getInvites,
|
||||||
|
{
|
||||||
|
loading,
|
||||||
|
refetch: refetchInvites,
|
||||||
|
data: { organizationMemberInvites: invites = [] } = {},
|
||||||
|
},
|
||||||
|
] = useOrganizationMemberInvitesLazyQuery();
|
||||||
|
|
||||||
|
const [stripeFormDialogOpen, setStripeFormDialogOpen] = useState(false);
|
||||||
|
|
||||||
|
const [pendingOrgRequest, setPendingOrgRequest] =
|
||||||
|
useState<PostOrganizationRequestResponse | null>(null);
|
||||||
|
const [getOrganizationNewRequests] = useOrganizationNewRequestsLazyQuery();
|
||||||
|
const [postOrganizationRequest] = usePostOrganizationRequestMutation();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (userData) {
|
||||||
|
getInvites({
|
||||||
|
variables: {
|
||||||
|
userId: userData.id,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, [asPath, userData, getInvites]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const checkForPendingOrgRequests = async () => {
|
||||||
|
const { data: { organizationNewRequests = [] } = {} } =
|
||||||
|
await getOrganizationNewRequests({
|
||||||
|
variables: {
|
||||||
|
userID: userData.id,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (organizationNewRequests.length > 0) {
|
||||||
|
const { sessionID } = organizationNewRequests.at(0);
|
||||||
|
|
||||||
|
const {
|
||||||
|
data: { billingPostOrganizationRequest },
|
||||||
|
} = await postOrganizationRequest({
|
||||||
|
variables: {
|
||||||
|
sessionID,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const { Status } = billingPostOrganizationRequest;
|
||||||
|
|
||||||
|
switch (Status) {
|
||||||
|
case CheckoutStatus.Open:
|
||||||
|
setPendingOrgRequest(billingPostOrganizationRequest);
|
||||||
|
break;
|
||||||
|
|
||||||
|
case CheckoutStatus.Completed:
|
||||||
|
// Do nothing
|
||||||
|
break;
|
||||||
|
|
||||||
|
case CheckoutStatus.Expired:
|
||||||
|
// Do nothing
|
||||||
|
break;
|
||||||
|
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (userData && !['/', '/orgs/verify'].includes(route)) {
|
||||||
|
checkForPendingOrgRequests();
|
||||||
|
}
|
||||||
|
}, [route, userData, getOrganizationNewRequests, postOrganizationRequest]);
|
||||||
|
|
||||||
|
const [acceptInvite] = useOrganizationMemberInviteAcceptMutation();
|
||||||
|
const [deleteInvite] = useDeleteOrganizationMemberInviteMutation();
|
||||||
|
|
||||||
|
const handleAccept = async (inviteId: string) => {
|
||||||
|
await execPromiseWithErrorToast(
|
||||||
|
async () => {
|
||||||
|
await acceptInvite({
|
||||||
|
variables: {
|
||||||
|
inviteId,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
refetchInvites();
|
||||||
|
refetchOrgs();
|
||||||
|
},
|
||||||
|
{
|
||||||
|
loadingMessage: `Accepting invite...`,
|
||||||
|
successMessage: `Invite accepted.`,
|
||||||
|
errorMessage: `Failed to accept invite! Please try again`,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleIgnore = async (inviteId: string) => {
|
||||||
|
await execPromiseWithErrorToast(
|
||||||
|
async () => {
|
||||||
|
await deleteInvite({
|
||||||
|
variables: {
|
||||||
|
inviteId,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
refetchInvites();
|
||||||
|
},
|
||||||
|
{
|
||||||
|
loadingMessage: `Processing...`,
|
||||||
|
successMessage: `Invite ignored.`,
|
||||||
|
errorMessage: `Failed to ignore invite! Please try again`,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Sheet>
|
||||||
|
<SheetTrigger asChild>
|
||||||
|
<Button variant="ghost" className="relative px-3 py-1 h-fit">
|
||||||
|
<Bell className="mt-[2px] h-[1.15rem] w-[1.15rem]" />
|
||||||
|
{invites.length > 0 ||
|
||||||
|
(pendingOrgRequest && (
|
||||||
|
<div className="absolute w-2 h-2 bg-red-500 rounded-full right-3 top-2" />
|
||||||
|
))}
|
||||||
|
</Button>
|
||||||
|
</SheetTrigger>
|
||||||
|
<SheetContent className="h-full w-full bg-background p-0 text-foreground sm:max-w-[310px]">
|
||||||
|
<SheetHeader>
|
||||||
|
<SheetTitle className="sr-only">Notifications</SheetTitle>
|
||||||
|
<SheetDescription className="sr-only">
|
||||||
|
List of pending invites and create organization requests
|
||||||
|
</SheetDescription>
|
||||||
|
</SheetHeader>
|
||||||
|
<div className="flex flex-col w-full h-full">
|
||||||
|
<div className="flex items-center h-12 px-2 border-b">
|
||||||
|
<h3 className="font-medium">
|
||||||
|
Notifications {invites.length > 0 && `(${invites.length})`}
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-2">
|
||||||
|
{!loading && invites.length === 0 && !pendingOrgRequest && (
|
||||||
|
<span className="text-muted-foreground">
|
||||||
|
No new notifications
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{pendingOrgRequest && (
|
||||||
|
<div className="flex flex-col gap-2 p-2 border rounded-md">
|
||||||
|
<div className="flex flex-col items-end gap-2">
|
||||||
|
<div className="flex items-center justify-between w-full">
|
||||||
|
<Badge className="h-5 px-[6px] text-[10px]">
|
||||||
|
New Organization pending
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<p className="w-full">
|
||||||
|
You have previously tried to create a new organization
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-row justify-end gap-2">
|
||||||
|
<Button
|
||||||
|
className="h-fit"
|
||||||
|
onClick={async () => {
|
||||||
|
setStripeFormDialogOpen(true);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Continue
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{invites.map((invite) => (
|
||||||
|
<div
|
||||||
|
key={invite.id}
|
||||||
|
className="flex flex-col gap-2 p-2 border rounded-md"
|
||||||
|
>
|
||||||
|
<div className="flex flex-col items-end gap-2">
|
||||||
|
<div className="flex items-center justify-between w-full">
|
||||||
|
<Badge className="h-5 px-[6px] text-[10px]">
|
||||||
|
Invitation
|
||||||
|
</Badge>
|
||||||
|
<span className="text-xs">
|
||||||
|
{formatDistance(
|
||||||
|
new Date(invite.createdAt),
|
||||||
|
new Date(),
|
||||||
|
{
|
||||||
|
addSuffix: true,
|
||||||
|
},
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p className="w-full">
|
||||||
|
You have been invited to Organization{' '}
|
||||||
|
<span className="font-medium">
|
||||||
|
{invite.organization.name}
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-row justify-end gap-2">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
className="h-fit"
|
||||||
|
onClick={() => {
|
||||||
|
handleIgnore(invite.id);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Ignore
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
className="h-fit"
|
||||||
|
onClick={() => handleAccept(invite.id)}
|
||||||
|
>
|
||||||
|
Accept
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</SheetContent>
|
||||||
|
</Sheet>
|
||||||
|
|
||||||
|
<Dialog
|
||||||
|
open={stripeFormDialogOpen}
|
||||||
|
onOpenChange={setStripeFormDialogOpen}
|
||||||
|
>
|
||||||
|
<DialogContent
|
||||||
|
className="text-black bg-white sm:max-w-xl"
|
||||||
|
onInteractOutside={(e) => e.preventDefault()}
|
||||||
|
onEscapeKeyDown={(e) => e.preventDefault()}
|
||||||
|
>
|
||||||
|
<DialogHeader className="sr-only">
|
||||||
|
<DialogTitle>Create Organization Checkout Form</DialogTitle>
|
||||||
|
<DialogDescription />
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
{pendingOrgRequest && (
|
||||||
|
<StripeEmbeddedForm clientSecret={pendingOrgRequest.ClientSecret} />
|
||||||
|
)}
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
export { default as NotificationsTray } from './NotificationsTray';
|
||||||
@@ -0,0 +1,294 @@
|
|||||||
|
import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
|
||||||
|
import {
|
||||||
|
AlertDialog,
|
||||||
|
AlertDialogAction,
|
||||||
|
AlertDialogCancel,
|
||||||
|
AlertDialogContent,
|
||||||
|
AlertDialogDescription,
|
||||||
|
AlertDialogFooter,
|
||||||
|
AlertDialogHeader,
|
||||||
|
AlertDialogTitle,
|
||||||
|
} from '@/components/ui/v3/alert-dialog';
|
||||||
|
import { Button, buttonVariants } from '@/components/ui/v3/button';
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from '@/components/ui/v3/dropdown-menu';
|
||||||
|
import { useCurrentOrg } from '@/features/orgs/projects/hooks/useCurrentOrg';
|
||||||
|
import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
|
||||||
|
import {
|
||||||
|
Organization_Members_Role_Enum,
|
||||||
|
useDeleteOrganizationMemberInviteMutation,
|
||||||
|
useGetOrganizationInvitesLazyQuery,
|
||||||
|
useUpdateOrganizationMemberInviteMutation,
|
||||||
|
type GetOrganizationInvitesQuery,
|
||||||
|
} from '@/utils/__generated__/graphql';
|
||||||
|
import { z } from 'zod';
|
||||||
|
|
||||||
|
import { Ellipsis } from 'lucide-react';
|
||||||
|
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
} from '@/components/ui/v3/dialog';
|
||||||
|
import {
|
||||||
|
Form,
|
||||||
|
FormControl,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
FormMessage,
|
||||||
|
} from '@/components/ui/v3/form';
|
||||||
|
import { Input } from '@/components/ui/v3/input';
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from '@/components/ui/v3/select';
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
|
||||||
|
type Invite = GetOrganizationInvitesQuery['organizationMemberInvites'][0];
|
||||||
|
|
||||||
|
interface InviteProps {
|
||||||
|
invite: Invite;
|
||||||
|
isAdmin: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const sendInviteFormSchema = z.object({
|
||||||
|
email: z.string().email().optional(),
|
||||||
|
role: z.nativeEnum(Organization_Members_Role_Enum),
|
||||||
|
});
|
||||||
|
|
||||||
|
export default function OrgInvite({ invite, isAdmin }: InviteProps) {
|
||||||
|
const { org } = useCurrentOrg();
|
||||||
|
const [deleting, setDeleting] = useState(false);
|
||||||
|
const [deleteInvite] = useDeleteOrganizationMemberInviteMutation();
|
||||||
|
const [dropDownOpen, setDropDownOpen] = useState(false);
|
||||||
|
const [confirmDeleteInviteDialogOpen, setConfirmDeleteInviteDialogOpen] =
|
||||||
|
useState(false);
|
||||||
|
|
||||||
|
const [updateRoleDialogOpen, setUpdateRoleDialogOpen] = useState(false);
|
||||||
|
|
||||||
|
const [, { refetch }] = useGetOrganizationInvitesLazyQuery({
|
||||||
|
variables: { organizationId: org?.id },
|
||||||
|
});
|
||||||
|
|
||||||
|
const [updateInvite] = useUpdateOrganizationMemberInviteMutation();
|
||||||
|
|
||||||
|
const form = useForm<z.infer<typeof sendInviteFormSchema>>({
|
||||||
|
resolver: zodResolver(sendInviteFormSchema),
|
||||||
|
defaultValues: {
|
||||||
|
email: invite.email,
|
||||||
|
role: invite.role,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const onUpdateSubmit = async (
|
||||||
|
values: z.infer<typeof sendInviteFormSchema>,
|
||||||
|
) => {
|
||||||
|
const { role } = values;
|
||||||
|
|
||||||
|
await execPromiseWithErrorToast(
|
||||||
|
async () => {
|
||||||
|
await updateInvite({
|
||||||
|
variables: {
|
||||||
|
inviteId: invite.id,
|
||||||
|
role,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
form.reset();
|
||||||
|
refetch();
|
||||||
|
setUpdateRoleDialogOpen(false);
|
||||||
|
},
|
||||||
|
{
|
||||||
|
loadingMessage: 'Updating invite...',
|
||||||
|
successMessage: `Invite updated.`,
|
||||||
|
errorMessage: `An error occured while updating the invite! Please try again.`,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDismissDialog = () => {
|
||||||
|
form.reset();
|
||||||
|
setUpdateRoleDialogOpen(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeleteInvite = async () => {
|
||||||
|
setDeleting(true);
|
||||||
|
|
||||||
|
await execPromiseWithErrorToast(
|
||||||
|
async () => {
|
||||||
|
await deleteInvite({
|
||||||
|
variables: {
|
||||||
|
inviteId: invite.id,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
refetch();
|
||||||
|
setDeleting(false);
|
||||||
|
setConfirmDeleteInviteDialogOpen(false);
|
||||||
|
},
|
||||||
|
{
|
||||||
|
loadingMessage: 'Deleting invite...',
|
||||||
|
successMessage: `Invite deleted`,
|
||||||
|
errorMessage: `An error occured while deleting the invite! Please try again.`,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="flex flex-row items-center justify-between w-full">
|
||||||
|
<span className="text-sm text-foreground">{invite.email}</span>
|
||||||
|
|
||||||
|
<div className="flex flex-row items-center gap-4 text-foreground">
|
||||||
|
<span className="font-medium">{invite.role}</span>
|
||||||
|
|
||||||
|
<DropdownMenu open={dropDownOpen} onOpenChange={setDropDownOpen}>
|
||||||
|
<DropdownMenuTrigger asChild>
|
||||||
|
<Button variant="ghost" disabled={!isAdmin}>
|
||||||
|
<Ellipsis />
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent side="bottom" align="end" sideOffset={-5}>
|
||||||
|
<DropdownMenuItem
|
||||||
|
onSelect={() => {
|
||||||
|
setDropDownOpen(false);
|
||||||
|
form.reset({ email: invite.email, role: invite.role });
|
||||||
|
setUpdateRoleDialogOpen(true);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Update role
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem
|
||||||
|
onSelect={() => {
|
||||||
|
setDropDownOpen(false);
|
||||||
|
setConfirmDeleteInviteDialogOpen(true);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Delete invite
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<AlertDialog
|
||||||
|
open={confirmDeleteInviteDialogOpen}
|
||||||
|
onOpenChange={setConfirmDeleteInviteDialogOpen}
|
||||||
|
>
|
||||||
|
<AlertDialogContent className="text-foreground">
|
||||||
|
<AlertDialogHeader>
|
||||||
|
<AlertDialogTitle>Are you sure?</AlertDialogTitle>
|
||||||
|
<AlertDialogDescription>
|
||||||
|
This action will delete the invite.
|
||||||
|
</AlertDialogDescription>
|
||||||
|
</AlertDialogHeader>
|
||||||
|
<AlertDialogFooter>
|
||||||
|
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||||
|
<AlertDialogAction
|
||||||
|
onClick={handleDeleteInvite}
|
||||||
|
className={buttonVariants({ variant: 'destructive' })}
|
||||||
|
disabled={deleting}
|
||||||
|
>
|
||||||
|
{deleting ? <ActivityIndicator /> : 'Delete'}
|
||||||
|
</AlertDialogAction>
|
||||||
|
</AlertDialogFooter>
|
||||||
|
</AlertDialogContent>
|
||||||
|
</AlertDialog>
|
||||||
|
|
||||||
|
<Dialog
|
||||||
|
open={updateRoleDialogOpen}
|
||||||
|
onOpenChange={(value) => {
|
||||||
|
form.reset();
|
||||||
|
setUpdateRoleDialogOpen(value);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<DialogContent className="text-foreground sm:max-w-xl">
|
||||||
|
<Form {...form}>
|
||||||
|
<form onSubmit={form.handleSubmit(onUpdateSubmit)}>
|
||||||
|
<DialogHeader className="mb-4">
|
||||||
|
<DialogTitle>Update invite</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
This will affect their permissions and access within the
|
||||||
|
organization.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-4 mb-4">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="email"
|
||||||
|
disabled
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Email</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
{...field}
|
||||||
|
type="email"
|
||||||
|
placeholder="name@company.com"
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="role"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Role</FormLabel>
|
||||||
|
<Select
|
||||||
|
onValueChange={field.onChange}
|
||||||
|
defaultValue={field.value}
|
||||||
|
>
|
||||||
|
<FormControl>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="Select a verified email to display" />
|
||||||
|
</SelectTrigger>
|
||||||
|
</FormControl>
|
||||||
|
<SelectContent>
|
||||||
|
{Object.entries(Organization_Members_Role_Enum).map(
|
||||||
|
(role) => (
|
||||||
|
<SelectItem key={role[0]} value={role[1]}>
|
||||||
|
{role[1]}
|
||||||
|
</SelectItem>
|
||||||
|
),
|
||||||
|
)}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<DialogFooter>
|
||||||
|
<Button
|
||||||
|
variant="secondary"
|
||||||
|
type="button"
|
||||||
|
onClick={handleDismissDialog}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button type="submit">Update</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
export { default as OrgInvite } from './OrgInvite';
|
||||||
@@ -0,0 +1,334 @@
|
|||||||
|
import { Avatar } from '@/components/ui/v2/Avatar';
|
||||||
|
import { Badge } from '@/components/ui/v3/badge';
|
||||||
|
import { Button, buttonVariants } from '@/components/ui/v3/button';
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from '@/components/ui/v3/dropdown-menu';
|
||||||
|
import { useCurrentOrg } from '@/features/orgs/projects/hooks/useCurrentOrg';
|
||||||
|
import { useOrgs } from '@/features/orgs/projects/hooks/useOrgs';
|
||||||
|
import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
|
||||||
|
|
||||||
|
import {
|
||||||
|
AlertDialog,
|
||||||
|
AlertDialogAction,
|
||||||
|
AlertDialogCancel,
|
||||||
|
AlertDialogContent,
|
||||||
|
AlertDialogDescription,
|
||||||
|
AlertDialogFooter,
|
||||||
|
AlertDialogHeader,
|
||||||
|
AlertDialogTitle,
|
||||||
|
} from '@/components/ui/v3/alert-dialog';
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
} from '@/components/ui/v3/dialog';
|
||||||
|
|
||||||
|
import {
|
||||||
|
Form,
|
||||||
|
FormControl,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
FormMessage,
|
||||||
|
} from '@/components/ui/v3/form';
|
||||||
|
|
||||||
|
import { useUI } from '@/components/common/UIProvider';
|
||||||
|
import { Input } from '@/components/ui/v3/input';
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from '@/components/ui/v3/select';
|
||||||
|
import {
|
||||||
|
Organization_Members_Role_Enum,
|
||||||
|
useDeleteOrganizationMemberMutation,
|
||||||
|
useUpdateOrganizationMemberMutation,
|
||||||
|
type GetOrganizationQuery,
|
||||||
|
} from '@/utils/__generated__/graphql';
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import { useUserData } from '@nhost/nextjs';
|
||||||
|
import { Ellipsis } from 'lucide-react';
|
||||||
|
import { useRouter } from 'next/router';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
import { z } from 'zod';
|
||||||
|
|
||||||
|
type Member = GetOrganizationQuery['organizations']['0']['members'][0];
|
||||||
|
|
||||||
|
interface OrgMemberProps {
|
||||||
|
member: Member;
|
||||||
|
isAdmin: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const updateMemberRoleFormSchema = z.object({
|
||||||
|
email: z.string().email().optional(),
|
||||||
|
role: z.nativeEnum(Organization_Members_Role_Enum),
|
||||||
|
});
|
||||||
|
|
||||||
|
export default function OrgMember({ member, isAdmin }: OrgMemberProps) {
|
||||||
|
const { maintenanceActive } = useUI();
|
||||||
|
const { id } = useUserData();
|
||||||
|
const { push } = useRouter();
|
||||||
|
const { refetch: refetchOrgs } = useOrgs();
|
||||||
|
const { org: { plan: { isFree } = {} } = {}, refetch: refetchCurrentOrg } =
|
||||||
|
useCurrentOrg();
|
||||||
|
const [dropDownOpen, setDropDownOpen] = useState(false);
|
||||||
|
const [confirmRemoveMemberDialogOpen, setConfirmRemoveMemberDialogOpen] =
|
||||||
|
useState(false);
|
||||||
|
const [updateMemberRoleDialogOpen, setUpdateMemberRoleDialogOpen] =
|
||||||
|
useState(false);
|
||||||
|
|
||||||
|
const isSelf = id === member.user.id;
|
||||||
|
|
||||||
|
const [deleteMember] = useDeleteOrganizationMemberMutation({
|
||||||
|
variables: {
|
||||||
|
memberId: member.id,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleRemoveMemberFromOrg = async () => {
|
||||||
|
await execPromiseWithErrorToast(
|
||||||
|
async () => {
|
||||||
|
const isRemovingSelf = id === member.user.id;
|
||||||
|
await deleteMember();
|
||||||
|
// TODO see if it makes sense to unify both of these
|
||||||
|
await refetchCurrentOrg();
|
||||||
|
await refetchOrgs();
|
||||||
|
|
||||||
|
if (isRemovingSelf) {
|
||||||
|
push('/');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
loadingMessage: `Removing member...`,
|
||||||
|
successMessage: `Member removed.`,
|
||||||
|
errorMessage: `Failed to remove member! Please try again`,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const form = useForm<z.infer<typeof updateMemberRoleFormSchema>>({
|
||||||
|
resolver: zodResolver(updateMemberRoleFormSchema),
|
||||||
|
defaultValues: {
|
||||||
|
email: member.user.email,
|
||||||
|
role: member.role,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const [updateMember] = useUpdateOrganizationMemberMutation();
|
||||||
|
|
||||||
|
const onUpdateSubmit = async (
|
||||||
|
values: z.infer<typeof updateMemberRoleFormSchema>,
|
||||||
|
) => {
|
||||||
|
const { role } = values;
|
||||||
|
const { id: memberId } = member;
|
||||||
|
|
||||||
|
await execPromiseWithErrorToast(
|
||||||
|
async () => {
|
||||||
|
await updateMember({
|
||||||
|
variables: {
|
||||||
|
memberId,
|
||||||
|
role,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
form.reset();
|
||||||
|
await refetchCurrentOrg();
|
||||||
|
setUpdateMemberRoleDialogOpen(false);
|
||||||
|
},
|
||||||
|
{
|
||||||
|
loadingMessage: 'Updating member role...',
|
||||||
|
successMessage: `Member role updated.`,
|
||||||
|
errorMessage: `An error occured while updating the member role! Please try again.`,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDismissDialog = () => {
|
||||||
|
form.reset();
|
||||||
|
setUpdateMemberRoleDialogOpen(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="flex flex-row w-full place-content-between">
|
||||||
|
<div className="flex flex-row items-center">
|
||||||
|
<Avatar
|
||||||
|
className="rounded-full"
|
||||||
|
alt={member.user.displayName}
|
||||||
|
src={member.user.avatarUrl}
|
||||||
|
>
|
||||||
|
{member.user.displayName || 'local'}
|
||||||
|
</Avatar>
|
||||||
|
|
||||||
|
<div className="flex flex-col ml-3">
|
||||||
|
<div className="flex flex-row items-center gap-2">
|
||||||
|
<span className="font-medium">{member.user.displayName}</span>
|
||||||
|
{isSelf && (
|
||||||
|
<Badge className="pointer-events-none h-5 bg-blue-100 px-[6px] text-[10px] font-bold text-primary-main dark:bg-primary">
|
||||||
|
Me
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<span className="text-sm text-muted-foreground">
|
||||||
|
{member.user.email}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-row items-center gap-4">
|
||||||
|
<span className="font-medium">{member.role}</span>
|
||||||
|
|
||||||
|
<DropdownMenu open={dropDownOpen} onOpenChange={setDropDownOpen}>
|
||||||
|
<DropdownMenuTrigger
|
||||||
|
disabled={
|
||||||
|
(!isAdmin && id !== member.user.id) ||
|
||||||
|
isFree ||
|
||||||
|
maintenanceActive
|
||||||
|
}
|
||||||
|
asChild
|
||||||
|
className="h-fit"
|
||||||
|
>
|
||||||
|
<Button variant="ghost" className="h-8 p-2">
|
||||||
|
<Ellipsis />
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent side="bottom" align="end" sideOffset={-5}>
|
||||||
|
<DropdownMenuItem
|
||||||
|
disabled={!isAdmin}
|
||||||
|
onSelect={() => {
|
||||||
|
setDropDownOpen(false);
|
||||||
|
setUpdateMemberRoleDialogOpen(true);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Update role
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuItem
|
||||||
|
onSelect={() => {
|
||||||
|
setDropDownOpen(false);
|
||||||
|
setConfirmRemoveMemberDialogOpen(true);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Remove from organization
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<AlertDialog
|
||||||
|
open={confirmRemoveMemberDialogOpen}
|
||||||
|
onOpenChange={setConfirmRemoveMemberDialogOpen}
|
||||||
|
>
|
||||||
|
<AlertDialogContent className="text-foreground">
|
||||||
|
<AlertDialogHeader>
|
||||||
|
<AlertDialogTitle>Are you sure?</AlertDialogTitle>
|
||||||
|
<AlertDialogDescription>
|
||||||
|
This action will remove the member from organization.
|
||||||
|
</AlertDialogDescription>
|
||||||
|
</AlertDialogHeader>
|
||||||
|
<AlertDialogFooter>
|
||||||
|
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||||
|
<AlertDialogAction
|
||||||
|
onClick={handleRemoveMemberFromOrg}
|
||||||
|
className={buttonVariants({ variant: 'destructive' })}
|
||||||
|
>
|
||||||
|
Continue
|
||||||
|
</AlertDialogAction>
|
||||||
|
</AlertDialogFooter>
|
||||||
|
</AlertDialogContent>
|
||||||
|
</AlertDialog>
|
||||||
|
|
||||||
|
<Dialog
|
||||||
|
open={updateMemberRoleDialogOpen}
|
||||||
|
onOpenChange={(value) => {
|
||||||
|
form.reset();
|
||||||
|
setUpdateMemberRoleDialogOpen(value);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<DialogContent className="text-foreground sm:max-w-xl">
|
||||||
|
<Form {...form}>
|
||||||
|
<form onSubmit={form.handleSubmit(onUpdateSubmit)}>
|
||||||
|
<DialogHeader className="mb-4">
|
||||||
|
<DialogTitle>Update member role</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
This will affect their permissions and access within the
|
||||||
|
organization.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-4 mb-4">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="email"
|
||||||
|
disabled
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Email</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
{...field}
|
||||||
|
type="email"
|
||||||
|
placeholder="name@company.com"
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="role"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Role</FormLabel>
|
||||||
|
<Select
|
||||||
|
onValueChange={field.onChange}
|
||||||
|
defaultValue={field.value}
|
||||||
|
>
|
||||||
|
<FormControl>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue placeholder="email" />
|
||||||
|
</SelectTrigger>
|
||||||
|
</FormControl>
|
||||||
|
<SelectContent>
|
||||||
|
{Object.entries(Organization_Members_Role_Enum).map(
|
||||||
|
(role) => (
|
||||||
|
<SelectItem key={role[0]} value={role[1]}>
|
||||||
|
{role[1]}
|
||||||
|
</SelectItem>
|
||||||
|
),
|
||||||
|
)}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<DialogFooter>
|
||||||
|
<Button
|
||||||
|
variant="secondary"
|
||||||
|
type="button"
|
||||||
|
onClick={handleDismissDialog}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button type="submit">Update</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
export { default as OrgMember } from './OrgMember';
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user