coder · aslilac · Jun 17, 2024 · Jun 3, 2024 · Jun 3, 2024 · Jun 4, 2024
diff --git a/codersdk/organizations.go b/codersdk/organizations.go
@@ -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"`
 }

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -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> => {

diff --git a/site/src/api/queries/organizations.ts b/site/src/api/queries/organizations.ts
@@ -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);
+    },
+  };
+};
+
+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
@@ -124,7 +124,7 @@ export const authMethods = () => {
   };
 };
 
-const meKey = ["me"];
+export const meKey = ["me"];
 
 export const me = (metadata: MetadataState<User>) => {
   return cachedQuery({
@@ -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(),
   };
 };
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
@@ -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",
   },
 };

diff --git a/site/src/components/FormFooter/FormFooter.tsx b/site/src/components/FormFooter/FormFooter.tsx
@@ -14,7 +14,7 @@ export interface FormFooterStyles {
 }
 
 export interface FormFooterProps {
-  onCancel: () => void;
+  onCancel?: () => void;
   isLoading: boolean;
   styles?: FormFooterStyles;
   submitLabel?: string;
@@ -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>
   );

diff --git a/site/src/components/Margins/Margins.tsx b/site/src/components/Margins/Margins.tsx
@@ -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,
   ...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
@@ -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;
 }
 
 export const DeploymentDropdown: FC<DeploymentDropdownProps> = ({
-  canViewAuditLog,
   canViewDeployment,
+  canViewOrganizations,
   canViewAllUsers,
+  canViewAuditLog,
   canViewHealth,
 }) => {
   const theme = useTheme();
 
   if (
     !canViewAuditLog &&
+    !canViewOrganizations &&
     !canViewDeployment &&
     !canViewAllUsers &&
     !canViewHealth
@@ -64,9 +67,10 @@ export const DeploymentDropdown: FC<DeploymentDropdownProps> = ({
         }}
       >
         <DeploymentDropdownContent
-          canViewAuditLog={canViewAuditLog}
           canViewDeployment={canViewDeployment}
+          canViewOrganizations={canViewOrganizations}
           canViewAllUsers={canViewAllUsers}
+          canViewAuditLog={canViewAuditLog}
           canViewHealth={canViewHealth}
         />
       </PopoverContent>
@@ -75,9 +79,10 @@ export const DeploymentDropdown: FC<DeploymentDropdownProps> = ({
 };
 
 const DeploymentDropdownContent: FC<DeploymentDropdownProps> = ({
-  canViewAuditLog,
   canViewDeployment,
+  canViewOrganizations,
   canViewAllUsers,
+  canViewAuditLog,
   canViewHealth,
 }) => {
   const popover = usePopover();
@@ -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}

diff --git a/site/src/modules/dashboard/Navbar/Navbar.tsx b/site/src/modules/dashboard/Navbar/Navbar.tsx
@@ -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 =
@@ -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}
     />
   );

diff --git a/site/src/modules/dashboard/Navbar/NavbarView.test.tsx b/site/src/modules/dashboard/Navbar/NavbarView.test.tsx
@@ -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);
@@ -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);
@@ -60,10 +62,11 @@ describe("NavbarView", () => {
         proxyContextValue={proxyContextValue}
         user={MockUser}
         onSignOut={noop}
-        canViewAuditLog
         canViewDeployment
+        canViewOrganizations
         canViewAllUsers
         canViewHealth
+        canViewAuditLog
       />,
     );
     const deploymentMenu = await screen.findByText("Deployment");
@@ -78,10 +81,11 @@ describe("NavbarView", () => {
         proxyContextValue={proxyContextValue}
         user={MockUser}
         onSignOut={noop}
-        canViewAuditLog
         canViewDeployment
+        canViewOrganizations
         canViewAllUsers
         canViewHealth
+        canViewAuditLog
       />,
     );
     const deploymentMenu = await screen.findByText("Deployment");
@@ -96,10 +100,11 @@ describe("NavbarView", () => {
         proxyContextValue={proxyContextValue}
         user={MockUser}
         onSignOut={noop}
-        canViewAuditLog
         canViewDeployment
+        canViewOrganizations
         canViewAllUsers
         canViewHealth
+        canViewAuditLog
       />,
     );
     const deploymentMenu = await screen.findByText("Deployment");