Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: adapt policy link and revamp setting pages #1629

Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
feat: adapt policy link and revamp setting page
EiffelFly committed Nov 28, 2024
commit 7e809c32991d29e50150fabb41b2b7866348dedb
28 changes: 10 additions & 18 deletions apps/console/src/app/settings/account/render.tsx
Original file line number Diff line number Diff line change
@@ -1,41 +1,33 @@
"use client";

import { useRouter } from "next/navigation";

import {
AppTopbar,
BreadcrumbWithLink,
NamespaceSwitch,
PageBase,
Setting,
SETTING_PAGE_CONTENT_PADDING,
UserAccountTab,
UserSidebar,
} from "@instill-ai/toolkit";

import { useAppAccessToken } from "~/lib/use-app-access-token";

export function AccountSettingPageRender() {
const accessToken = useAppAccessToken();

const router = useRouter();
useAppAccessToken();

return (
<PageBase>
<AppTopbar namespaceSwitch={<NamespaceSwitch />} />
<PageBase.Container>
<PageBase.Content contentPadding="p-8">
<div className="mb-[52px] w-full px-20">
<BreadcrumbWithLink
items={[{ label: "Home", link: "/" }, { label: "Settings" }]}
/>
</div>
<Setting.Root>
<PageBase.Content contentPadding={SETTING_PAGE_CONTENT_PADDING}>
<Setting.Root
breadcrumbItems={[
{ label: "Home", link: "/" },
{ label: "Settings" },
]}
>
<UserSidebar />
<UserAccountTab
router={router}
accessToken={accessToken.isSuccess ? accessToken.data : null}
enableQuery={accessToken.isSuccess}
/>
<UserAccountTab />
</Setting.Root>
</PageBase.Content>
</PageBase.Container>
27 changes: 10 additions & 17 deletions apps/console/src/app/settings/api-tokens/render.tsx
Original file line number Diff line number Diff line change
@@ -1,40 +1,33 @@
"use client";

import { useRouter } from "next/navigation";

import {
AppTopbar,
BreadcrumbWithLink,
NamespaceSwitch,
PageBase,
Setting,
SETTING_PAGE_CONTENT_PADDING,
UserAPITokenTab,
UserSidebar,
} from "@instill-ai/toolkit";

import { useAppAccessToken } from "~/lib/use-app-access-token";

export function ApiTokenSettingsPageRender() {
const accessToken = useAppAccessToken();
useAppAccessToken();

const router = useRouter();
return (
<PageBase>
<AppTopbar namespaceSwitch={<NamespaceSwitch />} />
<PageBase.Container>
<PageBase.Content contentPadding="p-8">
<div className="mb-[52px] w-full px-20">
<BreadcrumbWithLink
items={[{ label: "Home", link: "/" }, { label: "Settings" }]}
/>
</div>
<Setting.Root>
<PageBase.Content contentPadding={SETTING_PAGE_CONTENT_PADDING}>
<Setting.Root
breadcrumbItems={[
{ label: "Home", link: "/" },
{ label: "Settings" },
]}
>
<UserSidebar />
<UserAPITokenTab
router={router}
accessToken={accessToken.isSuccess ? accessToken.data : null}
enableQuery={accessToken.isSuccess}
/>
<UserAPITokenTab />
</Setting.Root>
</PageBase.Content>
</PageBase.Container>
16 changes: 8 additions & 8 deletions apps/console/src/app/settings/integrations/render.tsx
Original file line number Diff line number Diff line change
@@ -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() {
<PageBase>
<AppTopbar namespaceSwitch={<NamespaceSwitch />} />
<PageBase.Container>
<PageBase.Content contentPadding="p-8">
<div className="mb-[52px] w-full px-20">
<BreadcrumbWithLink
items={[{ label: "Home", link: "/" }, { label: "Settings" }]}
/>
</div>
<Setting.Root>
<PageBase.Content contentPadding={SETTING_PAGE_CONTENT_PADDING}>
<Setting.Root
breadcrumbItems={[
{ label: "Home", link: "/" },
{ label: "Settings" },
]}
>
<UserSidebar />
<UserIntegrationsTab />
</Setting.Root>
28 changes: 10 additions & 18 deletions apps/console/src/app/settings/profile/rendex.tsx
Original file line number Diff line number Diff line change
@@ -1,41 +1,33 @@
"use client";

import { useRouter } from "next/navigation";

import {
AppTopbar,
BreadcrumbWithLink,
NamespaceSwitch,
PageBase,
Setting,
SETTING_PAGE_CONTENT_PADDING,
UserProfileTab,
UserSidebar,
} from "@instill-ai/toolkit";

import { useAppAccessToken } from "~/lib/use-app-access-token";

export function ProfileSettingPageRender() {
const accessToken = useAppAccessToken();

const router = useRouter();
useAppAccessToken();

return (
<PageBase>
<AppTopbar namespaceSwitch={<NamespaceSwitch />} />
<PageBase.Container>
<PageBase.Content contentPadding="p-8">
<div className="mb-[52px] w-full px-20">
<BreadcrumbWithLink
items={[{ label: "Home", link: "/" }, { label: "Settings" }]}
/>
</div>
<Setting.Root>
<PageBase.Content contentPadding={SETTING_PAGE_CONTENT_PADDING}>
<Setting.Root
breadcrumbItems={[
{ label: "Home", link: "/" },
{ label: "Settings" },
]}
>
<UserSidebar />
<UserProfileTab
router={router}
accessToken={accessToken.isSuccess ? accessToken.data : null}
enableQuery={accessToken.isSuccess}
/>
<UserProfileTab />
</Setting.Root>
</PageBase.Content>
</PageBase.Container>
16 changes: 8 additions & 8 deletions apps/console/src/app/settings/secrets/render.tsx
Original file line number Diff line number Diff line change
@@ -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() {
<PageBase>
<AppTopbar namespaceSwitch={<NamespaceSwitch />} />
<PageBase.Container>
<PageBase.Content contentPadding="p-8">
<div className="mb-[52px] w-full px-20">
<BreadcrumbWithLink
items={[{ label: "Home", link: "/" }, { label: "Settings" }]}
/>
</div>
<Setting.Root>
<PageBase.Content contentPadding={SETTING_PAGE_CONTENT_PADDING}>
<Setting.Root
breadcrumbItems={[
{ label: "Home", link: "/" },
{ label: "Settings" },
]}
>
<UserSidebar />
<UserSecretTab />
</Setting.Root>
2 changes: 2 additions & 0 deletions apps/console/src/styles/global.css
Original file line number Diff line number Diff line change
@@ -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;
2 changes: 1 addition & 1 deletion packages/toolkit/package.json
Original file line number Diff line number Diff line change
@@ -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",
Original file line number Diff line number Diff line change
@@ -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 (
<div className="mb-4 flex items-center gap-x-2 text-sm">
<div className={cn("mb-4 flex items-center gap-x-2 text-sm", className)}>
{activeLink.map((item) => (
<React.Fragment key={item.link}>
{item.link ? (
1 change: 1 addition & 0 deletions packages/toolkit/src/constant/index.ts
Original file line number Diff line number Diff line change
@@ -5,3 +5,4 @@ export * from "./integration";
export * from "./model";
export * from "./resourceIdPrefix";
export * from "./react-query";
export * from "./ui";
1 change: 1 addition & 0 deletions packages/toolkit/src/constant/ui.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export const SETTING_PAGE_CONTENT_PADDING = "p-8";
19 changes: 17 additions & 2 deletions packages/toolkit/src/view/settings/SettingRoot.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,20 @@
"use client";

export const SettingRoot = ({ children }: { children: React.ReactNode }) => {
return <div className="flex flex-row gap-x-6 px-20">{children}</div>;
import { BreadcrumbWithLink, BreadcrumbWithLinkProps } from "../../components";

export const SettingRoot = ({
children,
breadcrumbItems,
}: {
children: React.ReactNode;
breadcrumbItems: BreadcrumbWithLinkProps["items"];
}) => {
return (
<div className="flex flex-col px-20">
<div className="mb-8 w-full">
<BreadcrumbWithLink className="mb-0" items={breadcrumbItems} />
</div>
<div className="flex flex-row gap-x-6">{children}</div>
</div>
);
};
21 changes: 20 additions & 1 deletion packages/toolkit/src/view/settings/SettingSidebar.tsx
Original file line number Diff line number Diff line change
@@ -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 <div className="flex flex-col gap-y-1">{children}</div>;
const pathname = usePathname();
return (
<div className="flex flex-col h-[calc(100vh-var(--topbar-controller-height)-var(--topbar-nav-height)-var(--setting-container-padding-top)-var(--setting-container-padding-bottom))]">
<div className="flex flex-col gap-y-1 mb-auto">{children}</div>
{pathname.includes("integrations") ? (
<LinkButton className="mx-auto" asChild variant="secondary">
<a
target="_blank"
rel="noreferrer noopener"
href="https://www.instill.tech/privacy"
>
Privacy
</a>
</LinkButton>
) : null}
</div>
);
};

export const SettingSidebarItem = ({
6 changes: 5 additions & 1 deletion packages/toolkit/src/view/settings/SettingTab.tsx
Original file line number Diff line number Diff line change
@@ -5,7 +5,11 @@ import cn from "clsx";
import { Separator } from "@instill-ai/design-system";

export const SettingTabRoot = ({ children }: { children: React.ReactNode }) => {
return <div className="flex w-full flex-col pl-8">{children}</div>;
return (
<div className="flex w-full flex-col pl-8 h-full overflow-y-auto">
{children}
</div>
);
};

export const SettingTabHeader = ({
20 changes: 15 additions & 5 deletions packages/toolkit/src/view/settings/user/UserAPITokenTab.tsx
Original file line number Diff line number Diff line change
@@ -1,24 +1,34 @@
"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,
CreateAPITokenDialog,
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(() => {
20 changes: 15 additions & 5 deletions packages/toolkit/src/view/settings/user/UserAccountTab.tsx
Original file line number Diff line number Diff line change
@@ -1,26 +1,36 @@
"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";

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,
});

18 changes: 13 additions & 5 deletions packages/toolkit/src/view/settings/user/UserProfileTab.tsx
Original file line number Diff line number Diff line change
@@ -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<z.infer<typeof UserProfileTabSchema>>({
Loading