From 7e809c32991d29e50150fabb41b2b7866348dedb Mon Sep 17 00:00:00 2001 From: EiffelFly <57251712+EiffelFly@users.noreply.github.com> Date: Thu, 28 Nov 2024 16:47:56 +0800 Subject: [PATCH] feat: adapt policy link and revamp setting page --- .../src/app/settings/account/render.tsx | 28 +++++++------------ .../src/app/settings/api-tokens/render.tsx | 27 +++++++----------- .../src/app/settings/integrations/render.tsx | 16 +++++------ .../src/app/settings/profile/rendex.tsx | 28 +++++++------------ .../src/app/settings/secrets/render.tsx | 16 +++++------ apps/console/src/styles/global.css | 2 ++ packages/toolkit/package.json | 2 +- .../BreadcrumbWithLink.tsx | 9 +++--- packages/toolkit/src/constant/index.ts | 1 + packages/toolkit/src/constant/ui.ts | 1 + .../toolkit/src/view/settings/SettingRoot.tsx | 19 +++++++++++-- .../src/view/settings/SettingSidebar.tsx | 21 +++++++++++++- .../toolkit/src/view/settings/SettingTab.tsx | 6 +++- .../view/settings/user/UserAPITokenTab.tsx | 20 +++++++++---- .../src/view/settings/user/UserAccountTab.tsx | 20 +++++++++---- .../src/view/settings/user/UserProfileTab.tsx | 18 ++++++++---- 16 files changed, 141 insertions(+), 93 deletions(-) create mode 100644 packages/toolkit/src/constant/ui.ts diff --git a/apps/console/src/app/settings/account/render.tsx b/apps/console/src/app/settings/account/render.tsx index 77ea4fd85c..42e9ff70f5 100644 --- a/apps/console/src/app/settings/account/render.tsx +++ b/apps/console/src/app/settings/account/render.tsx @@ -1,13 +1,11 @@ "use client"; -import { useRouter } from "next/navigation"; - import { AppTopbar, - BreadcrumbWithLink, NamespaceSwitch, PageBase, Setting, + SETTING_PAGE_CONTENT_PADDING, UserAccountTab, UserSidebar, } from "@instill-ai/toolkit"; @@ -15,27 +13,21 @@ import { import { useAppAccessToken } from "~/lib/use-app-access-token"; export function AccountSettingPageRender() { - const accessToken = useAppAccessToken(); - - const router = useRouter(); + useAppAccessToken(); return ( } /> - -
- -
- + + - + diff --git a/apps/console/src/app/settings/api-tokens/render.tsx b/apps/console/src/app/settings/api-tokens/render.tsx index dab94b0b2f..7328f76589 100644 --- a/apps/console/src/app/settings/api-tokens/render.tsx +++ b/apps/console/src/app/settings/api-tokens/render.tsx @@ -1,13 +1,11 @@ "use client"; -import { useRouter } from "next/navigation"; - import { AppTopbar, - BreadcrumbWithLink, NamespaceSwitch, PageBase, Setting, + SETTING_PAGE_CONTENT_PADDING, UserAPITokenTab, UserSidebar, } from "@instill-ai/toolkit"; @@ -15,26 +13,21 @@ import { import { useAppAccessToken } from "~/lib/use-app-access-token"; export function ApiTokenSettingsPageRender() { - const accessToken = useAppAccessToken(); + useAppAccessToken(); - const router = useRouter(); return ( } /> - -
- -
- + + - + diff --git a/apps/console/src/app/settings/integrations/render.tsx b/apps/console/src/app/settings/integrations/render.tsx index f24e9817de..9e4ea20c80 100644 --- a/apps/console/src/app/settings/integrations/render.tsx +++ b/apps/console/src/app/settings/integrations/render.tsx @@ -2,10 +2,10 @@ import { AppTopbar, - BreadcrumbWithLink, NamespaceSwitch, PageBase, Setting, + SETTING_PAGE_CONTENT_PADDING, UserIntegrationsTab, UserSidebar, } from "@instill-ai/toolkit"; @@ -19,13 +19,13 @@ export function IntegrationsSettingsPageRender() { } /> - -
- -
- + + diff --git a/apps/console/src/app/settings/profile/rendex.tsx b/apps/console/src/app/settings/profile/rendex.tsx index a340c1591e..4a5940cdf3 100644 --- a/apps/console/src/app/settings/profile/rendex.tsx +++ b/apps/console/src/app/settings/profile/rendex.tsx @@ -1,13 +1,11 @@ "use client"; -import { useRouter } from "next/navigation"; - import { AppTopbar, - BreadcrumbWithLink, NamespaceSwitch, PageBase, Setting, + SETTING_PAGE_CONTENT_PADDING, UserProfileTab, UserSidebar, } from "@instill-ai/toolkit"; @@ -15,27 +13,21 @@ import { import { useAppAccessToken } from "~/lib/use-app-access-token"; export function ProfileSettingPageRender() { - const accessToken = useAppAccessToken(); - - const router = useRouter(); + useAppAccessToken(); return ( } /> - -
- -
- + + - + diff --git a/apps/console/src/app/settings/secrets/render.tsx b/apps/console/src/app/settings/secrets/render.tsx index ec1a4ade25..e8293c70c2 100644 --- a/apps/console/src/app/settings/secrets/render.tsx +++ b/apps/console/src/app/settings/secrets/render.tsx @@ -2,10 +2,10 @@ import { AppTopbar, - BreadcrumbWithLink, NamespaceSwitch, PageBase, Setting, + SETTING_PAGE_CONTENT_PADDING, UserSecretTab, UserSidebar, } from "@instill-ai/toolkit"; @@ -18,13 +18,13 @@ export function SecretSettingdPageRender() { } /> - -
- -
- + + diff --git a/apps/console/src/styles/global.css b/apps/console/src/styles/global.css index f8ca4b65cb..0b83f37bfc 100644 --- a/apps/console/src/styles/global.css +++ b/apps/console/src/styles/global.css @@ -34,6 +34,8 @@ :root { --topbar-controller-height: 48px; --topbar-nav-height: 48px; + --setting-container-padding-top: 80px; + --setting-container-padding-bottom: 32px; --pipeline-builder-bottom-bar-height: 24px; --pipeline-builder-node-available-width: 332px; --pipeline-builder-node-padding-x: 12px; diff --git a/packages/toolkit/package.json b/packages/toolkit/package.json index ae5aa7ef92..30a02bfd89 100644 --- a/packages/toolkit/package.json +++ b/packages/toolkit/package.json @@ -1,6 +1,6 @@ { "name": "@instill-ai/toolkit", - "version": "0.113.0-rc.2", + "version": "0.113.0-rc.5", "description": "Instill AI's frontend toolkit", "repository": "https://github.com/instill-ai/design-system.git", "bugs": "https://github.com/instill-ai/design-system/issues", diff --git a/packages/toolkit/src/components/breadcrumb-with-link/BreadcrumbWithLink.tsx b/packages/toolkit/src/components/breadcrumb-with-link/BreadcrumbWithLink.tsx index dfc3dfdd51..88598bd75b 100644 --- a/packages/toolkit/src/components/breadcrumb-with-link/BreadcrumbWithLink.tsx +++ b/packages/toolkit/src/components/breadcrumb-with-link/BreadcrumbWithLink.tsx @@ -3,21 +3,22 @@ import React, { ReactElement } from "react"; import Link from "next/link"; -import { Icons } from "@instill-ai/design-system"; +import { cn, Icons } from "@instill-ai/design-system"; export type BreadcrumbWithLinkItem = { label: ReactElement | string; link?: string; }; -export type BBreadcrumbWithLinkProps = { +export type BreadcrumbWithLinkProps = { items: BreadcrumbWithLinkItem[]; + className?: string; }; -const BreadcrumbWithLink = ({ items }: BBreadcrumbWithLinkProps) => { +const BreadcrumbWithLink = ({ items, className }: BreadcrumbWithLinkProps) => { const activeLink = items.filter((_, index) => index != items.length - 1); return ( -
+
{activeLink.map((item) => ( {item.link ? ( diff --git a/packages/toolkit/src/constant/index.ts b/packages/toolkit/src/constant/index.ts index 2931b21b88..ccd0ba5830 100644 --- a/packages/toolkit/src/constant/index.ts +++ b/packages/toolkit/src/constant/index.ts @@ -5,3 +5,4 @@ export * from "./integration"; export * from "./model"; export * from "./resourceIdPrefix"; export * from "./react-query"; +export * from "./ui"; diff --git a/packages/toolkit/src/constant/ui.ts b/packages/toolkit/src/constant/ui.ts new file mode 100644 index 0000000000..2b57c43c99 --- /dev/null +++ b/packages/toolkit/src/constant/ui.ts @@ -0,0 +1 @@ +export const SETTING_PAGE_CONTENT_PADDING = "p-8"; diff --git a/packages/toolkit/src/view/settings/SettingRoot.tsx b/packages/toolkit/src/view/settings/SettingRoot.tsx index 66b409d0b1..108adfac5f 100644 --- a/packages/toolkit/src/view/settings/SettingRoot.tsx +++ b/packages/toolkit/src/view/settings/SettingRoot.tsx @@ -1,5 +1,20 @@ "use client"; -export const SettingRoot = ({ children }: { children: React.ReactNode }) => { - return
{children}
; +import { BreadcrumbWithLink, BreadcrumbWithLinkProps } from "../../components"; + +export const SettingRoot = ({ + children, + breadcrumbItems, +}: { + children: React.ReactNode; + breadcrumbItems: BreadcrumbWithLinkProps["items"]; +}) => { + return ( +
+
+ +
+
{children}
+
+ ); }; diff --git a/packages/toolkit/src/view/settings/SettingSidebar.tsx b/packages/toolkit/src/view/settings/SettingSidebar.tsx index 400f885b1e..70d63070e8 100644 --- a/packages/toolkit/src/view/settings/SettingSidebar.tsx +++ b/packages/toolkit/src/view/settings/SettingSidebar.tsx @@ -2,14 +2,33 @@ import * as React from "react"; import Link from "next/link"; +import { usePathname } from "next/navigation"; import cn from "clsx"; +import { LinkButton } from "@instill-ai/design-system"; + export const SettingSidebarRoot = ({ children, }: { children: React.ReactNode; }) => { - return
{children}
; + const pathname = usePathname(); + return ( +
+
{children}
+ {pathname.includes("integrations") ? ( + + + Privacy + + + ) : null} +
+ ); }; export const SettingSidebarItem = ({ diff --git a/packages/toolkit/src/view/settings/SettingTab.tsx b/packages/toolkit/src/view/settings/SettingTab.tsx index 9dc574e4a2..c7dcafbd50 100644 --- a/packages/toolkit/src/view/settings/SettingTab.tsx +++ b/packages/toolkit/src/view/settings/SettingTab.tsx @@ -5,7 +5,11 @@ import cn from "clsx"; import { Separator } from "@instill-ai/design-system"; export const SettingTabRoot = ({ children }: { children: React.ReactNode }) => { - return
{children}
; + return ( +
+ {children} +
+ ); }; export const SettingTabHeader = ({ diff --git a/packages/toolkit/src/view/settings/user/UserAPITokenTab.tsx b/packages/toolkit/src/view/settings/user/UserAPITokenTab.tsx index a6c1093a06..6cdc764fce 100644 --- a/packages/toolkit/src/view/settings/user/UserAPITokenTab.tsx +++ b/packages/toolkit/src/view/settings/user/UserAPITokenTab.tsx @@ -1,9 +1,15 @@ "use client"; import * as React from "react"; +import { useRouter } from "next/navigation"; import { Setting } from ".."; -import { GeneralAppPageProp, useAPITokens } from "../../../lib"; +import { + InstillStore, + useAPITokens, + useInstillStore, + useShallow, +} from "../../../lib"; import { env } from "../../../server"; import { APITokenTable, @@ -11,14 +17,18 @@ import { SelectOrganization, } from "../api-tokens"; -export type UserAPITokenTabProps = GeneralAppPageProp; +const selector = (store: InstillStore) => ({ + accessToken: store.accessToken, + enabledQuery: store.enabledQuery, +}); -export const UserAPITokenTab = (props: UserAPITokenTabProps) => { - const { accessToken, enableQuery, router } = props; +export const UserAPITokenTab = () => { + const router = useRouter(); + const { accessToken, enabledQuery } = useInstillStore(useShallow(selector)); const apiTokens = useAPITokens({ accessToken, - enabled: enableQuery, + enabled: enabledQuery, }); React.useEffect(() => { diff --git a/packages/toolkit/src/view/settings/user/UserAccountTab.tsx b/packages/toolkit/src/view/settings/user/UserAccountTab.tsx index 8dcadeb2d4..7110bb8878 100644 --- a/packages/toolkit/src/view/settings/user/UserAccountTab.tsx +++ b/packages/toolkit/src/view/settings/user/UserAccountTab.tsx @@ -1,6 +1,7 @@ "use client"; import * as React from "react"; +import { useRouter } from "next/navigation"; import { zodResolver } from "@hookform/resolvers/zod"; import { useForm } from "react-hook-form"; import * as z from "zod"; @@ -8,19 +9,28 @@ import * as z from "zod"; import { Form, Input } from "@instill-ai/design-system"; import { Setting } from ".."; -import { GeneralAppPageProp, useAuthenticatedUser } from "../../../lib"; +import { + InstillStore, + useAuthenticatedUser, + useInstillStore, + useShallow, +} from "../../../lib"; const UserAccountTabSchema = z.object({ email: z.string(), }); -export type UserAccountTabProps = GeneralAppPageProp; +const selector = (store: InstillStore) => ({ + accessToken: store.accessToken, + enabledQuery: store.enabledQuery, +}); -export const UserAccountTab = (props: UserAccountTabProps) => { - const { accessToken, enableQuery, router } = props; +export const UserAccountTab = () => { + const router = useRouter(); + const { accessToken, enabledQuery } = useInstillStore(useShallow(selector)); const me = useAuthenticatedUser({ - enabled: enableQuery, + enabled: enabledQuery, accessToken: accessToken, }); diff --git a/packages/toolkit/src/view/settings/user/UserProfileTab.tsx b/packages/toolkit/src/view/settings/user/UserProfileTab.tsx index aa4b8a0cea..a75f93ec84 100644 --- a/packages/toolkit/src/view/settings/user/UserProfileTab.tsx +++ b/packages/toolkit/src/view/settings/user/UserProfileTab.tsx @@ -1,6 +1,7 @@ "use client"; import * as React from "react"; +import { useRouter } from "next/navigation"; import { zodResolver } from "@hookform/resolvers/zod"; import { AuthenticatedUser } from "instill-sdk"; import { useForm } from "react-hook-form"; @@ -18,11 +19,13 @@ import { import { Setting } from ".."; import { LoadingSpin, UploadImageFieldWithCrop } from "../../../components"; import { - GeneralAppPageProp, + InstillStore, sendAmplitudeData, toastInstillError, useAmplitudeCtx, useAuthenticatedUser, + useInstillStore, + useShallow, useUpdateAuthenticatedUser, } from "../../../lib"; import { FormLabel } from "../FormLabel"; @@ -49,17 +52,22 @@ export const UserProfileTabSchema = z.object({ .optional(), }); -export type UserProfileTabProps = GeneralAppPageProp; +const selector = (store: InstillStore) => ({ + accessToken: store.accessToken, + enabledQuery: store.enabledQuery, +}); -export const UserProfileTab = (props: UserProfileTabProps) => { +export const UserProfileTab = () => { const { amplitudeIsInit } = useAmplitudeCtx(); - const { accessToken, enableQuery, router } = props; + const router = useRouter(); + + const { accessToken, enabledQuery } = useInstillStore(useShallow(selector)); const { toast } = useToast(); const me = useAuthenticatedUser({ accessToken, - enabled: enableQuery, + enabled: enabledQuery, }); const form = useForm>({