coder · jaaydenh · Jul 12, 2024 · Jul 18, 2024 · Jul 18, 2024 · Jul 18, 2024
diff --git a/site/src/api/queries/templates.ts b/site/src/api/queries/templates.ts
@@ -13,11 +13,19 @@ import type {
 import { delay } from "utils/delay";
 import { getTemplateVersionFiles } from "utils/templateVersion";
 
+export const templateKey = (templateId: string) => ["template", templateId];
+
+export const template = (templateId: string): QueryOptions<Template> => {
+  return {
+    queryKey: templateKey(templateId),
+    queryFn: async () => API.getTemplate(templateId),
+  };
+};
+
 export const templateByNameKey = (organizationId: string, name: string) => [
   organizationId,
   "template",
   name,
-  "settings",
 ];
 
 export const templateByName = (

diff --git a/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx b/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx
@@ -0,0 +1,133 @@
+import { css } from "@emotion/css";
+import Autocomplete from "@mui/material/Autocomplete";
+import CircularProgress from "@mui/material/CircularProgress";
+import TextField from "@mui/material/TextField";
+import {
+  type ChangeEvent,
+  type ComponentProps,
+  type FC,
+  useState,
+} from "react";
+import { useQuery } from "react-query";
+import { organizations } from "api/queries/organizations";
+import type { Organization } from "api/typesGenerated";
+import { Avatar } from "components/Avatar/Avatar";
+import { AvatarData } from "components/AvatarData/AvatarData";
+import { useDebouncedFunction } from "hooks/debounce";
+
+export type OrganizationAutocompleteProps = {
+  value: Organization | null;
+  onChange: (organization: Organization | null) => void;
+  label?: string;
+  className?: string;
+  size?: ComponentProps<typeof TextField>["size"];
+  required?: boolean;
+};
+
+export const OrganizationAutocomplete: FC<OrganizationAutocompleteProps> = ({
+  value,
+  onChange,
+  label,
+  className,
+  size = "small",
+  required,
+}) => {
+  const [autoComplete, setAutoComplete] = useState<{
+    value: string;
+    open: boolean;
+  }>({
+    value: value?.name ?? "",
+    open: false,
+  });
+  const organizationsQuery = useQuery(organizations());
+
+  const { debounced: debouncedInputOnChange } = useDebouncedFunction(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      setAutoComplete((state) => ({
+        ...state,
+        value: event.target.value,
+      }));
+    },
+    750,
+  );
+
+  return (
+    <Autocomplete
+      noOptionsText="No organizations found"
+      className={className}
+      options={organizationsQuery.data ?? []}
+      loading={organizationsQuery.isLoading}
+      value={value}
+      data-testid="organization-autocomplete"
+      open={autoComplete.open}
+      isOptionEqualToValue={(a, b) => a.name === b.name}
+      getOptionLabel={(option) => option.display_name}
+      onOpen={() => {
+        setAutoComplete((state) => ({
+          ...state,
+          open: true,
+        }));
+      }}
+      onClose={() => {
+        setAutoComplete({
+          value: value?.name ?? "",
+          open: false,
+        });
+      }}
+      onChange={(_, newValue) => {
+        onChange(newValue);
+      }}
+      renderOption={({ key, ...props }, option) => (
+        <li key={key} {...props}>
+          <AvatarData
+            title={option.display_name}
+            subtitle={option.name}
+            src={option.icon}
+          />
+        </li>
+      )}
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          required={required}
+          fullWidth
+          size={size}
+          label={label}
+          autoFocus
+          placeholder="Organization name"
+          css={{
+            "&:not(:has(label))": {
+              margin: 0,
+            },
+          }}
+          InputProps={{
+            ...params.InputProps,
+            onChange: debouncedInputOnChange,
+            startAdornment: value && (
+              <Avatar size="sm" src={value.icon}>
+                {value.name}
+              </Avatar>
+            ),
+            endAdornment: (
+              <>
+                {organizationsQuery.isFetching && autoComplete.open && (
+                  <CircularProgress size={16} />
+                )}
+                {params.InputProps.endAdornment}
+              </>
+            ),
+            classes: { root },
+          }}
+          InputLabelProps={{
+            shrink: true,
+          }}
+        />
+      )}
+    />
+  );
+};
+
+const root = css`
+  padding-left: 14px !important; // Same padding left as input
+  gap: 4px;
+`;
diff --git a/site/src/components/UserAutocomplete/UserAutocomplete.tsx b/site/src/components/UserAutocomplete/UserAutocomplete.tsx
@@ -22,6 +22,7 @@ export type UserAutocompleteProps = {
   label?: string;
   className?: string;
   size?: ComponentProps<typeof TextField>["size"];
+  required?: boolean;
 };
 
 export const UserAutocomplete: FC<UserAutocompleteProps> = ({
@@ -30,6 +31,7 @@ export const UserAutocomplete: FC<UserAutocompleteProps> = ({
   label,
   className,
   size = "small",
+  required,
 }) => {
   const [autoComplete, setAutoComplete] = useState<{
     value: string;
@@ -59,16 +61,15 @@ export const UserAutocomplete: FC<UserAutocompleteProps> = ({
 
   return (
     <Autocomplete
-      // Since the values are filtered by the API we don't need to filter them
-      // in the FE because it can causes some mismatches.
-      filterOptions={(user) => user}
       noOptionsText="No users found"
       className={className}
       options={usersQuery.data?.users ?? []}
       loading={usersQuery.isLoading}
       value={value}
-      id="user-autocomplete"
+      data-testid="user-autocomplete"
       open={autoComplete.open}
+      isOptionEqualToValue={(a, b) => a.username === b.username}
+      getOptionLabel={(option) => option.email}
       onOpen={() => {
         setAutoComplete((state) => ({
           ...state,
@@ -84,12 +85,8 @@ export const UserAutocomplete: FC<UserAutocompleteProps> = ({
       onChange={(_, newValue) => {
         onChange(newValue);
       }}
-      isOptionEqualToValue={(option: User, value: User) =>
-        option.username === value.username
-      }
-      getOptionLabel={(option) => option.email}
-      renderOption={(props, option) => (
-        <li {...props}>
+      renderOption={({ key, ...props }, option) => (
+        <li key={key} {...props}>
           <AvatarData
             title={option.username}
             subtitle={option.email}
@@ -100,6 +97,7 @@ export const UserAutocomplete: FC<UserAutocompleteProps> = ({
       renderInput={(params) => (
         <TextField
           {...params}
+          required={required}
           fullWidth
           size={size}
           label={label}
@@ -119,9 +117,9 @@ export const UserAutocomplete: FC<UserAutocompleteProps> = ({
             ),
             endAdornment: (
               <>
-                {usersQuery.isFetching && autoComplete.open ? (
+                {usersQuery.isFetching && autoComplete.open && (
                   <CircularProgress size={16} />
-                ) : null}
+                )}
                 {params.InputProps.endAdornment}
               </>
             ),

diff --git a/site/src/modules/navigation.ts b/site/src/modules/navigation.ts
@@ -1,6 +1,7 @@
 /**
  * @fileoverview TODO: centralize navigation code here! URL constants, URL formatting, all of it
  */
+import type { Experiments } from "api/typesGenerated";
 
 export function withFilter(path: string, filter: string) {
   return path + (filter ? `?filter=${encodeURIComponent(filter)}` : "");
@@ -9,3 +10,19 @@ export function withFilter(path: string, filter: string) {
 export const AUDIT_LINK = "/audit";
 
 export const USERS_LINK = withFilter("/users", "status:active");
+
+export const TEMPLATES_ROUTE = (
+  organizationId: string,
+  templateName: string,
+  routeSuffix: string = "",
+  orgsEnabled: boolean = false,
+  experiments: Experiments = [],
+) => {
+  const multiOrgExperimentEnabled = experiments.includes("multi-organization");
+
+  if (multiOrgExperimentEnabled && orgsEnabled) {
+    return `/templates/${organizationId}/${templateName}${routeSuffix}`;
+  }
+
+  return `/templates/${templateName}${routeSuffix}`;
+};
diff --git a/site/src/modules/templates/TemplateFiles/TemplateFiles.tsx b/site/src/modules/templates/TemplateFiles/TemplateFiles.tsx
@@ -10,20 +10,22 @@ import type { TemplateVersionFiles } from "utils/templateVersion";
 import { TemplateFileTree } from "./TemplateFileTree";
 
 interface TemplateFilesProps {
+  organizationName: string;
+  templateName: string;
+  versionName: string;
   currentFiles: TemplateVersionFiles;
   /**
    * Files used to compare with current files
    */
   baseFiles?: TemplateVersionFiles;
-  versionName: string;
-  templateName: string;
 }
 
 export const TemplateFiles: FC<TemplateFilesProps> = ({
+  organizationName,
+  templateName,
+  versionName,
   currentFiles,
   baseFiles,
-  versionName,
-  templateName,
 }) => {
   const filenames = Object.keys(currentFiles);
   const theme = useTheme();
@@ -104,7 +106,8 @@ export const TemplateFiles: FC<TemplateFilesProps> = ({
 
                     <div css={{ marginLeft: "auto" }}>
                       <Link
-                        to={`/templates/${templateName}/versions/${versionName}/edit?path=${filename}`}
+                        // TODO: skip org name if we're not licensed
+                        to={`/templates/${organizationName}/${templateName}/versions/${versionName}/edit?path=${filename}`}
                         css={{
                           display: "flex",
                           gap: 4,

diff --git a/site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx b/site/src/modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx
@@ -25,9 +25,10 @@ export const Language = {
 };
 
 interface TooltipProps {
-  onUpdateVersion: () => void;
+  organizationName: string;
   templateName: string;
   latestVersionId: string;
+  onUpdateVersion: () => void;
   ariaLabel?: string;
 }
 
@@ -48,10 +49,11 @@ export const WorkspaceOutdatedTooltip: FC<TooltipProps> = (props) => {
 };
 
 export const WorkspaceOutdatedTooltipContent: FC<TooltipProps> = ({
+  organizationName,
+  templateName,
+  latestVersionId,
   onUpdateVersion,
   ariaLabel,
-  latestVersionId,
-  templateName,
 }) => {
   const popover = usePopover();
   const { data: activeVersion } = useQuery({
@@ -71,7 +73,8 @@ export const WorkspaceOutdatedTooltipContent: FC<TooltipProps> = ({
           <div>
             {activeVersion ? (
               <Link
-                href={`/templates/${templateName}/versions/${activeVersion.name}`}
+                // TODO: skip org name if we're not licensed
+                href={`/templates/${organizationName}/${templateName}/versions/${activeVersion.name}`}
                 target="_blank"
                 css={{ color: theme.palette.primary.light }}
               >