-
Notifications
You must be signed in to change notification settings - Fork 1.3k
[dashboard] Refactor What's New dialog #4607
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from all commits
Commits
Show all changes
2 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
/** | ||
* Copyright (c) 2021 Gitpod GmbH. All rights reserved. | ||
* Licensed under the GNU Affero General Public License (AGPL). | ||
* See License-AGPL.txt in the project root for license information. | ||
*/ | ||
|
||
export default function CodeText(p: { children?: React.ReactNode }) { | ||
return <span className="bg-gray-100 dark:bg-gray-700 px-1.5 py-0.5 rounded-md text-sm font-mono font-medium">{p.children}</span>; | ||
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
/** | ||
* Copyright (c) 2021 Gitpod GmbH. All rights reserved. | ||
* Licensed under the GNU Affero General Public License (AGPL). | ||
* See License-AGPL.txt in the project root for license information. | ||
*/ | ||
|
||
/** | ||
* Renders a pill. | ||
* | ||
* **type**\ | ||
* info: Renders a blue pile label (default).\ | ||
* warn: Renders an orange pile label. | ||
*/ | ||
export default function PillLabel(props: { children?: React.ReactNode, type?: "info" | "warn" }) { | ||
const infoStyle = "bg-blue-50 text-blue-500 dark:bg-blue-500 dark:text-blue-100"; | ||
const warnStyle = "bg-orange-100 text-orange-700 dark:bg-orange-600 dark:text-orange-100"; | ||
const style = `ml-2 px-3 py-1 text-sm uppercase rounded-xl ${props.type === "warn" ? warnStyle : infoStyle}`; | ||
return <span className={style}>{props.children}</span>; | ||
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,56 @@ | ||
/** | ||
* Copyright (c) 2021 Gitpod GmbH. All rights reserved. | ||
* Licensed under the GNU Affero General Public License (AGPL). | ||
* See License-AGPL.txt in the project root for license information. | ||
*/ | ||
|
||
import { User } from "@gitpod/gitpod-protocol"; | ||
import { getGitpodService } from "../service/service"; | ||
import { WhatsNewEntry } from "./WhatsNew"; | ||
|
||
export const switchToVSCodeAction = async (user: User) => { | ||
const additionalData = user.additionalData = user.additionalData || {}; | ||
// make sure code is set as the default IDE | ||
const ideSettings = additionalData.ideSettings = additionalData.ideSettings || {}; | ||
ideSettings.defaultIde = 'code'; | ||
user = await getGitpodService().server.updateLoggedInUser({ | ||
additionalData | ||
}); | ||
return user; | ||
}; | ||
|
||
export const WhatsNewEntry202104: WhatsNewEntry = { | ||
newsKey: 'April-2021', | ||
maxUserCreationDate: '2021-04-08', | ||
children: () => <> | ||
<div className="border-t border-gray-200 dark:border-gray-800 -mx-6 px-6 py-4"> | ||
<p className="pb-2 text-gray-900 dark:text-gray-100 text-base font-medium">New Dashboard</p> | ||
<p className="pb-2 text-gray-500 dark:text-gray-400 text-sm">We have made some layout changes on the dashboard to improve the overall user experience of Gitpod.</p> | ||
</div> | ||
<div className="border-t border-b border-gray-200 dark:border-gray-800 -mx-6 px-6 py-4"> | ||
<p className="pb-2 text-gray-900 dark:text-gray-100 text-base font-medium">VS Code</p> | ||
<p className="pb-4 text-gray-500 dark:text-gray-400 text-sm">We are changing the default IDE to VS Code.</p> | ||
<ol className="pb-2 text-gray-500 dark:text-gray-400 text-sm list-outside list-decimal space-y-2"> | ||
<li className="ml-5"> | ||
<div> | ||
<p className="text-gray-500 dark:text-gray-400 text-sm">We're preserving most <span className="font-bold">user settings and extensions</span>.</p> | ||
<p className="text-gray-400 dark:text-gray-500 text-sm">Extensions you have manually uploaded are not transferred. You'll need to search and install those extensions through the extension panel in VS Code.</p> | ||
</div> | ||
</li> | ||
<li className="ml-5"> | ||
<div> | ||
<p className="text-gray-500 dark:text-gray-400 text-sm">We've reduced the number of <span className="font-bold">pre-installed extensions</span>.</p> | ||
<p className="text-gray-400 dark:text-gray-500 text-sm">The Theia-based editor included pre-installed extensions for the most popular programming languages which was convenient for starters but added additional bloat. You can now install any extensions you need and leave out those you don't.</p> | ||
</div> | ||
</li> | ||
<li className="ml-5"> | ||
<div> | ||
<p className="text-gray-500 dark:text-gray-400 text-sm">You can still <span className="font-bold">switch the IDE</span> back to Theia.</p> | ||
<p className="text-gray-400 dark:text-gray-500 text-sm">In case you run into trouble with VS Code, you can go to the settings and switch back to the Theia.</p> | ||
</div> | ||
</li> | ||
</ol> | ||
</div> | ||
</>, | ||
actionAfterSeen: switchToVSCodeAction, | ||
}; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
/** | ||
* Copyright (c) 2021 Gitpod GmbH. All rights reserved. | ||
* Licensed under the GNU Affero General Public License (AGPL). | ||
* See License-AGPL.txt in the project root for license information. | ||
*/ | ||
|
||
import { User } from "@gitpod/gitpod-protocol"; | ||
import { WhatsNewEntry } from "./WhatsNew"; | ||
import { switchToVSCodeAction } from "./WhatsNew-2021-04"; | ||
import CodeText from "../components/CodeText"; | ||
import PillLabel from "../components/PillLabel"; | ||
|
||
export const WhatsNewEntry202106: WhatsNewEntry = { | ||
children: (user: User, setUser: React.Dispatch<User>) => { | ||
|
||
return <> | ||
<div className="border-t border-b border-gray-200 dark:border-gray-800 -mx-6 px-6 pt-6 pb-4"> | ||
<p className="pb-2 text-gray-900 dark:text-gray-100 text-base font-medium">Exposing Ports <PillLabel>Configuration Update</PillLabel></p> | ||
<p className="pb-2 text-gray-500 dark:text-gray-400 text-sm">We've changed the default behavior of exposed ports to improve the security of your dev environments.</p> | ||
<p className="pb-2 text-gray-500 dark:text-gray-400 text-sm">Exposing ports are now private by default. You can still change port visibility through the editor or even configure this with the <CodeText>visibility</CodeText> property in <CodeText>.gitpod.yml</CodeText>.</p> | ||
</div> | ||
{ user.additionalData?.ideSettings?.defaultIde !== "code" && <> | ||
<div className="border-b border-gray-200 dark:border-gray-800 -mx-6 px-6 pt-6 pb-4"> | ||
<p className="pb-2 text-gray-900 dark:text-gray-100 text-base font-medium">New Editor <PillLabel type="warn">Deprecation Warning</PillLabel></p> | ||
<p className="pb-2 text-gray-500 dark:text-gray-400 text-sm">We're deprecating the Theia editor. You can still switch back to Theia for the next few weeks but the preference will be removed by the end of August 2021.</p> | ||
corneliusludmann marked this conversation as resolved.
Show resolved
Hide resolved
|
||
</div> | ||
</>} | ||
</>; | ||
}, | ||
newsKey: 'June-2021', | ||
maxUserCreationDate: '2021-07-01', | ||
actionAfterSeen: switchToVSCodeAction, | ||
}; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,98 @@ | ||
/** | ||
* Copyright (c) 2021 Gitpod GmbH. All rights reserved. | ||
* Licensed under the GNU Affero General Public License (AGPL). | ||
* See License-AGPL.txt in the project root for license information. | ||
*/ | ||
|
||
import { User } from "@gitpod/gitpod-protocol"; | ||
import Modal from "../components/Modal"; | ||
import { WhatsNewEntry202104 } from "./WhatsNew-2021-04"; | ||
import { WhatsNewEntry202106 } from "./WhatsNew-2021-06"; | ||
corneliusludmann marked this conversation as resolved.
Show resolved
Hide resolved
|
||
import { UserContext } from "../user-context"; | ||
import { useContext, useState } from "react"; | ||
import { getGitpodService } from "../service/service"; | ||
|
||
const allEntries: WhatsNewEntry[] = [ | ||
WhatsNewEntry202106, | ||
WhatsNewEntry202104, | ||
] | ||
|
||
export const shouldSeeWhatsNew = (user: User, news: { newsKey: string, maxUserCreationDate: string }[] = allEntries) => { | ||
const whatsNewSeen = user?.additionalData?.whatsNewSeen; | ||
return news.some(x => user.creationDate <= x.maxUserCreationDate && (!whatsNewSeen || !whatsNewSeen[x.newsKey])); | ||
} | ||
|
||
export function WhatsNew(props: { onClose: () => void }) { | ||
const { user, setUser } = useContext(UserContext); | ||
|
||
const _unseenEntries = allEntries.filter(x => user && shouldSeeWhatsNew(user, [x])) || []; | ||
const [visibleEntry, setVisibleEntry] = useState(_unseenEntries.pop()); | ||
const [unseenEntries, setUnseenEntries] = useState(_unseenEntries); | ||
|
||
const markAsSeen = async (user?: User, ...news: (WhatsNewEntry | undefined)[]) => { | ||
if (!user) { | ||
return; | ||
} | ||
|
||
for (const n of news.filter(x => x && x.actionAfterSeen)) { | ||
user = await n!.actionAfterSeen!(user); | ||
}; | ||
|
||
const additionalData = user.additionalData = user.additionalData || {}; | ||
additionalData.whatsNewSeen = additionalData.whatsNewSeen || {}; | ||
const now = new Date().toISOString(); | ||
for (const newsKey of (news.filter(x => x !== undefined) as WhatsNewEntry[]).map(x => x.newsKey)) { | ||
additionalData.whatsNewSeen[newsKey] = now; | ||
} | ||
user = await getGitpodService().server.updateLoggedInUser({ | ||
additionalData | ||
}); | ||
setUser(user); | ||
}; | ||
|
||
const internalClose = async () => { | ||
await markAsSeen(user, ...unseenEntries, visibleEntry); | ||
props.onClose(); | ||
}; | ||
|
||
const hasNext = () => unseenEntries.length > 0; | ||
|
||
const next = async () => { | ||
if (unseenEntries.length === 0) { | ||
return; | ||
} | ||
visibleEntry && await markAsSeen(user, visibleEntry); | ||
const _unseenEntries = unseenEntries; | ||
setVisibleEntry(_unseenEntries.pop()); | ||
setUnseenEntries(_unseenEntries); | ||
}; | ||
|
||
return <Modal | ||
visible={!!visibleEntry} | ||
onClose={internalClose} | ||
> | ||
<h3 className="pb-4">What's New 🎁</h3> | ||
<>{visibleEntry && user ? visibleEntry.children(user, setUser) : <></>}</> | ||
{ | ||
hasNext() ? | ||
<> | ||
<div className="flex items-center justify-end mt-6 space-x-2"> | ||
<div className="text-sm mr-auto italic">{unseenEntries.length} more update{unseenEntries.length > 1 ? "s" : ""}</div> | ||
<button className="ml-2 secondary" onClick={internalClose}>Dismiss All</button> | ||
<button className="ml-2" onClick={next}>Next</button> | ||
</div> | ||
</> | ||
: | ||
<div className="flex justify-end mt-6 space-x-2"> | ||
<button onClick={internalClose}>Continue</button> | ||
</div> | ||
} | ||
</Modal> | ||
} | ||
|
||
export interface WhatsNewEntry { | ||
newsKey: string, | ||
maxUserCreationDate: string, | ||
children: (user: User, setUser: React.Dispatch<User>) => React.ReactChild[] | React.ReactChild, | ||
actionAfterSeen?: (user: User) => Promise<User>; | ||
} |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.