Jul 12, 2024 · Jul 18, 2024 · Jul 18, 2024 · Jul 18, 2024 · Jul 18, 2024 · Jul 19, 2024
diff --git a/site/src/api/queries/templates.ts b/site/src/api/queries/templates.ts
 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
 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
  label?: string;
  className?: string;
  size?: ComponentProps<typeof TextField>["size"];
  required?: boolean;
 };

 export const UserAutocomplete: FC<UserAutocompleteProps> = ({
  label,
  className,
  size = "small",
  required,
 }) => {
  const [autoComplete, setAutoComplete] = useState<{
    value: string;

  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,
      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}
      renderInput={(params) => (
        <TextField
          {...params}
          required={required}
          fullWidth
          size={size}
          label={label}
            ),
            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
 /**
 * @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)}` : "");
 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
 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();

                    <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
 };

 interface TooltipProps {
 onUpdateVersion: () => void;
 organizationName: string;
  templateName: string;
  latestVersionId: string;
  onUpdateVersion: () => void;
  ariaLabel?: string;
 }

 };

 export const WorkspaceOutdatedTooltipContent: FC<TooltipProps> = ({
  organizationName,
  templateName,
  latestVersionId,
  onUpdateVersion,
  ariaLabel,
  latestVersionId,
  templateName,
 }) => {
  const popover = usePopover();
  const { data: activeVersion } = useQuery({
          <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 }}
              >
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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 = (
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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;
		`;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -22,6 +22,7 @@ export type UserAutocompleteProps = {
		label?: string;
		className?: string;
		size?: ComponentProps<typeof TextField>["size"];
		required?: boolean;
		};

		export const UserAutocomplete: FC<UserAutocompleteProps> = ({
Expand All		@@ -30,6 +31,7 @@ export const UserAutocomplete: FC<UserAutocompleteProps> = ({
		label,
		className,
		size = "small",
		required,
		}) => {
		const [autoComplete, setAutoComplete] = useState<{
		value: string;
Expand DownExpand Up		@@ -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,
Expand All		@@ -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}
Expand All		@@ -100,6 +97,7 @@ export const UserAutocomplete: FC<UserAutocompleteProps> = ({
		renderInput={(params) => (
		<TextField
		{...params}
		required={required}
		fullWidth
		size={size}
		label={label}
Expand All		@@ -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}
		</>
		),
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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)}` : "");
Expand All		@@ -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}`;
		};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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();
Expand DownExpand Up		@@ -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,
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -25,9 +25,10 @@ export const Language = {
		};

		interface TooltipProps {
		onUpdateVersion: () => void;
		organizationName: string;
		templateName: string;
		latestVersionId: string;
		onUpdateVersion: () => void;
		ariaLabel?: string;
		}

Expand All		@@ -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({
Expand All		@@ -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 }}
		>
Expand Down