Jun 17, 2024 · Jun 3, 2024 · Jun 3, 2024 · Jun 4, 2024 · Jun 6, 2024 · Jun 6, 2024
diff --git a/codersdk/organizations.go b/codersdk/organizations.go
 type CreateOrganizationRequest struct {
 Name string `json:"name" validate:"required,organization_name"`
 // DisplayName will default to the same value as `Name` if not provided.
 DisplayName string `json:"display_name" validate:"omitempty,organization_display_name"`
 DisplayName string `json:"display_name,omitempty" validate:"omitempty,organization_display_name"`
 Description string `json:"description,omitempty"`
 Icon        string `json:"icon,omitempty"`
 }
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
    return response.data;
  };

  createOrganization = async (params: TypesGen.CreateOrganizationRequest) => {
    const response = await this.axios.post<TypesGen.Organization>(
      "/api/v2/organizations",
      params,
    );
    return response.data;
  };

  updateOrganization = async (
    orgId: string,
    params: TypesGen.UpdateOrganizationRequest,
  ) => {
    const response = await this.axios.patch<TypesGen.Organization>(
      `/api/v2/organizations/${orgId}`,
      params,
    );
    return response.data;
  };

  deleteOrganization = async (orgId: string) => {
    await this.axios.delete<TypesGen.Organization>(
      `/api/v2/organizations/${orgId}`,
    );
  };

  getOrganization = async (
    organizationId: string,
  ): Promise<TypesGen.Organization> => {
diff --git a/site/src/api/queries/organizations.ts b/site/src/api/queries/organizations.ts
 import type { QueryClient } from "react-query";
 import { API } from "api/api";
 import type {
  CreateOrganizationRequest,
  UpdateOrganizationRequest,
 } from "api/typesGenerated";
 import { meKey, myOrganizationsKey } from "./users";

 export const createOrganization = (queryClient: QueryClient) => {
  return {
    mutationFn: (params: CreateOrganizationRequest) =>
      API.createOrganization(params),

    onSuccess: async () => {
      await queryClient.invalidateQueries(meKey);
      await queryClient.invalidateQueries(myOrganizationsKey);
    },
  };
 };

 interface UpdateOrganizationVariables {
  orgId: string;
  req: UpdateOrganizationRequest;
 }

 export const updateOrganization = (queryClient: QueryClient) => {
  return {
    mutationFn: (variables: UpdateOrganizationVariables) =>
      API.updateOrganization(variables.orgId, variables.req),

    onSuccess: async () => {
      await queryClient.invalidateQueries(myOrganizationsKey);
    },
  };
 };

 export const deleteOrganization = (queryClient: QueryClient) => {
  return {
    mutationFn: (orgId: string) => API.deleteOrganization(orgId),

    onSuccess: async () => {
      await queryClient.invalidateQueries(meKey);
      await queryClient.invalidateQueries(myOrganizationsKey);
    },
  };
 };
diff --git a/site/src/api/queries/users.ts b/site/src/api/queries/users.ts
  };
 };

 const meKey = ["me"];
 exportconst meKey = ["me"];

 export const me = (metadata: MetadataState<User>) => {
  return cachedQuery({
  };
 };

 export const myOrganizationsKey = ["organizations", "me"] as const;

 export const myOrganizations = () => {
  return {
    queryKey:["organizations", "me"],
    queryKey:myOrganizationsKey,
    queryFn: () => API.getOrganizations(),
  };
 };
diff --git a/site/src/api/typesGenerated.ts b/site/src/api/typesGenerated.ts
diff --git a/site/src/components/FormFooter/FormFooter.stories.tsx b/site/src/components/FormFooter/FormFooter.stories.tsx
 import { action } from "@storybook/addon-actions";
 import type { Meta, StoryObj } from "@storybook/react";
 import { FormFooter } from "./FormFooter";

 const meta: Meta<typeof FormFooter> = {
  title: "components/FormFooter",
  component: FormFooter,
  args: {
    isLoading: false,
    onCancel: action("onCancel"),
  },
 };

 export default meta;
 type Story = StoryObj<typeof FormFooter>;

 export const Ready: Story = {
  args: {},
 };

 export const NoCancel: Story = {
  args: {
 isLoading: false,
 onCancel: undefined,
  },
 };

 export const Custom: Story = {
  args: {
    isLoading: false,
    submitLabel: "Create",
  },
 };
diff --git a/site/src/components/FormFooter/FormFooter.tsx b/site/src/components/FormFooter/FormFooter.tsx
 }

 export interface FormFooterProps {
  onCancel: () => void;
  onCancel?: () => void;
  isLoading: boolean;
  styles?: FormFooterStyles;
  submitLabel?: string;
      >
        {submitLabel}
      </LoadingButton>
      <Button
        size="large"
        type="button"
        css={styles.button}
        onClick={onCancel}
        tabIndex={0}
      >
        {Language.cancelLabel}
      </Button>
      {onCancel && (
        <Button
          size="large"
          type="button"
          css={styles.button}
          onClick={onCancel}
          tabIndex={0}
        >
          {Language.cancelLabel}
        </Button>
      )}
      {extraActions}
    </div>
  );
diff --git a/site/src/components/Margins/Margins.tsx b/site/src/components/Margins/Margins.tsx
  small: containerWidth / 3,
 };

 export const Margins: FC<JSX.IntrinsicElements["div"] & { size?: Size }> = ({
 type MarginsProps = JSX.IntrinsicElements["div"] & {
  size?: Size;
 };

 export const Margins: FC<MarginsProps> = ({
  size = "regular",
  children,
  ...divProps
 }) => {
  const maxWidth = widthBySize[size];
  return (
    <div
      {...divProps}
      css={{
        margin: "0 auto",
        marginLeft: "auto",
        marginRight: "auto",
        maxWidth: maxWidth,
        padding: `0 ${sidePadding}px`,
        paddingLeft: sidePadding,
        paddingRight: sidePadding,
        width: "100%",
      }}
    />
    >
      {children}
    </div>
  );
 };
diff --git a/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx b/site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx
 import { USERS_LINK } from "modules/navigation";

 interface DeploymentDropdownProps {
  canViewAuditLog: boolean;
  canViewDeployment: boolean;
  canViewOrganizations: boolean;
  canViewAllUsers: boolean;
  canViewAuditLog: boolean;
  canViewHealth: boolean;
 }

 export const DeploymentDropdown: FC<DeploymentDropdownProps> = ({
  canViewAuditLog,
  canViewDeployment,
  canViewOrganizations,
  canViewAllUsers,
  canViewAuditLog,
  canViewHealth,
 }) => {
  const theme = useTheme();

  if (
    !canViewAuditLog &&
    !canViewOrganizations &&
    !canViewDeployment &&
    !canViewAllUsers &&
    !canViewHealth
        }}
      >
        <DeploymentDropdownContent
          canViewAuditLog={canViewAuditLog}
          canViewDeployment={canViewDeployment}
          canViewOrganizations={canViewOrganizations}
          canViewAllUsers={canViewAllUsers}
          canViewAuditLog={canViewAuditLog}
          canViewHealth={canViewHealth}
        />
      </PopoverContent>
 };

 const DeploymentDropdownContent: FC<DeploymentDropdownProps> = ({
  canViewAuditLog,
  canViewDeployment,
  canViewOrganizations,
  canViewAllUsers,
  canViewAuditLog,
  canViewHealth,
 }) => {
  const popover = usePopover();
          Settings
        </MenuItem>
      )}
      {canViewOrganizations && (
        <MenuItem
          component={NavLink}
          to="/organizations"
          css={styles.menuItem}
          onClick={onPopoverClose}
        >
          Organizations
        </MenuItem>
      )}
      {canViewAllUsers && (
        <MenuItem
          component={NavLink}
diff --git a/site/src/modules/dashboard/Navbar/Navbar.tsx b/site/src/modules/dashboard/Navbar/Navbar.tsx
  const { metadata } = useEmbeddedMetadata();
  const buildInfoQuery = useQuery(buildInfo(metadata["build-info"]));

  const { appearance } = useDashboard();
  const { appearance, experiments } = useDashboard();
  const { user: me, permissions, signOut } = useAuthenticated();
  const featureVisibility = useFeatureVisibility();
  const canViewAuditLog =
      buildInfo={buildInfoQuery.data}
      supportLinks={appearance.support_links}
      onSignOut={signOut}
      canViewAuditLog={canViewAuditLog}
      canViewDeployment={canViewDeployment}
      canViewOrganizations={experiments.includes("multi-organization")}
      canViewAllUsers={canViewAllUsers}
      canViewHealth={canViewHealth}
      canViewAuditLog={canViewAuditLog}
      proxyContextValue={proxyContextValue}
    />
  );
diff --git a/site/src/modules/dashboard/Navbar/NavbarView.test.tsx b/site/src/modules/dashboard/Navbar/NavbarView.test.tsx
        proxyContextValue={proxyContextValue}
        user={MockUser}
        onSignOut={noop}
        canViewAuditLog
        canViewDeployment
        canViewOrganizations
        canViewAllUsers
        canViewHealth
        canViewAuditLog
      />,
    );
    const workspacesLink = await screen.findByText(navLanguage.workspaces);
        proxyContextValue={proxyContextValue}
        user={MockUser}
        onSignOut={noop}
        canViewAuditLog
        canViewDeployment
        canViewOrganizations
        canViewAllUsers
        canViewHealth
        canViewAuditLog
      />,
    );
    const templatesLink = await screen.findByText(navLanguage.templates);
        proxyContextValue={proxyContextValue}
        user={MockUser}
        onSignOut={noop}
        canViewAuditLog
        canViewDeployment
        canViewOrganizations
        canViewAllUsers
        canViewHealth
        canViewAuditLog
      />,
    );
    const deploymentMenu = await screen.findByText("Deployment");
        proxyContextValue={proxyContextValue}
        user={MockUser}
        onSignOut={noop}
        canViewAuditLog
        canViewDeployment
        canViewOrganizations
        canViewAllUsers
        canViewHealth
        canViewAuditLog
      />,
    );
    const deploymentMenu = await screen.findByText("Deployment");
        proxyContextValue={proxyContextValue}
        user={MockUser}
        onSignOut={noop}
        canViewAuditLog
        canViewDeployment
        canViewOrganizations
        canViewAllUsers
        canViewHealth
        canViewAuditLog
      />,
    );
    const deploymentMenu = await screen.findByText("Deployment");
Original file line number	Diff line number	Diff line change
Expand Up		@@ -61,7 +61,7 @@ type OrganizationMember struct {
		type CreateOrganizationRequest struct {
		Name string `json:"name" validate:"required,organization_name"`
		// DisplayName will default to the same value as `Name` if not provided.
		DisplayName string `json:"display_name" validate:"omitempty,organization_display_name"`
		DisplayName string `json:"display_name,omitempty" validate:"omitempty,organization_display_name"`
		Description string `json:"description,omitempty"`
		Icon string `json:"icon,omitempty"`
		}
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -505,6 +505,31 @@ class ApiMethods {
		return response.data;
		};

		createOrganization = async (params: TypesGen.CreateOrganizationRequest) => {
		const response = await this.axios.post<TypesGen.Organization>(
		"/api/v2/organizations",
		params,
		);
		return response.data;
		};

		updateOrganization = async (
		orgId: string,
		params: TypesGen.UpdateOrganizationRequest,
		) => {
		const response = await this.axios.patch<TypesGen.Organization>(
		`/api/v2/organizations/${orgId}`,
		params,
		);
		return response.data;
		};

		deleteOrganization = async (orgId: string) => {
		await this.axios.delete<TypesGen.Organization>(
		`/api/v2/organizations/${orgId}`,
		);
		};

		getOrganization = async (
		organizationId: string,
		): Promise<TypesGen.Organization> => {
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,46 @@
		import type { QueryClient } from "react-query";
		import { API } from "api/api";
		import type {
		CreateOrganizationRequest,
		UpdateOrganizationRequest,
		} from "api/typesGenerated";
		import { meKey, myOrganizationsKey } from "./users";

		export const createOrganization = (queryClient: QueryClient) => {
		return {
		mutationFn: (params: CreateOrganizationRequest) =>
		API.createOrganization(params),

		onSuccess: async () => {
		await queryClient.invalidateQueries(meKey);
		await queryClient.invalidateQueries(myOrganizationsKey);
aslilac marked this conversation as resolved. Show resolvedHide resolved
		},
		};
		};

		interface UpdateOrganizationVariables {
		orgId: string;
		req: UpdateOrganizationRequest;
		}

		export const updateOrganization = (queryClient: QueryClient) => {
		return {
		mutationFn: (variables: UpdateOrganizationVariables) =>
		API.updateOrganization(variables.orgId, variables.req),

		onSuccess: async () => {
		await queryClient.invalidateQueries(myOrganizationsKey);
aslilac marked this conversation as resolved. Show resolvedHide resolved
		},
		};
		};

		export const deleteOrganization = (queryClient: QueryClient) => {
		return {
		mutationFn: (orgId: string) => API.deleteOrganization(orgId),

		onSuccess: async () => {
		await queryClient.invalidateQueries(meKey);
		await queryClient.invalidateQueries(myOrganizationsKey);
		},
		};
		};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -124,7 +124,7 @@ export const authMethods = () => {
		};
		};

		const meKey = ["me"];
		exportconst meKey = ["me"];

		export const me = (metadata: MetadataState<User>) => {
		return cachedQuery({
Expand DownExpand Up		@@ -250,9 +250,11 @@ export const updateAppearanceSettings = (
		};
		};

		export const myOrganizationsKey = ["organizations", "me"] as const;

		export const myOrganizations = () => {
		return {
		queryKey:["organizations", "me"],
		queryKey:myOrganizationsKey,
		queryFn: () => API.getOrganizations(),
		};
		};
Original file line number	Diff line number	Diff line change
		@@ -1,23 +1,31 @@
		import { action } from "@storybook/addon-actions";
		import type { Meta, StoryObj } from "@storybook/react";
		import { FormFooter } from "./FormFooter";

		const meta: Meta<typeof FormFooter> = {
		title: "components/FormFooter",
		component: FormFooter,
		args: {
		isLoading: false,
		onCancel: action("onCancel"),
		},
		};

		export default meta;
		type Story = StoryObj<typeof FormFooter>;

		export const Ready: Story = {
		args: {},
		};

		export const NoCancel: Story = {
		args: {
		isLoading: false,
		onCancel: undefined,
		},
		};

		export const Custom: Story = {
		args: {
		isLoading: false,
		submitLabel: "Create",
		},
		};
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -14,7 +14,7 @@ export interface FormFooterStyles {
		}

		export interface FormFooterProps {
		onCancel: () => void;
		onCancel?: () => void;
		isLoading: boolean;
		styles?: FormFooterStyles;
		submitLabel?: string;
Expand DownExpand Up		@@ -45,15 +45,17 @@ export const FormFooter: FC<FormFooterProps> = ({
		>
		{submitLabel}
		</LoadingButton>
		<Button
		size="large"
		type="button"
		css={styles.button}
		onClick={onCancel}
		tabIndex={0}
		>
		{Language.cancelLabel}
		</Button>
		{onCancel && (
		<Button
		size="large"
		type="button"
		css={styles.button}
		onClick={onCancel}
		tabIndex={0}
		>
		{Language.cancelLabel}
		</Button>
		)}
		{extraActions}
		</div>
		);
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -13,20 +13,29 @@ const widthBySize: Record<Size, number> = {
		small: containerWidth / 3,
		};

		export const Margins: FC<JSX.IntrinsicElements["div"] & { size?: Size }> = ({
		type MarginsProps = JSX.IntrinsicElements["div"] & {
		size?: Size;
		};

		export const Margins: FC<MarginsProps> = ({
		size = "regular",
		children,
aslilac marked this conversation as resolved. Show resolvedHide resolved
		...divProps
		}) => {
		const maxWidth = widthBySize[size];
		return (
		<div
		{...divProps}
		css={{
		margin: "0 auto",
		marginLeft: "auto",
		marginRight: "auto",
		maxWidth: maxWidth,
		padding: `0 ${sidePadding}px`,
		paddingLeft: sidePadding,
		paddingRight: sidePadding,
		width: "100%",
		}}
		/>
		>
		{children}
		</div>
		);
		};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -13,22 +13,25 @@ import {
		import { USERS_LINK } from "modules/navigation";

		interface DeploymentDropdownProps {
		canViewAuditLog: boolean;
		canViewDeployment: boolean;
		canViewOrganizations: boolean;
		canViewAllUsers: boolean;
		canViewAuditLog: boolean;
		canViewHealth: boolean;
aslilac marked this conversation as resolved. Show resolvedHide resolved
		}

		export const DeploymentDropdown: FC<DeploymentDropdownProps> = ({
		canViewAuditLog,
		canViewDeployment,
		canViewOrganizations,
		canViewAllUsers,
		canViewAuditLog,
		canViewHealth,
		}) => {
		const theme = useTheme();

		if (
		!canViewAuditLog &&
		!canViewOrganizations &&
		!canViewDeployment &&
		!canViewAllUsers &&
		!canViewHealth
Expand DownExpand Up		@@ -64,9 +67,10 @@ export const DeploymentDropdown: FC<DeploymentDropdownProps> = ({
		}}
		>
		<DeploymentDropdownContent
		canViewAuditLog={canViewAuditLog}
		canViewDeployment={canViewDeployment}
		canViewOrganizations={canViewOrganizations}
		canViewAllUsers={canViewAllUsers}
		canViewAuditLog={canViewAuditLog}
		canViewHealth={canViewHealth}
		/>
		</PopoverContent>
Expand All		@@ -75,9 +79,10 @@ export const DeploymentDropdown: FC<DeploymentDropdownProps> = ({
		};

		const DeploymentDropdownContent: FC<DeploymentDropdownProps> = ({
		canViewAuditLog,
		canViewDeployment,
		canViewOrganizations,
		canViewAllUsers,
		canViewAuditLog,
		canViewHealth,
		}) => {
		const popover = usePopover();
Expand All		@@ -96,6 +101,16 @@ const DeploymentDropdownContent: FC<DeploymentDropdownProps> = ({
		Settings
		</MenuItem>
		)}
		{canViewOrganizations && (
		<MenuItem
		component={NavLink}
		to="/organizations"
		css={styles.menuItem}
		onClick={onPopoverClose}
		>
		Organizations
		</MenuItem>
		)}
		{canViewAllUsers && (
		<MenuItem
		component={NavLink}
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -12,7 +12,7 @@ export const Navbar: FC = () => {
		const { metadata } = useEmbeddedMetadata();
		const buildInfoQuery = useQuery(buildInfo(metadata["build-info"]));

		const { appearance } = useDashboard();
		const { appearance, experiments } = useDashboard();
		const { user: me, permissions, signOut } = useAuthenticated();
		const featureVisibility = useFeatureVisibility();
		const canViewAuditLog =
Expand All		@@ -29,10 +29,11 @@ export const Navbar: FC = () => {
		buildInfo={buildInfoQuery.data}
		supportLinks={appearance.support_links}
		onSignOut={signOut}
		canViewAuditLog={canViewAuditLog}
		canViewDeployment={canViewDeployment}
		canViewOrganizations={experiments.includes("multi-organization")}
		canViewAllUsers={canViewAllUsers}
		canViewHealth={canViewHealth}
		canViewAuditLog={canViewAuditLog}
		proxyContextValue={proxyContextValue}
		/>
		);
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -28,10 +28,11 @@ describe("NavbarView", () => {
		proxyContextValue={proxyContextValue}
		user={MockUser}
		onSignOut={noop}
		canViewAuditLog
		canViewDeployment
		canViewOrganizations
		canViewAllUsers
		canViewHealth
		canViewAuditLog
		/>,
		);
		const workspacesLink = await screen.findByText(navLanguage.workspaces);
Expand All		@@ -44,10 +45,11 @@ describe("NavbarView", () => {
		proxyContextValue={proxyContextValue}
		user={MockUser}
		onSignOut={noop}
		canViewAuditLog
		canViewDeployment
		canViewOrganizations
		canViewAllUsers
		canViewHealth
		canViewAuditLog
		/>,
		);
		const templatesLink = await screen.findByText(navLanguage.templates);
Expand All		@@ -60,10 +62,11 @@ describe("NavbarView", () => {
		proxyContextValue={proxyContextValue}
		user={MockUser}
		onSignOut={noop}
		canViewAuditLog
		canViewDeployment
		canViewOrganizations
		canViewAllUsers
		canViewHealth
		canViewAuditLog
		/>,
		);
		const deploymentMenu = await screen.findByText("Deployment");
Expand All		@@ -78,10 +81,11 @@ describe("NavbarView", () => {
		proxyContextValue={proxyContextValue}
		user={MockUser}
		onSignOut={noop}
		canViewAuditLog
		canViewDeployment
		canViewOrganizations
		canViewAllUsers
		canViewHealth
		canViewAuditLog
		/>,
		);
		const deploymentMenu = await screen.findByText("Deployment");
Expand All		@@ -96,10 +100,11 @@ describe("NavbarView", () => {
		proxyContextValue={proxyContextValue}
		user={MockUser}
		onSignOut={noop}
		canViewAuditLog
		canViewDeployment
		canViewOrganizations
		canViewAllUsers
		canViewHealth
		canViewAuditLog
		/>,
		);
		const deploymentMenu = await screen.findByText("Deployment");
Expand Down