Skip to content

Commit 3a20ccb

Browse files
Shreyag02Shreyag02
authored
fix(admin): Admin org design fixes (#1799)
1 parent 98a7873 commit 3a20ccb

33 files changed

Lines changed: 432 additions & 152 deletions

‎web/sdk/admin/assets/icons/BanknotesIcon.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import type { SVGProps } from "react";
2+
3+
/*
4+
* Heroicons "banknotes" (24px outline), redrawn on the 16 grid the other icons use.
5+
* - Stroke is 1, not the 1.5 of the upstream icon: stroke width is relative to
6+
* the viewBox, so scaling 24 -> 16 has to scale the stroke too. Leaving it at
7+
* 1.5 renders 1.5x too heavy, which shows badly at the 68px empty-state size.
8+
*/
9+
export function BanknotesIcon(props: SVGProps<SVGSVGElement>) {
10+
return (
11+
<svg
12+
xmlns="http://www.w3.org/2000/svg"
13+
width="16"
14+
height="16"
15+
viewBox="0 0 16 16"
16+
fill="none"
17+
{...props}
18+
>
19+
<path
20+
d="M1.5 12.5C5.1448 12.5 8.6757 12.9875 12.0312 13.9008C12.5159 14.0327 13 13.6724 13 13.1701V12.5M2.5 3V3.5C2.5 3.7761 2.2761 4 2 4H1.5M1.5 4V3.75C1.5 3.3358 1.8358 3 2.25 3H13.5M1.5 4V10M13.5 3V3.5C13.5 3.7761 13.7239 4 14 4H14.5M13.5 3H13.75C14.1642 3 14.5 3.3358 14.5 3.75V10.25C14.5 10.6642 14.1642 11 13.75 11H13.5M14.5 10H14C13.7239 10 13.5 10.2239 13.5 10.5V11M13.5 11H2.5M2.5 11H2.25C1.8358 11 1.5 10.6642 1.5 10.25V10M2.5 11V10.5C2.5 10.2239 2.2761 10 2 10H1.5M10 7C10 8.1046 9.1046 9 8 9C6.8954 9 6 8.1046 6 7C6 5.8954 6.8954 5 8 5C9.1046 5 10 5.8954 10 7ZM12 7H12.005V7.005H12V7ZM4 7H4.005V7.005H4V7Z"
21+
stroke="currentColor"
22+
strokeWidth="1"
23+
strokeLinecap="round"
24+
strokeLinejoin="round"
25+
/>
26+
</svg>
27+
);
28+
}

‎web/sdk/admin/assets/icons/ProjectsIcon.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import type { SVGProps } from "react";
2+
3+
/*
4+
* Filled tray icon for the project zero/empty states, exported from the design.
5+
* - Keeps the 40-unit grid it was drawn on: EmptyState stretches the svg to
6+
* fill its container, so the viewBox is what matters, not the dimensions.
7+
* - Uses currentColor so the container's color drives it.
8+
*/
9+
export function ProjectsIcon(props: SVGProps<SVGSVGElement>) {
10+
return (
11+
<svg
12+
xmlns="http://www.w3.org/2000/svg"
13+
width="40"
14+
height="40"
15+
viewBox="0 0 40 40"
16+
fill="none"
17+
{...props}
18+
>
19+
<path
20+
fillRule="evenodd"
21+
clipRule="evenodd"
22+
d="M2.5 16.3872V19.375C2.5 21.1009 3.89911 22.5 5.625 22.5H34.375C36.1009 22.5 37.5 21.1009 37.5 19.375V16.3872C37.5 15.1937 37.073 14.0395 36.2963 13.1333L30.8215 6.74604C29.8716 5.63781 28.4849 5 27.0252 5H12.9748C11.5151 5 10.1284 5.63781 9.17847 6.74604L3.70372 13.1333C2.92696 14.0395 2.5 15.1937 2.5 16.3872ZM12.9748 7.5C12.2449 7.5 11.5516 7.81891 11.0766 8.37302L6.46778 13.75H11.7431C13.4148 13.75 14.976 14.5855 15.9033 15.9765L16.1768 16.3868C16.6405 17.0822 17.4211 17.5 18.2569 17.5H21.7431C22.5789 17.5 23.3595 17.0822 23.8232 16.3868L24.0967 15.9765C25.024 14.5855 26.5852 13.75 28.2569 13.75H33.5322L28.9234 8.37302C28.4484 7.81891 27.7551 7.5 27.0252 7.5H12.9748Z"
23+
fill="currentColor"
24+
/>
25+
<path
26+
d="M4.6875 25C3.47938 25 2.5 25.9794 2.5 27.1875V30C2.5 32.7614 4.73858 35 7.5 35H32.5C35.2614 35 37.5 32.7614 37.5 30V27.1875C37.5 25.9794 36.5206 25 35.3125 25H28.2569C26.5852 25 25.024 25.8355 24.0967 27.2265L23.8232 27.6368C23.3595 28.3322 22.5789 28.75 21.7431 28.75H18.2569C17.4211 28.75 16.6405 28.3322 16.1768 27.6367L15.9033 27.2265C14.976 25.8355 13.4148 25 11.7431 25H4.6875Z"
27+
fill="currentColor"
28+
/>
29+
</svg>
30+
);
31+
}

web/sdk/admin/views/users/details/layout/navbar.module.css renamed to web/sdk/admin/components/navbar.module.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
display: flex;
66
align-items: center;
77
justify-content: space-between;
8+
height: var(--rs-space-11);
89
}
910

1011
.nav-chip {

‎web/sdk/admin/views/audit-logs/audit-logs.module.css‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,3 @@
1-
.navbar {
2-
padding: var(--rs-space-4) var(--rs-space-7);
3-
border-bottom: 0.5px solid var(--rs-color-border-base-primary);
4-
background: var(--rs-color-background-base-primary);
5-
display: flex;
6-
align-items: center;
7-
justify-content: space-between;
8-
min-height: var(--rs-space-12);
9-
}
10-
111
.table {
122
height: auto;
133
}

‎web/sdk/admin/views/audit-logs/navbar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { DataTable, Flex, Text, IconButton, Spinner } from "@raystack/apsara";
22
import { CpuChipIcon } from "../../assets/icons/CpuChipIcon";
3-
import styles from "./audit-logs.module.css";
3+
import styles from "../../components/navbar.module.css";
44
import { DownloadIcon, MagnifyingGlassIcon } from "@radix-ui/react-icons";
55
import React, { useCallback, useState } from "react";
66
import { useQueryClient } from "@tanstack/react-query";

‎web/sdk/admin/views/invoices/invoices.module.css‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,3 @@
1-
.navbar {
2-
padding: var(--rs-space-4) var(--rs-space-7);
3-
border-bottom: 0.5px solid var(--rs-color-border-base-primary);
4-
background: var(--rs-color-background-base-primary);
5-
display: flex;
6-
align-items: center;
7-
justify-content: space-between;
8-
min-height: var(--rs-space-12);
9-
}
10-
111
.table {
122
height: auto;
133
}

‎web/sdk/admin/views/invoices/navbar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { DataTable, Flex, IconButton, Text } from "@raystack/apsara";
2-
import styles from "./invoices.module.css";
2+
import styles from "../../components/navbar.module.css";
33
import { InvoicesIcon } from "../../assets/icons/InvoicesIcon";
44
import { FocusEvent, useState } from "react";
55
import { MagnifyingGlassIcon } from "@radix-ui/react-icons";

‎web/sdk/admin/views/organizations/details/apis/apis.module.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@
77
text-wrap: auto;
88
}
99

10+
.zero-state-container {
11+
padding: var(--rs-space-17) var(--rs-space-10) var(--rs-space-10);
12+
}
13+
1014
.table {
1115
width: 100%;
1216
table-layout: fixed;

‎web/sdk/admin/views/organizations/details/apis/index.tsx‎

Lines changed: 34 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import { DataTable, EmptyState, Flex } from "@raystack/apsara";
22
import type { DataTableQuery, DataTableSort } from "@raystack/apsara";
33
import styles from "./apis.module.css";
4-
import { InfoCircledIcon, ExclamationTriangleIcon } from "@radix-ui/react-icons";
4+
import {
5+
CodeIcon,
6+
ExclamationTriangleIcon,
7+
} from "@radix-ui/react-icons";
58
import { useCallback, useContext, useEffect, useMemo, useState } from "react";
69
import { OrganizationContext } from "../contexts/organization-context";
7-
import { PageTitle } from "../../../../components/PageTitle";
10+
import { PageTitle } from "~/admin/components/PageTitle";
811
import { getColumns } from "./columns";
912
import { ServiceUserDetailsDialog } from "./details-dialog";
1013
import { useInfiniteQuery } from "@connectrpc/connect-query";
@@ -19,7 +22,7 @@ import {
1922
} from "~/utils/connect-pagination";
2023
import { transformDataTableQueryToRQLRequest } from "~/utils/transform-query";
2124
import { useDebouncedValue } from "~hooks";
22-
import { useTerminology } from "../../../../hooks/useTerminology";
25+
import { useTerminology } from "~/admin/hooks/useTerminology";
2326

2427
const NoCredentials = () => {
2528
return (
@@ -28,14 +31,26 @@ const NoCredentials = () => {
2831
container: styles["empty-state"],
2932
subHeading: styles["empty-state-subheading"],
3033
}}
31-
heading="No API Credentials found"
32-
subHeading="We couldn't find any matches for that keyword or filter. Try alternative terms or check for typos."
33-
// TODO: update icon with raystack icon
34-
icon={<InfoCircledIcon />}
34+
heading="No service account found"
35+
subHeading="We couldn't find any matches for that keyword. Try alternative terms or check for typos."
36+
icon={<CodeIcon />}
3537
/>
3638
);
3739
};
3840

41+
const ZeroState = () => {
42+
return (
43+
<div className={styles["zero-state-container"]}>
44+
<EmptyState
45+
variant="empty2"
46+
icon={<CodeIcon />}
47+
heading="API"
48+
subHeading="An API is a set of protocols that enables Aurora to interact with other applications. It defines request and response structures, allowing seamless data exchange and integration."
49+
/>
50+
</div>
51+
);
52+
};
53+
3954
const ErrorState = () => {
4055
return (
4156
<EmptyState
@@ -83,6 +98,7 @@ export function OrganizationApisView() {
8398

8499
const query = useDebouncedValue(computedQuery, 200);
85100

101+
86102
const [selectedServiceUser, setSelectedServiceUser] =
87103
useState<SearchOrganizationServiceUsersResponse_OrganizationServiceUser | null>(
88104
null,
@@ -143,6 +159,16 @@ export function OrganizationApisView() {
143159

144160
const loading = isLoading || isFetchingNextPage;
145161

162+
/*
163+
* DataTable seeds its query once at mount, so it never sees the org-context
164+
* search. Hence picking the state here instead of via the zeroState prop.
165+
*/
166+
const hasActiveQuery = Boolean(
167+
searchQuery?.trim() || tableQuery.filters?.length,
168+
);
169+
const showZeroState =
170+
!isLoading && !isError && !hasActiveQuery && data.length === 0;
171+
146172
const onDialogClose = useCallback(() => {
147173
setSelectedServiceUser(null);
148174
}, []);
@@ -190,7 +216,7 @@ export function OrganizationApisView() {
190216
<Flex direction="column" style={{ width: "100%" }}>
191217
<DataTable.Toolbar />
192218
<DataTable.Content
193-
emptyState={isError ? <ErrorState /> : <NoCredentials />}
219+
emptyState={showZeroState ? <ZeroState /> : isError ? <ErrorState /> : <NoCredentials />}
194220
classNames={{
195221
root: styles["table-wrapper"],
196222
table: styles["table"],

‎web/sdk/admin/views/organizations/details/invoices/columns.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,12 @@ export const getColumns = ({
7575
cell: ({ getValue }) => {
7676
const value = getValue() as string;
7777
return (
78-
<Link href={value} target="_blank" data-test-id="invoice-link">
78+
<Link
79+
href={value}
80+
target="_blank"
81+
className={styles["invoice-link"]}
82+
data-test-id="invoice-link"
83+
>
7984
View Invoice
8085
</Link>
8186
);

0 commit comments

Comments
 (0)