From b9ff0fa5e91935b067b4aee7bffdfc4185ecd9e1 Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Wed, 2 Oct 2024 00:27:25 +0000 Subject: [PATCH 01/38] wip --- pnpm-lock.yaml | 16 ++++----- site/src/App.tsx | 36 +++++++++++++------ .../SettingsHeader/SettingsHeader.tsx | 35 +++++++++--------- 3 files changed, 51 insertions(+), 36 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c97cbb1a8dedd..eb8fcb06d8eb5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -106,15 +106,15 @@ packages: resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==} engines: {node: '>=0.12'} - fast-glob@3.3.2: - resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==} + fast-glob@3.3.3: + resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==} engines: {node: '>=8.6.0'} fast-levenshtein@2.0.6: resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==} - fastq@1.17.1: - resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==} + fastq@1.18.0: + resolution: {integrity: sha512-QKHXPW0hD8g4UET03SdOdunzSouc9N4AuHdsX8XNcTsuz+yYFILVNIX4l9yHABMhiEI9Db0JTTIpu0wB+Y1QQw==} fill-range@7.1.1: resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==} @@ -376,7 +376,7 @@ snapshots: '@nodelib/fs.walk@1.2.8': dependencies: '@nodelib/fs.scandir': 2.1.5 - fastq: 1.17.1 + fastq: 1.18.0 '@pkgjs/parseargs@0.11.0': optional: true @@ -431,7 +431,7 @@ snapshots: entities@4.5.0: {} - fast-glob@3.3.2: + fast-glob@3.3.3: dependencies: '@nodelib/fs.stat': 2.0.5 '@nodelib/fs.walk': 1.2.8 @@ -441,7 +441,7 @@ snapshots: fast-levenshtein@2.0.6: {} - fastq@1.17.1: + fastq@1.18.0: dependencies: reusify: 1.0.4 @@ -478,7 +478,7 @@ snapshots: globby@14.0.2: dependencies: '@sindresorhus/merge-streams': 2.3.0 - fast-glob: 3.3.2 + fast-glob: 3.3.3 ignore: 5.3.2 path-type: 5.0.0 slash: 5.1.0 diff --git a/site/src/App.tsx b/site/src/App.tsx index e4e6d4a665996..709f3995b9e09 100644 --- a/site/src/App.tsx +++ b/site/src/App.tsx @@ -14,6 +14,9 @@ import { GlobalSnackbar } from "./components/GlobalSnackbar/GlobalSnackbar"; import { ThemeProvider } from "./contexts/ThemeProvider"; import { AuthProvider } from "./contexts/auth/AuthProvider"; import { router } from "./router"; +import { StyledEngineProvider } from "@mui/material/styles"; +import createCache from "@emotion/cache"; +import { CacheProvider } from "@emotion/react"; const defaultQueryClient = new QueryClient({ defaultOptions: { @@ -37,6 +40,11 @@ declare global { } } +const cache = createCache({ + key: "css", + prepend: true, +}); + export const AppProviders: FC = ({ children, queryClient = defaultQueryClient, @@ -63,17 +71,23 @@ export const AppProviders: FC = ({ }, []); return ( - - - - - {children} - - - - {showDevtools && } - - + + + + + + + {children} + + + + {showDevtools && ( + + )} + + + + ); }; diff --git a/site/src/components/SettingsHeader/SettingsHeader.tsx b/site/src/components/SettingsHeader/SettingsHeader.tsx index 1dec847e65093..64fb9bbf3a71f 100644 --- a/site/src/components/SettingsHeader/SettingsHeader.tsx +++ b/site/src/components/SettingsHeader/SettingsHeader.tsx @@ -26,22 +26,23 @@ export const SettingsHeader: FC = ({

{title}

@@ -56,7 +57,7 @@ export const SettingsHeader: FC = ({ lineHeight: "160%", }} > - {description} + lalkdsalk )}
From aab755d9bd5bf420ec17d9dbc1ea22b5fed0af04 Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Tue, 15 Oct 2024 17:48:23 +0000 Subject: [PATCH 02/38] fix --- site/src/App.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/site/src/App.tsx b/site/src/App.tsx index 709f3995b9e09..48d029daf98f4 100644 --- a/site/src/App.tsx +++ b/site/src/App.tsx @@ -1,4 +1,7 @@ import "./theme/globalFonts"; +import createCache from "@emotion/cache"; +import { CacheProvider } from "@emotion/react"; +import { StyledEngineProvider } from "@mui/material/styles"; import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; import { type FC, @@ -14,9 +17,6 @@ import { GlobalSnackbar } from "./components/GlobalSnackbar/GlobalSnackbar"; import { ThemeProvider } from "./contexts/ThemeProvider"; import { AuthProvider } from "./contexts/auth/AuthProvider"; import { router } from "./router"; -import { StyledEngineProvider } from "@mui/material/styles"; -import createCache from "@emotion/cache"; -import { CacheProvider } from "@emotion/react"; const defaultQueryClient = new QueryClient({ defaultOptions: { From 85ee8a2689dc95d133e32e3a1781b548e6056995 Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Wed, 16 Oct 2024 17:42:02 +0000 Subject: [PATCH 03/38] wip --- site/src/App.tsx | 31 +++++++++++++------------------ 1 file changed, 13 insertions(+), 18 deletions(-) diff --git a/site/src/App.tsx b/site/src/App.tsx index 48d029daf98f4..0355a14716a8a 100644 --- a/site/src/App.tsx +++ b/site/src/App.tsx @@ -1,7 +1,6 @@ import "./theme/globalFonts"; import createCache from "@emotion/cache"; import { CacheProvider } from "@emotion/react"; -import { StyledEngineProvider } from "@mui/material/styles"; import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; import { type FC, @@ -71,23 +70,19 @@ export const AppProviders: FC = ({ }, []); return ( - - - - - - - {children} - - - - {showDevtools && ( - - )} - - - - + + + + + + {children} + + + + {showDevtools && } + + + ); }; From e556af970a22bfef05a368b602445aa4bbe296db Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Wed, 16 Oct 2024 20:53:08 +0000 Subject: [PATCH 04/38] revert css --- .../SettingsHeader/SettingsHeader.tsx | 35 +++++++++---------- 1 file changed, 17 insertions(+), 18 deletions(-) diff --git a/site/src/components/SettingsHeader/SettingsHeader.tsx b/site/src/components/SettingsHeader/SettingsHeader.tsx index 64fb9bbf3a71f..1dec847e65093 100644 --- a/site/src/components/SettingsHeader/SettingsHeader.tsx +++ b/site/src/components/SettingsHeader/SettingsHeader.tsx @@ -26,23 +26,22 @@ export const SettingsHeader: FC = ({

{title}

@@ -57,7 +56,7 @@ export const SettingsHeader: FC = ({ lineHeight: "160%", }} > - lalkdsalk + {description} )}
From 4904c03bc5eeeae4edeae630e2c7554783529b58 Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Wed, 30 Oct 2024 02:11:46 +0000 Subject: [PATCH 05/38] feat: changes for premium page --- site/src/lib/utils.ts | 6 ++++++ site/vite.config.mts | 1 + 2 files changed, 7 insertions(+) create mode 100644 site/src/lib/utils.ts diff --git a/site/src/lib/utils.ts b/site/src/lib/utils.ts new file mode 100644 index 0000000000000..bd0c391ddd108 --- /dev/null +++ b/site/src/lib/utils.ts @@ -0,0 +1,6 @@ +import { clsx, type ClassValue } from "clsx" +import { twMerge } from "tailwind-merge" + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)) +} diff --git a/site/vite.config.mts b/site/vite.config.mts index 9da0221016cb1..1c59e19598c89 100644 --- a/site/vite.config.mts +++ b/site/vite.config.mts @@ -92,6 +92,7 @@ export default defineConfig({ testHelpers: path.resolve(__dirname, "./src/testHelpers"), theme: path.resolve(__dirname, "./src/theme"), utils: path.resolve(__dirname, "./src/utils"), + "@": path.resolve(__dirname, "./src"), }, }, }); From e99c314e6da394f6f7f73b386f0229cd1ea264c0 Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Fri, 1 Nov 2024 16:29:35 +0000 Subject: [PATCH 06/38] feat: implement Premium page with Tailwind and shadcn button --- site/src/lib/utils.ts | 6 +++--- site/tailwind.config.js | 2 ++ 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/site/src/lib/utils.ts b/site/src/lib/utils.ts index bd0c391ddd108..ac680b303c9f4 100644 --- a/site/src/lib/utils.ts +++ b/site/src/lib/utils.ts @@ -1,6 +1,6 @@ -import { clsx, type ClassValue } from "clsx" -import { twMerge } from "tailwind-merge" +import { type ClassValue, clsx } from "clsx"; +import { twMerge } from "tailwind-merge"; export function cn(...inputs: ClassValue[]) { - return twMerge(clsx(inputs)) + return twMerge(clsx(inputs)); } diff --git a/site/tailwind.config.js b/site/tailwind.config.js index 20615db8dd6f6..315e334f35575 100644 --- a/site/tailwind.config.js +++ b/site/tailwind.config.js @@ -1,3 +1,5 @@ +const colors = require("tailwindcss/colors"); + /** @type {import('tailwindcss').Config} */ module.exports = { corePlugins: { From c5696cc11317733f29c2677c51de377de720464c Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Fri, 1 Nov 2024 19:09:19 +0000 Subject: [PATCH 07/38] chore: updates to button styles --- .../DeploymentSettingsPage/PremiumPage/PremiumPageView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/pages/DeploymentSettingsPage/PremiumPage/PremiumPageView.tsx b/site/src/pages/DeploymentSettingsPage/PremiumPage/PremiumPageView.tsx index 168fe6e591892..bc87d800e6515 100644 --- a/site/src/pages/DeploymentSettingsPage/PremiumPage/PremiumPageView.tsx +++ b/site/src/pages/DeploymentSettingsPage/PremiumPage/PremiumPageView.tsx @@ -21,7 +21,7 @@ const EnterpriseVersion: FC = () => { Premium for enhanced multi-tenant control and flexibility.

- + + + + + + {organizations.map((organization) => ( + + { + setPopoverOpen(false); + }} + > + + {organization.display_name || organization.name} + + + ))} + {permissions.createOrganization && ( + <> +
+ + + )} + + + + + {organizations.map((org) => ( ))} @@ -124,19 +192,6 @@ const OrganizationSettingsNavigation: FC< > = ({ active, organization }) => { return ( <> - - } - > - {organization.display_name} - {active && (
{organization.permissions.editOrganization && ( @@ -145,9 +200,7 @@ const OrganizationSettingsNavigation: FC< )} {organization.permissions.editMembers && ( - + Members )} @@ -177,6 +230,13 @@ const OrganizationSettingsNavigation: FC< IdP Sync )} + {organization.permissions.editOrganization && ( + + Settings + + )}
)} diff --git a/site/src/pages/ManagementSettingsPage/CreateOrganizationPage.tsx b/site/src/pages/ManagementSettingsPage/CreateOrganizationPage.tsx index 8f9c967040d5c..3bf26f2ee95b0 100644 --- a/site/src/pages/ManagementSettingsPage/CreateOrganizationPage.tsx +++ b/site/src/pages/ManagementSettingsPage/CreateOrganizationPage.tsx @@ -18,15 +18,17 @@ const CreateOrganizationPage: FC = () => { const error = createOrganizationMutation.error; return ( - { - await createOrganizationMutation.mutateAsync(values); - displaySuccess("Organization created."); - navigate(`/organizations/${values.name}`); - }} - /> +
+ { + await createOrganizationMutation.mutateAsync(values); + displaySuccess("Organization created."); + navigate(`/organizations/${values.name}`); + }} + /> +
); }; diff --git a/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.tsx b/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.tsx index 172c537643f69..79e4c1c8aaceb 100644 --- a/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.tsx +++ b/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.tsx @@ -9,7 +9,7 @@ import { FormFields, FormFooter, FormSection, - HorizontalForm, + VerticalForm, } from "components/Form/Form"; import { IconField } from "components/IconField/IconField"; import { Paywall } from "components/Paywall/Paywall"; @@ -23,7 +23,9 @@ import { PopoverTrigger, } from "components/deprecated/Popover/Popover"; import { useFormik } from "formik"; +import { ArrowLeft } from "lucide-react"; import type { FC } from "react"; +import { Link } from "react-router-dom"; import { docs } from "utils/docs"; import { displayNameValidator, @@ -67,105 +69,115 @@ export const CreateOrganizationPageView: FC< const getFieldHelpers = getFormHelpers(form, error); return ( - +
- + + + Go Back + +
+ +
+ - {Boolean(error) && !isApiValidationError(error) && ( -
- -
- )} + {Boolean(error) && !isApiValidationError(error) && ( +
+ +
+ )} - - - {isEntitled && ( - - - - - - )} + + + {isEntitled && ( + + + + + + )} - - - - - -
+ + + + + +
- - - - - - - + + + + + -
- - - - - form.setFieldValue("icon", value)} - /> - -
- - - - - - - - - +
+ + + + + form.setFieldValue("icon", value)} + /> + +
+ + + + + + + + + ); }; diff --git a/site/src/router.tsx b/site/src/router.tsx index 6e6fe630f7188..5ee3537575cb7 100644 --- a/site/src/router.tsx +++ b/site/src/router.tsx @@ -37,6 +37,9 @@ const DeploymentSettingsProvider = lazy( const OrganizationSettingsLayout = lazy( () => import("./modules/management/OrganizationSettingsLayout"), ); +const OrganizationSidebarLayout = lazy( + () => import("./modules/management/OrganizationSidebarLayout"), +); const CliAuthenticationPage = lazy( () => import("./pages/CliAuthPage/CliAuthPage"), ); @@ -427,9 +430,8 @@ export const router = createBrowserRouter( {/* General settings for the default org can omit the organization name */} } /> - - } /> - } /> + }> + } /> {groupsRouter()} } /> @@ -441,6 +443,7 @@ export const router = createBrowserRouter( element={} /> } /> + } /> From 92d35cef919fbfc2e899bb5bd83a9e2d96b506b4 Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Wed, 18 Dec 2024 22:41:48 +0000 Subject: [PATCH 15/38] fix: remove margin left --- site/src/modules/management/OrganizationSidebarView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/modules/management/OrganizationSidebarView.tsx b/site/src/modules/management/OrganizationSidebarView.tsx index 2a33af6f39d17..64869160c7f59 100644 --- a/site/src/modules/management/OrganizationSidebarView.tsx +++ b/site/src/modules/management/OrganizationSidebarView.tsx @@ -193,7 +193,7 @@ const OrganizationSettingsNavigation: FC< return ( <> {active && ( -
+
{organization.permissions.editOrganization && ( Settings From e5cb90de76fa6e505f874d143501270167490af7 Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Thu, 19 Dec 2024 17:13:41 +0000 Subject: [PATCH 16/38] fix: e2e test fixes --- site/e2e/tests/organizationGroups.spec.ts | 2 +- site/e2e/tests/organizationMembers.spec.ts | 2 +- site/e2e/tests/organizations.spec.ts | 10 ++++++++++ .../src/modules/management/OrganizationSidebarView.tsx | 5 ----- .../OrganizationSettingsPage.tsx | 2 +- 5 files changed, 13 insertions(+), 8 deletions(-) diff --git a/site/e2e/tests/organizationGroups.spec.ts b/site/e2e/tests/organizationGroups.spec.ts index e774de2a7491f..2d0a41acafc02 100644 --- a/site/e2e/tests/organizationGroups.spec.ts +++ b/site/e2e/tests/organizationGroups.spec.ts @@ -23,7 +23,7 @@ test("create group", async ({ page }) => { await page.goto(`/organizations/${org.name}`); // Navigate to groups page - await page.getByText("Groups").click(); + await page.getByRole("link", { name: "Groups" }).click(); await expect(page).toHaveTitle(`Groups - Org ${org.name} - Coder`); // Create a new group diff --git a/site/e2e/tests/organizationMembers.spec.ts b/site/e2e/tests/organizationMembers.spec.ts index de20ebd9778e7..9edb2eb922ab8 100644 --- a/site/e2e/tests/organizationMembers.spec.ts +++ b/site/e2e/tests/organizationMembers.spec.ts @@ -21,7 +21,7 @@ test("add and remove organization member", async ({ page }) => { const { displayName } = await createOrganization(page); // Navigate to members page - await page.getByText("Members").click(); + await page.getByRole("link", { name: "Members" }).click(); await expect(page).toHaveTitle(`Members - ${displayName} - Coder`); // Add a user to the org diff --git a/site/e2e/tests/organizations.spec.ts b/site/e2e/tests/organizations.spec.ts index 268640f28ff29..d50b952282dd4 100644 --- a/site/e2e/tests/organizations.spec.ts +++ b/site/e2e/tests/organizations.spec.ts @@ -29,6 +29,10 @@ test("create and delete organization", async ({ page }) => { await expectUrl(page).toHavePathName(`/organizations/${name}`); await expect(page.getByText("Organization created.")).toBeVisible(); + await page.goto(`/organizations/${name}/settings`, { + waitUntil: "domcontentloaded", + }); + const newName = randomName(); await page.getByLabel("Slug").fill(newName); await page.getByLabel("Description").fill(`Org description ${newName}`); @@ -38,6 +42,12 @@ test("create and delete organization", async ({ page }) => { await expectUrl(page).toHavePathName(`/organizations/${newName}`); await expect(page.getByText("Organization settings updated.")).toBeVisible(); + await page.goto(`/organizations/${newName}/settings`, { + waitUntil: "domcontentloaded", + }); + // Expect to be redirected when renaming the organization + await expectUrl(page).toHavePathName(`/organizations/${newName}/settings`); + await page.getByRole("button", { name: "Delete this organization" }).click(); const dialog = page.getByTestId("dialog"); await dialog.getByLabel("Name").fill(newName); diff --git a/site/src/modules/management/OrganizationSidebarView.tsx b/site/src/modules/management/OrganizationSidebarView.tsx index 64869160c7f59..29247b71efc5f 100644 --- a/site/src/modules/management/OrganizationSidebarView.tsx +++ b/site/src/modules/management/OrganizationSidebarView.tsx @@ -194,11 +194,6 @@ const OrganizationSettingsNavigation: FC< <> {active && (
- {organization.permissions.editOrganization && ( - - Settings - - )} {organization.permissions.editMembers && ( Members diff --git a/site/src/pages/ManagementSettingsPage/OrganizationSettingsPage.tsx b/site/src/pages/ManagementSettingsPage/OrganizationSettingsPage.tsx index 9b80db4503f44..698f2ee75822f 100644 --- a/site/src/pages/ManagementSettingsPage/OrganizationSettingsPage.tsx +++ b/site/src/pages/ManagementSettingsPage/OrganizationSettingsPage.tsx @@ -89,7 +89,7 @@ const OrganizationSettingsPage: FC = () => { organizationId: organization.id, req: values, }); - navigate(`/organizations/${updatedOrganization.name}`); + navigate(`/organizations/${updatedOrganization.name}/settings`); displaySuccess("Organization settings updated."); }} onDeleteOrganization={() => { From 8ada640c71e0009b168df841c3af859ab3ea75eb Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Thu, 19 Dec 2024 22:43:14 +0000 Subject: [PATCH 17/38] chore: improve styles --- .../modules/management/DeploymentSettingsLayout.tsx | 4 ++-- .../modules/management/OrganizationSidebarLayout.tsx | 2 +- .../src/modules/management/OrganizationSidebarView.tsx | 10 +++++----- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/site/src/modules/management/DeploymentSettingsLayout.tsx b/site/src/modules/management/DeploymentSettingsLayout.tsx index 65c2e70ea3333..676a24c936246 100644 --- a/site/src/modules/management/DeploymentSettingsLayout.tsx +++ b/site/src/modules/management/DeploymentSettingsLayout.tsx @@ -39,8 +39,8 @@ const DeploymentSettingsLayout: FC = () => {
-
-
+
+
}> diff --git a/site/src/modules/management/OrganizationSidebarLayout.tsx b/site/src/modules/management/OrganizationSidebarLayout.tsx index 3d69a85159a56..279ed61186bdc 100644 --- a/site/src/modules/management/OrganizationSidebarLayout.tsx +++ b/site/src/modules/management/OrganizationSidebarLayout.tsx @@ -5,7 +5,7 @@ import { OrganizationSidebar } from "./OrganizationSidebar"; const OrganizationSidebarLayout: FC = () => { return ( -
+
}> diff --git a/site/src/modules/management/OrganizationSidebarView.tsx b/site/src/modules/management/OrganizationSidebarView.tsx index 29247b71efc5f..e00ab91b4a1fe 100644 --- a/site/src/modules/management/OrganizationSidebarView.tsx +++ b/site/src/modules/management/OrganizationSidebarView.tsx @@ -104,7 +104,7 @@ const OrganizationsSettingsNavigation: FC< - + {organizations.map((organization) => ( -
- + { + setIsPopoverOpen(false); + }} + > + + {organization.display_name || organization.name} + + + ))} +
)} + {permissions.createOrganization && ( + + )} From 4361c5cf0c5d8137e060c9150d04cb80e16f7740 Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Fri, 3 Jan 2025 11:24:03 +0000 Subject: [PATCH 23/38] chore: update for mobile --- .../src/pages/ManagementSettingsPage/CreateOrganizationPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/pages/ManagementSettingsPage/CreateOrganizationPage.tsx b/site/src/pages/ManagementSettingsPage/CreateOrganizationPage.tsx index 3bf26f2ee95b0..f49f9db79edf4 100644 --- a/site/src/pages/ManagementSettingsPage/CreateOrganizationPage.tsx +++ b/site/src/pages/ManagementSettingsPage/CreateOrganizationPage.tsx @@ -18,7 +18,7 @@ const CreateOrganizationPage: FC = () => { const error = createOrganizationMutation.error; return ( -
+
Date: Fri, 3 Jan 2025 11:26:05 +0000 Subject: [PATCH 24/38] fix: remove link for organization breadcrumb --- site/src/modules/management/OrganizationSettingsLayout.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/site/src/modules/management/OrganizationSettingsLayout.tsx b/site/src/modules/management/OrganizationSettingsLayout.tsx index ba29ba950a39a..01e1776a18a44 100644 --- a/site/src/modules/management/OrganizationSettingsLayout.tsx +++ b/site/src/modules/management/OrganizationSettingsLayout.tsx @@ -81,13 +81,12 @@ const OrganizationSettingsLayout: FC = () => { - Organizations - + {organization && ( <> From d052c4036a495879bf66dffaf3b736c5fca805b9 Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Fri, 3 Jan 2025 15:18:52 +0000 Subject: [PATCH 25/38] feat: improve design of create organization page --- .../management/OrganizationSettingsLayout.tsx | 4 +- .../management/OrganizationSidebarView.tsx | 2 +- .../CreateOrganizationPageView.tsx | 96 +++++++++---------- 3 files changed, 47 insertions(+), 55 deletions(-) diff --git a/site/src/modules/management/OrganizationSettingsLayout.tsx b/site/src/modules/management/OrganizationSettingsLayout.tsx index 01e1776a18a44..d2d25cc4a41bd 100644 --- a/site/src/modules/management/OrganizationSettingsLayout.tsx +++ b/site/src/modules/management/OrganizationSettingsLayout.tsx @@ -81,9 +81,7 @@ const OrganizationSettingsLayout: FC = () => { - + Organizations diff --git a/site/src/modules/management/OrganizationSidebarView.tsx b/site/src/modules/management/OrganizationSidebarView.tsx index fea003e360507..1f638006bb87e 100644 --- a/site/src/modules/management/OrganizationSidebarView.tsx +++ b/site/src/modules/management/OrganizationSidebarView.tsx @@ -120,7 +120,7 @@ const OrganizationsSettingsNavigation: FC<
-
+
{Boolean(error) && !isApiValidationError(error) && (
@@ -106,7 +102,7 @@ export const CreateOrganizationPageView: FC<
-

New Organization

+

New Organization

Organize your deployment into multiple platform teams with unique provisioners, templates, groups, and members. @@ -123,57 +119,55 @@ export const CreateOrganizationPageView: FC< /> -

- -
+ + + + form.setFieldValue("icon", value)} + /> +
+
+ - - + +
+
From 51d84e2ca9417949d27cbf15ad65e063d1a668e8 Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Fri, 3 Jan 2025 15:50:45 +0000 Subject: [PATCH 26/38] feat: truncate long organization names --- .../src/modules/management/OrganizationSidebarView.tsx | 10 +++++++--- .../CreateOrganizationPageView.tsx | 2 +- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/site/src/modules/management/OrganizationSidebarView.tsx b/site/src/modules/management/OrganizationSidebarView.tsx index 1f638006bb87e..cc3c05a1081e8 100644 --- a/site/src/modules/management/OrganizationSidebarView.tsx +++ b/site/src/modules/management/OrganizationSidebarView.tsx @@ -97,7 +97,7 @@ const OrganizationsSettingsNavigation: FC< aria-expanded={isPopoverOpen} className="w-60 justify-between p-2 h-11" > -
+
{activeOrganization && ( )} - {activeOrganization?.display_name || activeOrganization?.name} + + {activeOrganization?.display_name || activeOrganization?.name} +
@@ -133,7 +135,9 @@ const OrganizationsSettingsNavigation: FC< src={organization.icon} fallback={organization.display_name} /> - {organization.display_name || organization.name} + + {organization?.display_name || organization?.name} + ))} diff --git a/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.tsx b/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.tsx index b460617696920..9856eecaf5e3d 100644 --- a/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.tsx +++ b/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.tsx @@ -101,7 +101,7 @@ export const CreateOrganizationPageView: FC< -
+

New Organization

Organize your deployment into multiple platform teams with unique From b6f9e4de8003c027e8fb46009a6ca11ea6fd8800 Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Fri, 3 Jan 2025 16:10:20 +0000 Subject: [PATCH 27/38] chore: update styling for premium banner --- .../CreateOrganizationPageView.tsx | 109 +++++++++--------- 1 file changed, 56 insertions(+), 53 deletions(-) diff --git a/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.tsx b/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.tsx index 9856eecaf5e3d..8107460a66760 100644 --- a/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.tsx +++ b/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.tsx @@ -73,7 +73,7 @@ export const CreateOrganizationPageView: FC< Go Back

-
+
{Boolean(error) && !isApiValidationError(error) && (
@@ -109,65 +109,68 @@ export const CreateOrganizationPageView: FC<

- - +
+ +
-
-
+ - - - - form.setFieldValue("icon", value)} - /> -
-
- - -
-
+ + + + form.setFieldValue("icon", value)} + /> + +
+ + +
+ +
From afe7b50f64d0ce486ee721ee7973c7da8d7b4d4a Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Fri, 3 Jan 2025 16:34:55 +0000 Subject: [PATCH 28/38] fix: handle display of more than 6 orgs --- site/src/components/Command/Command.tsx | 2 +- .../management/OrganizationSidebarView.tsx | 26 +++++++++++-------- 2 files changed, 16 insertions(+), 12 deletions(-) diff --git a/site/src/components/Command/Command.tsx b/site/src/components/Command/Command.tsx index a322fb97a57ad..c67aa9b39ec44 100644 --- a/site/src/components/Command/Command.tsx +++ b/site/src/components/Command/Command.tsx @@ -69,7 +69,7 @@ export const CommandList = forwardRef< >(({ className, ...props }, ref) => ( )); diff --git a/site/src/modules/management/OrganizationSidebarView.tsx b/site/src/modules/management/OrganizationSidebarView.tsx index cc3c05a1081e8..ab518f99cd536 100644 --- a/site/src/modules/management/OrganizationSidebarView.tsx +++ b/site/src/modules/management/OrganizationSidebarView.tsx @@ -117,7 +117,7 @@ const OrganizationsSettingsNavigation: FC< {organizations.length > 1 && ( - <> +
{organizations.map((organization) => ( ))} -
- +
)} {permissions.createOrganization && ( - + <> + {organizations.length > 1 && ( +
+ )} + + )} From b0d7c4a7f3fccd3aeeaec014aaf7ca175eda1096 Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Fri, 3 Jan 2025 23:19:03 +0000 Subject: [PATCH 29/38] feat: add story --- .../OrganizationSidebarView.stories.tsx | 84 +++++++++++++++++++ 1 file changed, 84 insertions(+) diff --git a/site/src/modules/management/OrganizationSidebarView.stories.tsx b/site/src/modules/management/OrganizationSidebarView.stories.tsx index 9ee19e08983f5..4f1b17a27c181 100644 --- a/site/src/modules/management/OrganizationSidebarView.stories.tsx +++ b/site/src/modules/management/OrganizationSidebarView.stories.tsx @@ -71,6 +71,90 @@ export const NoCreateOrg: Story = { }, }; +export const OverflowDropdown: Story = { + args: { + activeOrganization: { + ...MockOrganization, + permissions: { createOrganization: true }, + }, + permissions: { + ...MockPermissions, + createOrganization: true, + }, + organizations: [ + { + ...MockOrganization, + permissions: {}, + }, + { + ...MockOrganization2, + permissions: {}, + }, + { + id: "my-organization-3-id", + name: "my-organization-3", + display_name: "My Organization 3", + description: "Another organization that gets used for stuff.", + icon: "/emojis/1f957.png", + created_at: "", + updated_at: "", + is_default: false, + permissions: {}, + }, + { + id: "my-organization-4-id", + name: "my-organization-4", + display_name: "My Organization 4", + description: "Another organization that gets used for stuff.", + icon: "/emojis/1f957.png", + created_at: "", + updated_at: "", + is_default: false, + permissions: {}, + }, + { + id: "my-organization-5-id", + name: "my-organization-5", + display_name: "My Organization 5", + description: "Another organization that gets used for stuff.", + icon: "/emojis/1f957.png", + created_at: "", + updated_at: "", + is_default: false, + permissions: {}, + }, + { + id: "my-organization-6-id", + name: "my-organization-6", + display_name: "My Organization 6", + description: "Another organization that gets used for stuff.", + icon: "/emojis/1f957.png", + created_at: "", + updated_at: "", + is_default: false, + permissions: {}, + }, + { + id: "my-organization-7-id", + name: "my-organization-7", + display_name: "My Organization 7", + description: "Another organization that gets used for stuff.", + icon: "/emojis/1f957.png", + created_at: "", + updated_at: "", + is_default: false, + permissions: {}, + }, + ], + }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + await userEvent.click( + canvas.getByRole("button", { name: /My Organization/i }), + ); + }, +}; + export const NoPermissions: Story = { args: { activeOrganization: { From e2dbc313d996b242cac669fad048c8b769039fdf Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Fri, 3 Jan 2025 23:23:01 +0000 Subject: [PATCH 30/38] fix: improve outline display --- site/src/modules/management/OrganizationSidebarView.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/site/src/modules/management/OrganizationSidebarView.tsx b/site/src/modules/management/OrganizationSidebarView.tsx index ab518f99cd536..2aa5cfb054e95 100644 --- a/site/src/modules/management/OrganizationSidebarView.tsx +++ b/site/src/modules/management/OrganizationSidebarView.tsx @@ -122,7 +122,8 @@ const OrganizationsSettingsNavigation: FC< Create Organization From 35788c0446f6b7465752a60a7e1506faae41af4d Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Sat, 4 Jan 2025 11:17:16 +0000 Subject: [PATCH 31/38] fix: do not wrap command item with link --- site/src/components/Command/Command.tsx | 2 +- .../management/OrganizationSidebarView.tsx | 41 +++++++++---------- 2 files changed, 21 insertions(+), 22 deletions(-) diff --git a/site/src/components/Command/Command.tsx b/site/src/components/Command/Command.tsx index c67aa9b39ec44..42c3d536ee95b 100644 --- a/site/src/components/Command/Command.tsx +++ b/site/src/components/Command/Command.tsx @@ -119,7 +119,7 @@ export const CommandItem = forwardRef< @@ -114,33 +116,30 @@ const OrganizationsSettingsNavigation: FC< + {/* - + {organizations.length > 1 && ( @@ -149,14 +149,15 @@ const OrganizationsSettingsNavigation: FC< {organizations.length > 1 && (
)} - + { + setIsPopoverOpen(false); + navigate("/organizations/new"); + }} + > + Create Organization + )} From 43690ad660df05e677611834a779dad577b6aa61 Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Tue, 7 Jan 2025 09:55:31 +0000 Subject: [PATCH 34/38] fix: do not highlight background on selected --- site/src/modules/management/OrganizationSidebarView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/modules/management/OrganizationSidebarView.tsx b/site/src/modules/management/OrganizationSidebarView.tsx index 9746d1001a998..16a896bf9ef53 100644 --- a/site/src/modules/management/OrganizationSidebarView.tsx +++ b/site/src/modules/management/OrganizationSidebarView.tsx @@ -150,7 +150,7 @@ const OrganizationsSettingsNavigation: FC<
)} { setIsPopoverOpen(false); navigate("/organizations/new"); From 14ba63f36dca01c19a1287cf95cdc3b71a73e48f Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Wed, 8 Jan 2025 12:24:09 +0000 Subject: [PATCH 35/38] fix: ensure the popover closes when navigating to a new page --- site/src/modules/management/OrganizationSidebarView.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/site/src/modules/management/OrganizationSidebarView.tsx b/site/src/modules/management/OrganizationSidebarView.tsx index 16a896bf9ef53..d52b740d4a542 100644 --- a/site/src/modules/management/OrganizationSidebarView.tsx +++ b/site/src/modules/management/OrganizationSidebarView.tsx @@ -22,7 +22,6 @@ import { ChevronDown, Plus } from "lucide-react"; import { useDashboard } from "modules/dashboard/useDashboard"; import { type FC, useState } from "react"; import { useNavigate } from "react-router-dom"; -import { Link } from "react-router-dom"; export interface OrganizationWithPermissions extends Organization { permissions: AuthorizationResponse; @@ -153,7 +152,9 @@ const OrganizationsSettingsNavigation: FC< className="flex justify-center data-[selected=true]:bg-transparent" onSelect={() => { setIsPopoverOpen(false); - navigate("/organizations/new"); + setTimeout(() => { + navigate("/organizations/new"); + }, 200); }} > Create Organization From f029bb433f1cd8291ef5c632169f34df716089e6 Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Wed, 8 Jan 2025 12:24:19 +0000 Subject: [PATCH 36/38] chore: cleanup --- site/src/components/Command/Command.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/components/Command/Command.tsx b/site/src/components/Command/Command.tsx index 42c3d536ee95b..bbdc5684cb19d 100644 --- a/site/src/components/Command/Command.tsx +++ b/site/src/components/Command/Command.tsx @@ -69,7 +69,7 @@ export const CommandList = forwardRef< >(({ className, ...props }, ref) => ( )); From ab15e754d52ec06e0ac507c7c88c276ac9dc9d72 Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Wed, 8 Jan 2025 12:38:30 +0000 Subject: [PATCH 37/38] fix: format --- .../ManagementSettingsPage/CreateOrganizationPageView.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.tsx b/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.tsx index 8107460a66760..705c0be2eb5a9 100644 --- a/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.tsx +++ b/site/src/pages/ManagementSettingsPage/CreateOrganizationPageView.tsx @@ -154,10 +154,7 @@ export const CreateOrganizationPageView: FC< />
- From b66bb7994310f0e362244adfbf5ee79d5bc4e599 Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Wed, 8 Jan 2025 12:52:07 +0000 Subject: [PATCH 38/38] fix: test --- site/e2e/tests/organizations.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/e2e/tests/organizations.spec.ts b/site/e2e/tests/organizations.spec.ts index d50b952282dd4..5a1cf4ba82c0c 100644 --- a/site/e2e/tests/organizations.spec.ts +++ b/site/e2e/tests/organizations.spec.ts @@ -39,7 +39,7 @@ test("create and delete organization", async ({ page }) => { await page.getByRole("button", { name: /save/i }).click(); // Expect to be redirected when renaming the organization - await expectUrl(page).toHavePathName(`/organizations/${newName}`); + await expectUrl(page).toHavePathName(`/organizations/${newName}/settings`); await expect(page.getByText("Organization settings updated.")).toBeVisible(); await page.goto(`/organizations/${newName}/settings`, {