Skip to content

Commit 928d4b5

Browse files
skeptrunedevskeptrunedev
committed
feature: show org+dataset selector on dataset page and change text to make dataset creation more obvious
1 parent 37a8f4e commit 928d4b5

File tree

5 files changed

+111
-47
lines changed

5 files changed

+111
-47
lines changed

‎frontends/dashboard/src/components/DatasetOverview.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -263,14 +263,16 @@ export const DatasetOverview = () => {
263263
</p>
264264
)
265265
) : (
266-
<p class="text-sm text-neutral-700">
267-
This organization does not have any datasets.
266+
<p class="text-sm text-fuchsia-600">
267+
Get started by clicking the button below to create a dataset
268268
</p>
269269
)
270270
}
271271
when={datasets().length > 0}
272272
>
273-
<p class="text-sm text-neutral-700">A list of all the datasets</p>
273+
<p class="text-sm text-neutral-700">
274+
All datasets belonging to this organization
275+
</p>
274276
</Show>
275277
</div>
276278
<div class="flex gap-2">

‎frontends/dashboard/src/components/MultiSelect.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ export function MultiSelect<I extends Item>(props: {
5858
as="div"
5959
>
6060
<div class="relative">
61-
<ListboxButton class="relative min-w-[300px] max-w-[300px] cursor-default rounded-lg bg-white py-2 pl-3 pr-10 text-left outline outline-1 outline-gray-300 focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-magenta-300 disabled:opacity-50 sm:text-sm">
61+
<ListboxButton class="relative min-w-[300px] max-w-[400px] cursor-default rounded-lg bg-white py-2 pl-3 pr-10 text-left outline outline-1 outline-gray-300 focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-magenta-300 disabled:opacity-50 sm:text-sm">
6262
<div class="flex flex-wrap gap-1">
6363
<For
6464
each={selected()}

‎frontends/dashboard/src/layouts/NavbarDatasetSelector.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { FiDatabase } from "solid-icons/fi";
77
export const NavbarDatasetSelector = () => {
88
const userContext = useContext(UserContext);
99
const datasetContext = useContext(DatasetContext);
10+
1011
const datasetIds = createMemo(
1112
() => userContext.orgDatasets()?.map((dataset) => dataset.dataset.id),
1213
);
@@ -18,19 +19,23 @@ export const NavbarDatasetSelector = () => {
1819
if (dataset) {
1920
return dataset.dataset.name;
2021
}
22+
23+
return "Click to Select Dataset";
2124
};
2225

2326
return (
2427
<div>
2528
<Show when={datasetIds()}>
2629
{(datasets) => (
2730
<Select
28-
class="bg-white"
31+
class={`bg-white ${
32+
!datasetContext.datasetId() ? "text-neutral-600" : "text-black"
33+
}`}
2934
onSelected={datasetContext.selectDataset}
3035
display={(id) => id}
3136
displayElement={(id) => (
3237
<div class="flex items-center gap-2">
33-
<FiDatabase class="text-neutral-800" />
38+
<FiDatabase />
3439
<div class="text-sm">{datasetNameFromId(id)}</div>
3540
</div>
3641
)}

‎frontends/dashboard/src/layouts/NavbarOrganizationSelector.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export const NavbarOrganizationSelector = () => {
3838
display={(id) => id}
3939
displayElement={(id) => (
4040
<div class="flex w-full items-center gap-2">
41-
<FiUsers class="text-neutral-800" />{" "}
41+
<FiUsers />{" "}
4242
<div class="w-full text-sm">{organizationNameFromId(id)}</div>
4343
</div>
4444
)}

‎frontends/dashboard/src/layouts/OrganizationLayout.tsx‎

Lines changed: 97 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,20 @@
1-
import { JSX, useContext, Switch, Match, createMemo } from "solid-js";
1+
import {
2+
JSX,
3+
useContext,
4+
Switch,
5+
Match,
6+
createMemo,
7+
Show,
8+
createSignal,
9+
} from "solid-js";
210
import { OrgName } from "../components/OrgName";
311
import { OrgTabs } from "../components/OrgTabs";
412

513
import { UserContext } from "../contexts/UserContext";
14+
import { Portal } from "solid-js/web";
15+
import { NavbarOrganizationSelector } from "./NavbarOrganizationSelector";
16+
import NewDatasetModal from "../components/NewDatasetModal";
17+
import { NavbarDatasetSelector } from "./NavbarDatasetSelector";
618

719
interface DashboardLayoutProps {
820
children?: JSX.Element;
@@ -11,6 +23,14 @@ interface DashboardLayoutProps {
1123
export const OrganizationLayout = (props: DashboardLayoutProps) => {
1224
const userContext = useContext(UserContext);
1325

26+
const [newDatasetModalOpen, setNewDatasetModalOpen] =
27+
createSignal<boolean>(false);
28+
29+
const orgDatasets = createMemo(() => {
30+
const datasets = userContext.orgDatasets?.();
31+
return datasets || [];
32+
});
33+
1434
const currentUserRole = createMemo(() => {
1535
return (
1636
userContext.user().user_orgs.find((val) => {
@@ -20,47 +40,84 @@ export const OrganizationLayout = (props: DashboardLayoutProps) => {
2040
});
2141

2242
return (
23-
<div class="flex grow flex-col bg-neutral-100 text-black">
24-
<Switch>
25-
<Match when={userContext.user().orgs.length === 0}>
26-
<div class="flex flex-1 items-center justify-center overflow-y-auto">
27-
<div class="flex flex-col items-center">
28-
<h1 class="text-3xl">
29-
You are currently not part of any organization
30-
</h1>
31-
<p>Create a new organization using the button in the sidebar.</p>
43+
<>
44+
<Portal mount={document.body}>
45+
<NewDatasetModal
46+
isOpen={newDatasetModalOpen}
47+
closeModal={() => {
48+
setNewDatasetModalOpen(false);
49+
}}
50+
/>
51+
</Portal>
52+
{/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
53+
<Portal mount={document.querySelector("#organization-slot")!}>
54+
<div class="flex flex-row content-center items-center">
55+
<NavbarOrganizationSelector />
56+
<span class="ml-2 font-bold text-neutral-600">/</span>
57+
</div>
58+
</Portal>
59+
{/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
60+
<Portal mount={document.querySelector("#dataset-slot")!}>
61+
<div class="ml-1 flex flex-row">
62+
<Show when={orgDatasets().length > 0}>
63+
<NavbarDatasetSelector />
64+
</Show>
65+
<Show when={orgDatasets().length == 0}>
66+
<button
67+
class="flex content-center items-center rounded bg-magenta-500 px-3 py-1 text-sm font-semibold text-white"
68+
onClick={() => setNewDatasetModalOpen(true)}
69+
>
70+
Create Dataset +
71+
</button>
72+
</Show>
73+
</div>
74+
</Portal>
75+
<div class="flex grow flex-col bg-neutral-100 text-black">
76+
<Switch>
77+
<Match when={userContext.user().orgs.length === 0}>
78+
<div class="flex flex-1 items-center justify-center overflow-y-auto">
79+
<div class="flex flex-col items-center">
80+
<h1 class="text-3xl">
81+
You are currently not part of any organization
82+
</h1>
83+
<p>
84+
Create a new organization using the profile button on the
85+
right side of the navigation bar.
86+
</p>
87+
</div>
3288
</div>
33-
</div>
34-
</Match>
35-
<Match when={currentUserRole() < 1}>
36-
<div class="mt-4 flex h-full w-full items-center justify-center overflow-y-auto">
37-
<div class="text-center">
38-
<h1 class="text-3xl font-semibold text-neutral-800">
39-
You do not have access to this page
40-
</h1>
41-
<p class="mt-4 max-w-screen-2xl px-4 text-neutral-700">
42-
You must be an admin or owner to access this page. If you
43-
believe this is an error, please contact one of your
44-
organization's users with a role of admin or owner and ask them
45-
to grant you access.
46-
</p>
89+
</Match>
90+
<Match when={currentUserRole() < 1}>
91+
<div class="mt-4 flex h-full w-full items-center justify-center overflow-y-auto">
92+
<div class="text-center">
93+
<h1 class="text-3xl font-semibold text-neutral-800">
94+
You do not have access to this page
95+
</h1>
96+
<p class="mt-4 max-w-screen-2xl px-4 text-neutral-700">
97+
You must be an admin or owner to access this page. If you
98+
believe this is an error, please contact one of your
99+
organization's users with a role of admin or owner and ask
100+
them to grant you access.
101+
</p>
102+
</div>
47103
</div>
48-
</div>
49-
</Match>
50-
<Match
51-
when={
52-
currentUserRole() >= 1 && (userContext.user().orgs.length ?? 0) > 0
53-
}
54-
>
55-
<div class="w-full overflow-y-auto px-8">
56-
<div class="mb-2 mt-6 flex flex-col space-y-3 border-b">
57-
<OrgName />
58-
<OrgTabs />
104+
</Match>
105+
<Match
106+
when={
107+
currentUserRole() >= 1 &&
108+
(userContext.user().orgs.length ?? 0) > 0
109+
}
110+
>
111+
<div class="w-full overflow-y-auto px-8">
112+
<div class="mb-2 mt-6 flex flex-col space-y-3 border-b">
113+
<OrgName />
114+
<OrgTabs />
115+
</div>
116+
<div>{props.children}</div>
59117
</div>
60-
<div>{props.children}</div>
61-
</div>
62-
</Match>
63-
</Switch>
64-
</div>
118+
</Match>
119+
</Switch>
120+
</div>
121+
</>
65122
);
66123
};

0 commit comments

Comments
 (0)