Skip to content

Commit 11f2147

Browse files
filiptronicekfiliptronicek
committed
Add recommended list to getting started
Tool: gitpod/catfood.gitpod.cloud
1 parent 4394b0f commit 11f2147

File tree

1 file changed

+107
-37
lines changed

1 file changed

+107
-37
lines changed

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

Lines changed: 107 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,9 @@ import { useUpdateCurrentUserMutation } from "../data/current-user/update-mutati
3737
import { useUserLoader } from "../hooks/use-user-loader";
3838
import Tooltip from "../components/Tooltip";
3939
import { useFeatureFlag } from "../data/featureflag-query";
40-
import { useOrgSuggestedRepos } from "../data/organizations/suggested-repositories-query";
40+
import { SuggestedOrgRepository, useOrgSuggestedRepos } from "../data/organizations/suggested-repositories-query";
41+
import { useSuggestedRepositories } from "../data/git-providers/suggested-repositories-query";
42+
import PillLabel from "../components/PillLabel";
4143

4244
export const GETTING_STARTED_DISMISSAL_KEY = "workspace-list-getting-started";
4345

@@ -130,8 +132,26 @@ const WorkspacesPage: FunctionComponent = () => {
130132
}
131133
}, [user?.profile?.coachmarksDismissals]);
132134

135+
const { data: userSuggestedRepos } = useSuggestedRepositories({ excludeConfigurations: false });
133136
const { data: orgSuggestedRepos } = useOrgSuggestedRepos();
134137

138+
const suggestedRepos = useMemo(() => {
139+
const userSuggestions =
140+
userSuggestedRepos
141+
?.filter((repo) => {
142+
const autostartMatch = user?.workspaceAutostartOptions.find((option) => {
143+
return option.cloneUrl.includes(repo.url);
144+
});
145+
return autostartMatch;
146+
})
147+
.slice(0, 3) ?? [];
148+
const orgSuggestions = (orgSuggestedRepos ?? []).filter((repo) => {
149+
return !userSuggestions.find((userSuggestion) => userSuggestion.configurationId === repo.configurationId); // don't show duplicates from user's autostart options
150+
});
151+
152+
return [...userSuggestions, ...orgSuggestions].slice(0, 3);
153+
}, [userSuggestedRepos, user, orgSuggestedRepos]);
154+
135155
const toggleGettingStarted = useCallback(
136156
(show: boolean) => {
137157
setShowGettingStarted(show);
@@ -192,53 +212,103 @@ const WorkspacesPage: FunctionComponent = () => {
192212
</div>
193213

194214
{showGettingStarted && (
195-
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 lg:px-28 px-4 pb-4">
196-
<Card onClick={() => setVideoModalVisible(true)}>
197-
<Video className="flex-shrink-0" size={24} />
198-
<div className="min-w-0">
199-
<CardTitle>Learn how Gitpod works</CardTitle>
200-
<CardDescription>
201-
We've put together resources for you to get the most our of Gitpod.
202-
</CardDescription>
203-
</div>
204-
</Card>
205-
206-
{orgSettings?.onboardingSettings?.internalLink ? (
207-
<Card href={orgSettings.onboardingSettings.internalLink} isLinkExternal>
208-
<Building className="flex-shrink-0" size={24} />
215+
<>
216+
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 lg:px-28 px-4 pb-4">
217+
<Card onClick={() => setVideoModalVisible(true)}>
218+
<Video className="flex-shrink-0" size={24} />
209219
<div className="min-w-0">
210-
<CardTitle>Learn more about Gitpod at {org?.name}</CardTitle>
220+
<CardTitle>Learn how Gitpod works</CardTitle>
211221
<CardDescription>
212-
Read through the internal Gitpod landing page of your organization.
222+
We've put together resources for you to get the most our of Gitpod.
213223
</CardDescription>
214224
</div>
215225
</Card>
216-
) : (
217-
<Card href={"/new?showExamples=true"}>
218-
<Code className="flex-shrink-0" size={24} />
226+
227+
{orgSettings?.onboardingSettings?.internalLink ? (
228+
<Card href={orgSettings.onboardingSettings.internalLink} isLinkExternal>
229+
<Building className="flex-shrink-0" size={24} />
230+
<div className="min-w-0">
231+
<CardTitle>Learn more about Gitpod at {org?.name}</CardTitle>
232+
<CardDescription>
233+
Read through the internal Gitpod landing page of your organization.
234+
</CardDescription>
235+
</div>
236+
</Card>
237+
) : (
238+
<Card href={"/new?showExamples=true"}>
239+
<Code className="flex-shrink-0" size={24} />
240+
<div className="min-w-0">
241+
<CardTitle>Open a sample repository</CardTitle>
242+
<CardDescription>
243+
Explore{" "}
244+
{orgSuggestedRepos?.length
245+
? "repositories recommended by your organization"
246+
: "a sample repository"}
247+
to quickly experience Gitpod.
248+
</CardDescription>
249+
</div>
250+
</Card>
251+
)}
252+
253+
<Card href="https://www.gitpod.io/docs/introduction" isLinkExternal>
254+
<Book className="flex-shrink-0" size={24} />
219255
<div className="min-w-0">
220-
<CardTitle>Open a sample repository</CardTitle>
256+
<CardTitle>Visit the docs</CardTitle>
221257
<CardDescription>
222-
Explore{" "}
223-
{orgSuggestedRepos?.length
224-
? "repositories recommended by your organization"
225-
: "a sample repository"}
226-
to quickly experience Gitpod.
258+
We have extensive documentation to help if you get stuck.
227259
</CardDescription>
228260
</div>
229261
</Card>
230-
)}
262+
</div>
231263

232-
<Card href="https://www.gitpod.io/docs/introduction" isLinkExternal>
233-
<Book className="flex-shrink-0" size={24} />
234-
<div className="min-w-0">
235-
<CardTitle>Visit the docs</CardTitle>
236-
<CardDescription>
237-
We have extensive documentation to help if you get stuck.
238-
</CardDescription>
239-
</div>
240-
</Card>
241-
</div>
264+
{suggestedRepos.length > 0 && (
265+
<>
266+
<Subheading className="font-semibold text-pk-content-primary mb-2 app-container">
267+
Suggested
268+
</Subheading>
269+
270+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 lg:px-28 px-4">
271+
{suggestedRepos.map((repo) => {
272+
const isOrgSuggested =
273+
(repo as SuggestedOrgRepository).orgSuggested ?? false;
274+
275+
return (
276+
<Card
277+
key={repo.url}
278+
href={`/new#${repo.url}`}
279+
className={cn(
280+
"border-[0.5px] hover:bg-pk-surface-tertiary transition-colors w-full",
281+
{
282+
"border-[#D79A45]": isOrgSuggested,
283+
"border-pk-border-base": !isOrgSuggested,
284+
},
285+
)}
286+
>
287+
<div className="min-w-0 w-full space-y-1.5">
288+
<CardTitle className="flex flex-row items-center gap-2 w-full">
289+
<span className="truncate block min-w-0 text-base">
290+
{repo.configurationName || repo.repoName}
291+
</span>
292+
{isOrgSuggested && (
293+
<PillLabel
294+
className="capitalize bg-kumquat-light shrink-0 text-sm"
295+
type="warn"
296+
>
297+
Recommended
298+
</PillLabel>
299+
)}
300+
</CardTitle>
301+
<CardDescription className="truncate text-sm opacity-75">
302+
{repo.url}
303+
</CardDescription>
304+
</div>
305+
</Card>
306+
);
307+
})}
308+
</div>
309+
</>
310+
)}
311+
</>
242312
)}
243313
<Modal
244314
visible={isVideoModalVisible}

0 commit comments

Comments
 (0)