Skip to content

Commit 7453b0d

Browse files
mustard-mhmustard-mh
committed
[dashboard] fix onboarding modal show with workspaces exists
1 parent cc893be commit 7453b0d

File tree

1 file changed

+126
-117
lines changed

1 file changed

+126
-117
lines changed

‎components/dashboard/src/workspaces/Workspaces.tsx

Lines changed: 126 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,8 @@ export default function () {
3535
const [activeWorkspaces, setActiveWorkspaces] = useState<WorkspaceInfo[]>([]);
3636
const [inactiveWorkspaces, setInactiveWorkspaces] = useState<WorkspaceInfo[]>([]);
3737
const [workspaceModel, setWorkspaceModel] = useState<WorkspaceModel>();
38-
const { setIsStartWorkspaceModalVisible } = useContext(StartWorkspaceModalContext);
38+
const [hasWorkspaces, setHasWorkspaces] = useState(false);
39+
const { setIsStartWorkspaceModalVisible, isStartWorkspaceModalVisible } = useContext(StartWorkspaceModalContext);
3940

4041
useEffect(() => {
4142
(async () => {
@@ -44,139 +45,147 @@ export default function () {
4445
})();
4546
}, [teams, location]);
4647

48+
useEffect(() => {
49+
setHasWorkspaces(!!activeWorkspaces.length || !!inactiveWorkspaces.length);
50+
}, [activeWorkspaces, inactiveWorkspaces]);
51+
4752
const isOnboardingUser = user && User.isOnboardingUser(user);
4853

4954
return (
5055
<>
5156
<Header title="Workspaces" subtitle="Manage recent and stopped workspaces." />
5257

53-
{isOnboardingUser && <SelectIDEModal />}
54-
55-
{workspaceModel?.initialized &&
56-
(activeWorkspaces.length > 0 || inactiveWorkspaces.length > 0 || workspaceModel.searchTerm ? (
57-
<>
58-
<div className="app-container py-2 flex">
59-
<div className="flex">
60-
<div className="py-4">
61-
<svg
62-
xmlns="http://www.w3.org/2000/svg"
63-
fill="none"
64-
viewBox="0 0 16 16"
65-
width="16"
66-
height="16"
67-
>
68-
<path
69-
fill="#A8A29E"
70-
d="M6 2a4 4 0 100 8 4 4 0 000-8zM0 6a6 6 0 1110.89 3.477l4.817 4.816a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 010 6z"
71-
/>
72-
</svg>
58+
{workspaceModel?.initialized && (
59+
<>
60+
{isOnboardingUser && !hasWorkspaces && !isStartWorkspaceModalVisible && <SelectIDEModal />}
61+
{hasWorkspaces || workspaceModel?.searchTerm ? (
62+
<>
63+
<div className="app-container py-2 flex">
64+
<div className="flex">
65+
<div className="py-4">
66+
<svg
67+
xmlns="http://www.w3.org/2000/svg"
68+
fill="none"
69+
viewBox="0 0 16 16"
70+
width="16"
71+
height="16"
72+
>
73+
<path
74+
fill="#A8A29E"
75+
d="M6 2a4 4 0 100 8 4 4 0 000-8zM0 6a6 6 0 1110.89 3.477l4.817 4.816a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 010 6z"
76+
/>
77+
</svg>
78+
</div>
79+
<input
80+
type="search"
81+
className="text-sm"
82+
placeholder="Search Workspaces"
83+
onChange={(v) => {
84+
if (workspaceModel) workspaceModel.setSearch(v.target.value);
85+
}}
86+
/>
7387
</div>
74-
<input
75-
type="search"
76-
className="text-sm"
77-
placeholder="Search Workspaces"
78-
onChange={(v) => {
79-
if (workspaceModel) workspaceModel.setSearch(v.target.value);
80-
}}
81-
/>
82-
</div>
83-
<div className="flex-1" />
84-
<div className="py-3"></div>
85-
<div className="py-3 pl-3">
86-
<DropDown
87-
prefix="Limit: "
88-
contextMenuWidth="w-32"
89-
activeEntry={workspaceModel ? workspaceModel?.limit + "" : undefined}
90-
entries={[
91-
{
92-
title: "50",
93-
onClick: () => {
94-
if (workspaceModel) workspaceModel.limit = 50;
88+
<div className="flex-1" />
89+
<div className="py-3"></div>
90+
<div className="py-3 pl-3">
91+
<DropDown
92+
prefix="Limit: "
93+
contextMenuWidth="w-32"
94+
activeEntry={workspaceModel ? workspaceModel?.limit + "" : undefined}
95+
entries={[
96+
{
97+
title: "50",
98+
onClick: () => {
99+
if (workspaceModel) workspaceModel.limit = 50;
100+
},
95101
},
96-
},
97-
{
98-
title: "100",
99-
onClick: () => {
100-
if (workspaceModel) workspaceModel.limit = 100;
102+
{
103+
title: "100",
104+
onClick: () => {
105+
if (workspaceModel) workspaceModel.limit = 100;
106+
},
101107
},
102-
},
103-
{
104-
title: "200",
105-
onClick: () => {
106-
if (workspaceModel) workspaceModel.limit = 200;
108+
{
109+
title: "200",
110+
onClick: () => {
111+
if (workspaceModel) workspaceModel.limit = 200;
112+
},
107113
},
108-
},
109-
]}
110-
/>
111-
</div>
112-
<button onClick={() => setIsStartWorkspaceModalVisible(true)} className="ml-2">
113-
New Workspace{" "}
114-
<span className="opacity-60 hidden md:inline">{StartWorkspaceModalKeyBinding}</span>
115-
</button>
116-
</div>
117-
<ItemsList className="app-container pb-40">
118-
<div className="border-t border-gray-200 dark:border-gray-800"></div>
119-
{activeWorkspaces.map((e) => {
120-
return (
121-
<WorkspaceEntry
122-
key={e.workspace.id}
123-
desc={e}
124-
model={workspaceModel}
125-
stopWorkspace={(wsId) => getGitpodService().server.stopWorkspace(wsId)}
114+
]}
126115
/>
127-
);
128-
})}
129-
{activeWorkspaces.length > 0 && <div className="py-6"></div>}
130-
{inactiveWorkspaces.length > 0 && (
131-
<div className="p-3 text-gray-400 bg-gray-50 dark:bg-gray-800 rounded-xl text-sm text-center">
132-
Unpinned workspaces that have been inactive for more than 14 days will be
133-
automatically deleted.{" "}
134-
<a
135-
className="gp-link"
136-
href="https://www.gitpod.io/docs/life-of-workspace/#garbage-collection"
137-
>
138-
Learn more
139-
</a>
140116
</div>
141-
)}
142-
{inactiveWorkspaces.map((e) => {
143-
return (
144-
<WorkspaceEntry
145-
key={e.workspace.id}
146-
desc={e}
147-
model={workspaceModel}
148-
stopWorkspace={(wsId) => getGitpodService().server.stopWorkspace(wsId)}
149-
/>
150-
);
151-
})}
152-
</ItemsList>
153-
</>
154-
) : (
155-
<div className="app-container flex flex-col space-y-2">
156-
<div className="px-6 py-3 flex flex-col text-gray-400 border-t border-gray-200 dark:border-gray-800">
157-
<div className="flex flex-col items-center justify-center h-96 w-96 mx-auto">
158-
<>
159-
<h3 className="text-center pb-3 text-gray-500 dark:text-gray-400">No Workspaces</h3>
160-
<div className="text-center pb-6 text-gray-500">
161-
Prefix any Git repository URL with {window.location.host}/# or create a new
162-
workspace for a recently used project.{" "}
163-
<a className="gp-link" href="https://www.gitpod.io/docs/getting-started/">
117+
<button onClick={() => setIsStartWorkspaceModalVisible(true)} className="ml-2">
118+
New Workspace{" "}
119+
<span className="opacity-60 hidden md:inline">{StartWorkspaceModalKeyBinding}</span>
120+
</button>
121+
</div>
122+
<ItemsList className="app-container pb-40">
123+
<div className="border-t border-gray-200 dark:border-gray-800"></div>
124+
{activeWorkspaces.map((e) => {
125+
return (
126+
<WorkspaceEntry
127+
key={e.workspace.id}
128+
desc={e}
129+
model={workspaceModel}
130+
stopWorkspace={(wsId) => getGitpodService().server.stopWorkspace(wsId)}
131+
/>
132+
);
133+
})}
134+
{activeWorkspaces.length > 0 && <div className="py-6"></div>}
135+
{inactiveWorkspaces.length > 0 && (
136+
<div className="p-3 text-gray-400 bg-gray-50 dark:bg-gray-800 rounded-xl text-sm text-center">
137+
Unpinned workspaces that have been inactive for more than 14 days will be
138+
automatically deleted.{" "}
139+
<a
140+
className="gp-link"
141+
href="https://www.gitpod.io/docs/life-of-workspace/#garbage-collection"
142+
>
164143
Learn more
165144
</a>
166145
</div>
167-
<span>
168-
<button onClick={() => setIsStartWorkspaceModalVisible(true)}>
169-
New Workspace{" "}
170-
<span className="opacity-60 hidden md:inline">
171-
{StartWorkspaceModalKeyBinding}
172-
</span>
173-
</button>
174-
</span>
175-
</>
146+
)}
147+
{inactiveWorkspaces.map((e) => {
148+
return (
149+
<WorkspaceEntry
150+
key={e.workspace.id}
151+
desc={e}
152+
model={workspaceModel}
153+
stopWorkspace={(wsId) => getGitpodService().server.stopWorkspace(wsId)}
154+
/>
155+
);
156+
})}
157+
</ItemsList>
158+
</>
159+
) : (
160+
<div className="app-container flex flex-col space-y-2">
161+
<div className="px-6 py-3 flex flex-col text-gray-400 border-t border-gray-200 dark:border-gray-800">
162+
<div className="flex flex-col items-center justify-center h-96 w-96 mx-auto">
163+
<>
164+
<h3 className="text-center pb-3 text-gray-500 dark:text-gray-400">
165+
No Workspaces
166+
</h3>
167+
<div className="text-center pb-6 text-gray-500">
168+
Prefix any Git repository URL with {window.location.host}/# or create a new
169+
workspace for a recently used project.{" "}
170+
<a className="gp-link" href="https://www.gitpod.io/docs/getting-started/">
171+
Learn more
172+
</a>
173+
</div>
174+
<span>
175+
<button onClick={() => setIsStartWorkspaceModalVisible(true)}>
176+
New Workspace{" "}
177+
<span className="opacity-60 hidden md:inline">
178+
{StartWorkspaceModalKeyBinding}
179+
</span>
180+
</button>
181+
</span>
182+
</>
183+
</div>
176184
</div>
177185
</div>
178-
</div>
179-
))}
186+
)}
187+
</>
188+
)}
180189
</>
181190
);
182191
}

0 commit comments

Comments
 (0)