Org Settings Page Header updates & cleanup #16850

selfcontained · 2023-03-14T20:30:42Z

Description

Some cleanup around the Org Settings pages.

Updates the Header/Subheader for the Org Settings pages

Each page now updates the main head accordingly

Settings	SSO	Git Integrations	Billing

Cleans up displaying errors/warnings in a Modal in the Git Integrations flow

<ModalFooter error="error message" warning="warning message" />
only 1 shows at a time. error takes precedence.
Pinned above the footer (would like to have it animate/slide up in a future iteration
Ended up adding an <Alert type="danger"/> to get the darker alert style. Open to alternatives here, cc @gtsiolis

Warning	Error

Related Issue(s)

Fixes #15995

How to test

Preview Env: https://bmh-git-auth-cleanup.preview.gitpod-dev.com/workspaces
Create an Org and visit the Settings page for it.
Ensure each page has an updated Header/Subheading like in the screenshots.

Release Notes

NONE

Documentation

Build Options:

/werft with-werft
Run the build with werft instead of GHA
leeway-no-cache
/werft no-test
Run Leeway with --dont-test

Publish Options

/werft publish-to-npm
/werft publish-to-jb-marketplace

Installer Options

with-ee-license
with-dedicated-emulation
with-ws-manager-mk2
workspace-feature-flags
Add desired feature flags to the end of the line above, space separated

Preview Environment Options:

/werft with-local-preview
If enabled this will build install/preview
/werft with-preview
/werft with-large-vm
/werft with-gce-vm
If enabled this will create the environment on GCE infra
/werft with-integration-tests=all
Valid options are all, workspace, webapp, ide, jetbrains, vscode, ssh

werft-gitpod-dev-com · 2023-03-14T20:30:50Z

started the job as gitpod-build-bmh-git-auth-cleanup.2 because the annotations in the pull request description changed
(with .werft/ from main)

selfcontained · 2023-03-14T21:03:00Z

/werft run with-preview=true

👍 started the job as gitpod-build-bmh-git-auth-cleanup.3
(with .werft/ from main)

selfcontained · 2023-03-15T00:42:26Z

components/dashboard/src/components/Alert.tsx

@@ -73,6 +77,12 @@ const infoMap: Record<AlertType, AlertInfo> = {
        icon: <Exclamation className="w-4 h-4"></Exclamation>,
        iconColor: "text-red-400",
    },
+    danger: {


Wanted the alert w/ a darker red background for modals. Open to alternatives here.

AlexTugarev · 2023-03-15T06:48:27Z

components/dashboard/src/teams/SSO.tsx

@@ -85,11 +90,10 @@ function OIDCClients(props: { organizationId: string }) {
            {modal?.mode === "edit" && <></>}
            {modal?.mode === "delete" && <></>}

+            <Heading2>OpenID Connect providers</Heading2>


@selfcontained, here we've to be clear what's actually being set up, i.e. be clear about client vs. provider. Technically, we are not setting up a provider, but configuring a client for external providers. As there can be more than one client for a IdP (provider like google) we should avoid calling it provider here.
Also, there are ideas floating to make Gitpod an IdP, even if that would be just proxying other IdPs, having the roles clarified prevents from confusion.

Let's go with "OpenID Connect clients" 🙏🏻

AlexTugarev · 2023-03-15T06:51:31Z

components/dashboard/src/teams/SSO.tsx


 export default function SSO() {
    const currentOrg = useCurrentOrg();

-    return <OrgSettingsPage>{currentOrg.data && <OIDCClients organizationId={currentOrg.data?.id} />}</OrgSettingsPage>;
+    return (
+        <OrgSettingsPage title="SSO" subtitle="Configure OpenID Connect single sign-on providers.">


I'd propose to drop "providers" from subtitle, and rather include the acronym used below. Maybe like this: Configure OpenID Connect (OIDC) single sign-on.

AlexTugarev · 2023-03-15T07:05:55Z

components/dashboard/src/teams/git-integrations/GitIntegrationsList.tsx

-                </div>
+                <EmptyMessage
+                    title="No Git Integrations"
+                    subtitle="In addition to the default Git Providers you can authorize with a self-hosted instance of a provider."


Let's rephrase the subtitle to avoid confusion we have with Gitpod Self-Hosted vs. SaaS 🙈 With introducing Git Auth for organizations, we want to enable adding those per organization. I'd say even mentioning the "defaults" isn't relevant here, as encapsulation is what organizations are about.

What do you think of simplifying and reducing to "Configure Git Auth with GitHub or GitLab".

Sidebar: bitbucket.org is not supported 🙈 just the self-managed BBS

AlexTugarev · 2023-03-15T07:10:56Z

components/dashboard/src/teams/GitIntegrationsPage.tsx

@@ -24,11 +24,14 @@ export default function GitAuth() {
 export const OrgSettingsPageWrapper: FunctionComponent = ({ children }) => {
    const currentOrg = useCurrentOrg();

+    const title = "Git Integrations";


🙏🏻 could we rename it to Git Auth to emphasize that this feature is about authorization of Git commands (and APIs). AFAIR the integrations was just some middle ground as we had to incorporate the login thing into it, but here we can clarify on the expectations.

AlexTugarev · 2023-03-15T07:13:04Z

components/dashboard/src/teams/GitIntegrationsPage.tsx

@@ -24,11 +24,14 @@ export default function GitAuth() {
 export const OrgSettingsPageWrapper: FunctionComponent = ({ children }) => {
    const currentOrg = useCurrentOrg();

+    const title = "Git Integrations";
+    const subtitle = "Configure Git integrations for self-managed instances of GitLab, GitHub, or Bitbucket.";


Let's go with something like Configure Git Auth for GitLab, or Github.
Minus self-managed as this is to support SaaS (gitlab.com + github.com)

AlexTugarev · 2023-03-15T07:25:56Z

components/dashboard/src/teams/SSO.tsx

-                </div>
+                <EmptyMessage
+                    title="No OIDC providers"
+                    subtitle="Enter the client ID, client secret, and other information issued by your identity provider, to enable single sign-on for your organization."


I'm curious what the empty message should be good for. The general point of "enable single sign-on for your organization" is perfect!

On this view, one cannot enter anything, thus the call to enter details demands too much.

I think what really is missing here is the mentioning of supported IdPs.

WDYT of something like this?

Enable single sign-on for your organization using an external identity provider (IdP) service that supports the OpenID Connect (OIDC) standard, such as Google.

AlexTugarev

Thanks for taking care of this! 🙏🏻

wip

0b80f60

roboquat added do-not-merge/work-in-progress do-not-merge/release-note-label-needed labels Mar 14, 2023

roboquat added the size/XS label Mar 14, 2023

Adding error and warning support to Modal

cf98571

roboquat added size/L and removed size/XS labels Mar 14, 2023

Updating headings for team settings pages

448ffbd

selfcontained commented Mar 15, 2023

View reviewed changes

roboquat added release-note-none and removed do-not-merge/release-note-label-needed labels Mar 15, 2023

selfcontained changed the title ~~Git Auth UI cleanup~~ Org Settings Page Header updates & cleanup Mar 15, 2023

AlexTugarev reviewed Mar 15, 2023

View reviewed changes

copy updates

cd042bb

selfcontained marked this pull request as ready for review March 15, 2023 15:54

selfcontained requested a review from a team March 15, 2023 15:54

selfcontained requested a review from gtsiolis as a code owner March 15, 2023 15:54

roboquat removed the do-not-merge/work-in-progress label Mar 15, 2023

github-actions bot added the team: webapp Issue belongs to the WebApp team label Mar 15, 2023

AlexTugarev approved these changes Mar 15, 2023

View reviewed changes

roboquat merged commit 85cf075 into main Mar 15, 2023

roboquat deleted the bmh/git-auth-cleanup branch March 15, 2023 16:26

roboquat added the deployed: webapp Meta team change is running in production label Mar 16, 2023

roboquat added the deployed Change is completely running in production label Mar 16, 2023

gtsiolis mentioned this pull request Mar 16, 2023

Org SSO Page updates #16868

Merged

14 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Org Settings Page Header updates & cleanup #16850

Org Settings Page Header updates & cleanup #16850

Uh oh!

selfcontained commented Mar 14, 2023 •

edited

Loading

Uh oh!

werft-gitpod-dev-com bot commented Mar 14, 2023

Uh oh!

selfcontained commented Mar 14, 2023 •

edited by werft-gitpod-dev-com bot

Loading

Uh oh!

selfcontained Mar 15, 2023

Uh oh!

AlexTugarev Mar 15, 2023

Uh oh!

AlexTugarev Mar 15, 2023

Uh oh!

AlexTugarev Mar 15, 2023

Uh oh!

AlexTugarev Mar 15, 2023

Uh oh!

AlexTugarev Mar 15, 2023

Uh oh!

AlexTugarev Mar 15, 2023

Uh oh!

AlexTugarev left a comment

Uh oh!

Uh oh!

Org Settings Page Header updates & cleanup #16850

Org Settings Page Header updates & cleanup #16850

Uh oh!

Conversation

selfcontained commented Mar 14, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Updates the Header/Subheader for the Org Settings pages

Cleans up displaying errors/warnings in a Modal in the Git Integrations flow

Related Issue(s)

How to test

Release Notes

Documentation

Build Options:

Preview Environment Options:

Uh oh!

werft-gitpod-dev-com bot commented Mar 14, 2023

Uh oh!

selfcontained commented Mar 14, 2023 • edited by werft-gitpod-dev-com bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

selfcontained Mar 15, 2023

Choose a reason for hiding this comment

Uh oh!

AlexTugarev Mar 15, 2023

Choose a reason for hiding this comment

Uh oh!

AlexTugarev Mar 15, 2023

Choose a reason for hiding this comment

Uh oh!

AlexTugarev Mar 15, 2023

Choose a reason for hiding this comment

Uh oh!

AlexTugarev Mar 15, 2023

Choose a reason for hiding this comment

Uh oh!

AlexTugarev Mar 15, 2023

Choose a reason for hiding this comment

Uh oh!

AlexTugarev Mar 15, 2023

Choose a reason for hiding this comment

Uh oh!

AlexTugarev left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

selfcontained commented Mar 14, 2023 •

edited

Loading

selfcontained commented Mar 14, 2023 •

edited by werft-gitpod-dev-com bot

Loading