Skip to content

Commit 66ea989

Browse files
airsliceairslice
authored
feat(web): add warning banner on dashboard page [VIZ-2278] (#1831)
1 parent 372e77c commit 66ea989

File tree

8 files changed

+78
-11
lines changed

8 files changed

+78
-11
lines changed

‎web/src/app/features/Dashboard/ContentsContainer/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@ const ContentsContainer: FC<ContainerProps> = ({
2929
const Wrapper = styled("div")(({ theme }) => ({
3030
flex: 1,
3131
background: theme.bg[0],
32-
minWidth: 760
32+
minWidth: 760,
33+
minHeight: 0
3334
}));
3435

3536
export default ContentsContainer;

‎web/src/app/features/Dashboard/index.tsx‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { DEFAULT_SIDEBAR_WIDTH } from "@reearth/app/ui/components/Sidebar";
2+
import WarningBanner from "@reearth/ee/features/WarningBanner";
23
import { useLang, useT } from "@reearth/services/i18n";
34
import { styled } from "@reearth/services/theme";
45
import { FC, useMemo } from "react";
@@ -88,12 +89,15 @@ const Dashboard: FC<DashboardProps> = ({ workspaceId }) => {
8889
data-testid="dashboard-left-side-panel"
8990
/>
9091
</LeftSideWrapper>
91-
<ContentsContainer
92-
tab={currentTab}
93-
workspaceId={workspaceId}
94-
currentWorkspace={currentWorkspace}
95-
data-testid="dashboard-contents-container"
96-
/>
92+
<RightSideWrapper data-testid="dashboard-right-side-wrapper">
93+
<WarningBanner workspaceId={workspaceId} />
94+
<ContentsContainer
95+
tab={currentTab}
96+
workspaceId={workspaceId}
97+
currentWorkspace={currentWorkspace}
98+
data-testid="dashboard-contents-container"
99+
/>
100+
</RightSideWrapper>
97101
<CursorStatus data-testid="dashboard-cursor-status" />
98102
</Wrapper>
99103
<AddWorkspaceModal data-testid="dashboard-add-workspace-modal" />
@@ -124,3 +128,10 @@ const LeftSideWrapper = styled("div")(({ theme }) => ({
124128
gap: theme.spacing.super,
125129
boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.50)"
126130
}));
131+
132+
const RightSideWrapper = styled("div")({
133+
display: "flex",
134+
flexDirection: "column",
135+
flex: 1,
136+
minWidth: 0
137+
});

‎web/src/ee/features/WarningBanner/index.tsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { Typography } from "@reearth/app/lib/reearth-ui";
2+
import { useWorkspacePolicyCheck } from "@reearth/services/api/workspace";
3+
import { useT } from "@reearth/services/i18n";
4+
import { styled } from "@reearth/services/theme";
5+
import { FC, useMemo } from "react";
6+
7+
type WarningBannerProps = {
8+
workspaceId?: string;
9+
};
10+
11+
const WarningBanner: FC<WarningBannerProps> = ({ workspaceId }) => {
12+
const policyCheckResult = useWorkspacePolicyCheck(workspaceId ?? "");
13+
const t = useT();
14+
15+
const info = useMemo(() => {
16+
if (
17+
policyCheckResult?.workspacePolicyCheck?.disableOperationByOverUsedSeat
18+
) {
19+
return {
20+
title: t("Member Limit Exceeded"),
21+
message: t(
22+
"This workspace has exceeded the member limit for its current plan. Editing is temporarily disabled for all members. Please ask the workspace owner to remove extra members or upgrade the plan to restore access."
23+
)
24+
};
25+
}
26+
27+
return null;
28+
}, [policyCheckResult, t]);
29+
30+
return info ? (
31+
<Wrapper>
32+
<Typography size="body" weight="bold">
33+
{info.title}
34+
</Typography>
35+
<Typography size="body">{info.message}</Typography>
36+
</Wrapper>
37+
) : null;
38+
};
39+
40+
export default WarningBanner;
41+
42+
const Wrapper = styled("div")(({ theme }) => ({
43+
background: theme.dangerous.main,
44+
color: theme.content.main,
45+
padding: `${theme.spacing.small}px ${theme.spacing.normal}px`,
46+
display: "flex",
47+
flexDirection: "column",
48+
gap: theme.spacing.smallest
49+
}));

‎web/src/services/gql/__gen__/gql.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ const documents = {
9696
"\n mutation AddMemberToWorkspace($workspaceId: ID!, $userId: ID!, $role: Role!) {\n addMemberToWorkspace(input: { workspaceId: $workspaceId, userId: $userId, role: $role }) {\n workspace {\n id\n name\n members {\n user {\n id\n name\n email\n }\n userId\n role\n }\n personal\n policyId\n policy {\n id\n name\n projectCount\n memberCount\n publishedProjectCount\n layerCount\n assetStorageSize\n }\n }\n }\n }\n": types.AddMemberToWorkspaceDocument,
9797
"\n mutation RemoveMemberFromWorkspace($workspaceId: ID!, $userId: ID!) {\n removeMemberFromWorkspace(input: { workspaceId: $workspaceId, userId: $userId }) {\n workspace {\n id\n name\n members {\n user {\n id\n name\n email\n }\n userId\n role\n }\n personal\n policyId\n policy {\n id\n name\n projectCount\n memberCount\n publishedProjectCount\n layerCount\n assetStorageSize\n }\n }\n }\n }\n": types.RemoveMemberFromWorkspaceDocument,
9898
"\n mutation UpdateMemberOfWorkspace($workspaceId: ID!, $userId: ID!, $role: Role!) {\n updateMemberOfWorkspace(\n input: { workspaceId: $workspaceId, userId: $userId, role: $role }\n ) {\n workspace {\n id\n name\n members {\n user {\n id\n name\n email\n }\n userId\n role\n }\n personal\n policyId\n policy {\n id\n name\n projectCount\n memberCount\n publishedProjectCount\n layerCount\n assetStorageSize\n }\n }\n }\n }\n": types.UpdateMemberOfWorkspaceDocument,
99-
"\n query WorkspacePolicyCheck($workspaceId: ID!) {\n workspacePolicyCheck(input: { workspaceId: $workspaceId }) {\n workspaceId\n enableToCreatePrivateProject\n }\n }\n": types.WorkspacePolicyCheckDocument,
99+
"\n query WorkspacePolicyCheck($workspaceId: ID!) {\n workspacePolicyCheck(input: { workspaceId: $workspaceId }) {\n workspaceId\n enableToCreatePrivateProject\n disableOperationByOverUsedSeat\n }\n }\n": types.WorkspacePolicyCheckDocument,
100100
};
101101

102102
/**
@@ -448,7 +448,7 @@ export function gql(source: "\n mutation UpdateMemberOfWorkspace($workspaceId:
448448
/**
449449
* The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
450450
*/
451-
export function gql(source: "\n query WorkspacePolicyCheck($workspaceId: ID!) {\n workspacePolicyCheck(input: { workspaceId: $workspaceId }) {\n workspaceId\n enableToCreatePrivateProject\n }\n }\n"): (typeof documents)["\n query WorkspacePolicyCheck($workspaceId: ID!) {\n workspacePolicyCheck(input: { workspaceId: $workspaceId }) {\n workspaceId\n enableToCreatePrivateProject\n }\n }\n"];
451+
export function gql(source: "\n query WorkspacePolicyCheck($workspaceId: ID!) {\n workspacePolicyCheck(input: { workspaceId: $workspaceId }) {\n workspaceId\n enableToCreatePrivateProject\n disableOperationByOverUsedSeat\n }\n }\n"): (typeof documents)["\n query WorkspacePolicyCheck($workspaceId: ID!) {\n workspacePolicyCheck(input: { workspaceId: $workspaceId }) {\n workspaceId\n enableToCreatePrivateProject\n disableOperationByOverUsedSeat\n }\n }\n"];
452452

453453
export function gql(source: string) {
454454
return (documents as any)[source] ?? {};

0 commit comments

Comments
 (0)