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>>({

Unchanged files with check annotations Beta

return downloadURLResponse;
},
[],

Check warning on line 59 in packages/toolkit/src/lib/react-query-service/artifact/useUploadAndGetDownloadNamespaceObjectURL.ts

GitHub Actions / unit-test

React Hook React.useCallback has missing dependencies: 'getNamespaceObjectDownloadURL', 'getNamespaceObjectUploadURL', and 'uploadNamespaceObject'. Either include them or remove the dependency array
);
return callback;
const collapsibleDefaultOpen = options?.collapsibleDefaultOpen ?? false;
const supportInstillCredit = options?.supportInstillCredit ?? false;
const updateSupportInstillCredit = options?.updateSupportInstillCredit;
const forceCloseCollapsibleFormGroups =

Check warning on line 60 in packages/toolkit/src/lib/use-instill-form/useInstillForm.tsx

GitHub Actions / unit-test

The 'forceCloseCollapsibleFormGroups' logical expression could make the dependencies of useMemo Hook (at line 184) change on every render. Move it inside the useMemo callback. Alternatively, wrap the initialization of 'forceCloseCollapsibleFormGroups' in its own useMemo() Hook
options?.forceCloseCollapsibleFormGroups ?? [];
const updateForceCloseCollapsibleFormGroups =
options?.updateForceCloseCollapsibleFormGroups;
const forceOpenCollapsibleFormGroups =

Check warning on line 64 in packages/toolkit/src/lib/use-instill-form/useInstillForm.tsx

GitHub Actions / unit-test

The 'forceOpenCollapsibleFormGroups' logical expression could make the dependencies of useMemo Hook (at line 184) change on every render. Move it inside the useMemo callback. Alternatively, wrap the initialization of 'forceOpenCollapsibleFormGroups' in its own useMemo() Hook
options?.forceOpenCollapsibleFormGroups ?? [];
const updateForceOpenCollapsibleFormGroups =
options?.updateForceOpenCollapsibleFormGroups;
clearInterval(interval);
}
};
}, [isProcessing, namespaceCatalogChunks.refetch]);

Check warning on line 75 in packages/toolkit/src/view/catalog/components/FileChunks.tsx

GitHub Actions / unit-test

React Hook React.useEffect has a missing dependency: 'namespaceCatalogChunks'. Either include it or remove the dependency array
return (
<div className="mb-4">
clearInterval(interval);
}
};
}, [files, namespaceCatalogFiles.refetch]);

Check warning on line 122 in packages/toolkit/src/view/catalog/components/tabs/ChunkTab.tsx

GitHub Actions / unit-test

React Hook React.useEffect has a missing dependency: 'namespaceCatalogFiles'. Either include it or remove the dependency array
return (
<div className="flex-col">
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, [props.command]);

Check warning on line 63 in packages/toolkit/src/view/chat/ToolList.tsx

GitHub Actions / unit-test

React Hook React.useEffect has a missing dependency: 'updateEnableToolSuggestion'. Either include it or remove the dependency array
React.useImperativeHandle(ref, () => ({
onKeyDown: ({ event }) => {
}
return getModelTriggersSummary(modelsChart.data.modelTriggerCounts);
}, [

Check warning on line 234 in packages/toolkit/src/view/dashboard/activity/DashboardActivityPageMainView.tsx

GitHub Actions / unit-test

React Hook React.useMemo has an unnecessary dependency: 'selectedTimeOption'. Either exclude it or remove the dependency array
previousTriggeredModels.isSuccess,
modelsChart.isSuccess,
modelsChart.data?.modelTriggerCounts,
};
}
return { dates: [], values: [] };
}, [creditConsumption.data, costView]);

Check warning on line 110 in packages/toolkit/src/view/dashboard/cost/CostTab.tsx

GitHub Actions / unit-test

React Hook React.useMemo has a missing dependency: 'selectedTimeOption.value'. Either include it or remove the dependency array
const xAxisFormat: "date" | "hour" = React.useMemo(() => {
if (
];
return baseColumns;
}, [orderBy, targetNamespace?.id]);

Check warning on line 241 in packages/toolkit/src/view/dashboard/cost/model/DashboardListModel.tsx

GitHub Actions / unit-test

React Hook React.useMemo has an unnecessary dependency: 'targetNamespace.id'. Either exclude it or remove the dependency array
if (
modelRuns.isSuccess &&
];
return baseColumns;
}, [orderBy, targetNamespace?.id]);

Check warning on line 239 in packages/toolkit/src/view/dashboard/cost/pipeline/DashboardListPipeline.tsx

GitHub Actions / unit-test

React Hook React.useMemo has an unnecessary dependency: 'targetNamespace.id'. Either exclude it or remove the dependency array
if (pipelineRuns.isSuccess && pipelineRuns.data.pipelineRuns.length === 0) {
return (