Jan 23, 2024 · Jan 22, 2024 · Jan 23, 2024 · Jan 23, 2024 · Jan 23, 2024 · Jan 23, 2024
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.test.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.test.tsx
    );
  });

  it("external auth: errors if unauthenticated and submits", async () => {
  it("external auth: errors if unauthenticated", async () => {
    jest
      .spyOn(API, "getTemplateVersionExternalAuth")
      .mockResolvedValueOnce([MockTemplateVersionExternalAuthGithub]);

    renderCreateWorkspacePage();
    await waitForLoaderToBeRemoved();

    const nameField = await screen.findByLabelText(nameLabelText);

    // have to use fireEvent b/c userEvent isn't cleaning up properly between tests
    fireEvent.change(nameField, {
      target: { value: "test" },
    });

    const submitButton = screen.getByText(createWorkspaceText);
    await userEvent.click(submitButton);

    await screen.findByText("You must authenticate to create a workspace!");
    await screen.findByText(
      "To create a workspace using the selected template, please ensure you are authenticated with all the external providers listed below.",
    );
  });

  it("auto create a workspace if uses mode=auto", async () => {
diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePage.tsx
    ? richParametersQuery.data.filter(paramsUsedToCreateWorkspace)
    : undefined;

  const { externalAuth, externalAuthPollingState, startPollingExternalAuth } =
    useExternalAuth(realizedVersionId);
  const {
    externalAuth,
    externalAuthPollingState,
    startPollingExternalAuth,
    isLoadingExternalAuth,
  } = useExternalAuth(realizedVersionId);

  const isLoadingFormData =
    templateQuery.isLoading ||
        <title>{pageTitle(title)}</title>
      </Helmet>
      {loadFormDataError && <ErrorAlert error={loadFormDataError} />}
      {isLoadingFormData || autoCreateWorkspaceMutation.isLoading ? (
      {isLoadingFormData ||
      isLoadingExternalAuth ||
      autoCreateWorkspaceMutation.isLoading ? (
        <Loader />
      ) : (
        <CreateWorkspacePageView
    setExternalAuthPollingState("polling");
  }, []);

  const { data: externalAuth } = useQuery(
  const { data: externalAuth, isLoading: isLoadingExternalAuth } = useQuery(
    versionId
      ? {
          ...templateVersionExternalAuth(versionId),
    startPollingExternalAuth,
    externalAuth,
    externalAuthPollingState,
    isLoadingExternalAuth,
  };
 };

diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
  ImmutableTemplateParametersSection,
  MutableTemplateParametersSection,
 } from "components/TemplateParameters/TemplateParameters";
 import {ExternalAuth } from "./ExternalAuth";
 import {ExternalAuthButton } from "./ExternalAuthButton";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { Stack } from "components/Stack/Stack";
 import {
  CreateWorkspaceMode,
 typeExternalAuthPollingState,
  ExternalAuthPollingState,
 } from "./CreateWorkspacePage";
 import { useSearchParams } from "react-router-dom";
 import { CreateWSPermissions } from "./permissions";
 }) => {
  const theme = useTheme();
  const [owner, setOwner] = useState(defaultOwner);
  const { verifyExternalAuth, externalAuthErrors } =
    useExternalAuthVerification(externalAuth);
  const [searchParams] = useSearchParams();
  const disabledParamsList = searchParams?.get("disable_params")?.split(",");
  const requiresExternalAuth = externalAuth.some((auth) => !auth.authenticated);

  const form: FormikContextType<TypesGen.CreateWorkspaceRequest> =
    useFormik<TypesGen.CreateWorkspaceRequest>({
      }),
      enableReinitialize: true,
      onSubmit: (request) => {
        if (!verifyExternalAuth()) {
        if (requiresExternalAuth) {
          return;
        }

            description="This template requires authentication to external services."
          >
            <FormFields>
              {requiresExternalAuth && (
                <Alert severity="error">
                  To create a workspace using the selected template, please
                  ensure you are authenticated with all the external providers
                  listed below.
                </Alert>
              )}
              {externalAuth.map((auth) => (
                <ExternalAuth
                <ExternalAuthButton
                  key={auth.id}
                  authenticateURL={auth.authenticate_url}
                  authenticated={auth.authenticated}
                  externalAuthPollingState={externalAuthPollingState}
                  startPollingExternalAuth={startPollingExternalAuth}
                  displayName={auth.display_name}
                  displayIcon={auth.display_icon}
                  error={externalAuthErrors[auth.id]}
                  auth={auth}
                  isLoading={externalAuthPollingState === "polling"}
                  onStartPolling={startPollingExternalAuth}
                  displayRetry={externalAuthPollingState === "abandoned"}
                />
              ))}
            </FormFields>
  );
 };

 type ExternalAuthErrors = Record<string, string>;

 const useExternalAuthVerification = (
  externalAuth: TypesGen.TemplateVersionExternalAuth[],
 ) => {
  const [externalAuthErrors, setExternalAuthErrors] =
    useState<ExternalAuthErrors>({});

  // Clear errors when externalAuth is refreshed
  useEffect(() => {
    setExternalAuthErrors({});
  }, [externalAuth]);

  const verifyExternalAuth = () => {
    const errors: ExternalAuthErrors = {};

    for (let i = 0; i < externalAuth.length; i++) {
      const auth = externalAuth.at(i);
      if (!auth) {
        continue;
      }
      if (!auth.authenticated) {
        errors[auth.id] = "You must authenticate to create a workspace!";
      }
    }

    setExternalAuthErrors(errors);
    const isValid = Object.keys(errors).length === 0;
    return isValid;
  };

  return {
    externalAuthErrors,
    verifyExternalAuth,
  };
 };

 const styles = {
  hasDescription: {
    paddingBottom: 16,
diff --git a/site/src/pages/CreateWorkspacePage/ExternalAuth.stories.tsx b/site/src/pages/CreateWorkspacePage/ExternalAuth.stories.tsx
diff --git a/site/src/pages/CreateWorkspacePage/ExternalAuth.tsx b/site/src/pages/CreateWorkspacePage/ExternalAuth.tsx
Original file line number	Diff line number	Diff line change
Expand Up		@@ -201,25 +201,17 @@ describe("CreateWorkspacePage", () => {
		);
		});

		it("external auth: errors if unauthenticated and submits", async () => {
		it("external auth: errors if unauthenticated", async () => {
		jest
		.spyOn(API, "getTemplateVersionExternalAuth")
		.mockResolvedValueOnce([MockTemplateVersionExternalAuthGithub]);

		renderCreateWorkspacePage();
		await waitForLoaderToBeRemoved();

		const nameField = await screen.findByLabelText(nameLabelText);

		// have to use fireEvent b/c userEvent isn't cleaning up properly between tests
Copy link Member ParkreinerJan 23, 2024• edited Loading Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. I know that we have the test simplified down now, so this comment wouldn't even be relevant anymore, but do you know if we ever figured out the`userEvent` issue? This is the first I've heard of it not cleaning up properly, but some digging made it sounds like it was a bug with the library Copy link CollaboratorAuthor BrunoQuaresmaJan 23, 2024 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. I don't know, to be honest, I just removed it from here because we don't need to fill in the name input to see the error.
		fireEvent.change(nameField, {
		target: { value: "test" },
		});

		const submitButton = screen.getByText(createWorkspaceText);
		await userEvent.click(submitButton);

		await screen.findByText("You must authenticate to create a workspace!");
		await screen.findByText(
		"To create a workspace using the selected template, please ensure you are authenticated with all the external providers listed below.",
		);
		});

		it("auto create a workspace if uses mode=auto", async () => {
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -68,8 +68,12 @@ const CreateWorkspacePage: FC = () => {
		? richParametersQuery.data.filter(paramsUsedToCreateWorkspace)
		: undefined;

		const { externalAuth, externalAuthPollingState, startPollingExternalAuth } =
		useExternalAuth(realizedVersionId);
		const {
		externalAuth,
		externalAuthPollingState,
		startPollingExternalAuth,
		isLoadingExternalAuth,
		} = useExternalAuth(realizedVersionId);

		const isLoadingFormData =
		templateQuery.isLoading \|\|
Expand DownExpand Up		@@ -118,7 +122,9 @@ const CreateWorkspacePage: FC = () => {
		<title>{pageTitle(title)}</title>
		</Helmet>
		{loadFormDataError && <ErrorAlert error={loadFormDataError} />}
		{isLoadingFormData \|\| autoCreateWorkspaceMutation.isLoading ? (
		{isLoadingFormData \|\|
		isLoadingExternalAuth \|\|
		autoCreateWorkspaceMutation.isLoading ? (
		<Loader />
		) : (
		<CreateWorkspacePageView
Expand DownExpand Up		@@ -169,7 +175,7 @@ const useExternalAuth = (versionId: string \| undefined) => {
		setExternalAuthPollingState("polling");
		}, []);

		const { data: externalAuth } = useQuery(
		const { data: externalAuth, isLoading: isLoadingExternalAuth } = useQuery(
		versionId
		? {
		...templateVersionExternalAuth(versionId),
Expand DownExpand Up		@@ -205,6 +211,7 @@ const useExternalAuth = (versionId: string \| undefined) => {
		startPollingExternalAuth,
		externalAuth,
		externalAuthPollingState,
		isLoadingExternalAuth,
		};
		};

Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -27,12 +27,12 @@ import {
		ImmutableTemplateParametersSection,
		MutableTemplateParametersSection,
		} from "components/TemplateParameters/TemplateParameters";
		import {ExternalAuth } from "./ExternalAuth";
		import {ExternalAuthButton } from "./ExternalAuthButton";
		import { ErrorAlert } from "components/Alert/ErrorAlert";
		import { Stack } from "components/Stack/Stack";
		import {
		CreateWorkspaceMode,
		typeExternalAuthPollingState,
		ExternalAuthPollingState,
		} from "./CreateWorkspacePage";
		import { useSearchParams } from "react-router-dom";
		import { CreateWSPermissions } from "./permissions";
Expand DownExpand Up		@@ -85,10 +85,9 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
		}) => {
		const theme = useTheme();
		const [owner, setOwner] = useState(defaultOwner);
		const { verifyExternalAuth, externalAuthErrors } =
		useExternalAuthVerification(externalAuth);
		const [searchParams] = useSearchParams();
		const disabledParamsList = searchParams?.get("disable_params")?.split(",");
		const requiresExternalAuth = externalAuth.some((auth) => !auth.authenticated);

		const form: FormikContextType<TypesGen.CreateWorkspaceRequest> =
		useFormik<TypesGen.CreateWorkspaceRequest>({
Expand All		@@ -106,7 +105,7 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
		}),
		enableReinitialize: true,
		onSubmit: (request) => {
		if (!verifyExternalAuth()) {
		if (requiresExternalAuth) {
		return;
		}

Expand DownExpand Up		@@ -192,16 +191,20 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
		description="This template requires authentication to external services."
		>
		<FormFields>
		{requiresExternalAuth && (
		<Alert severity="error">
		To create a workspace using the selected template, please
		ensure you are authenticated with all the external providers
		listed below.
		</Alert>
		)}
		{externalAuth.map((auth) => (
		<ExternalAuth
		<ExternalAuthButton
		key={auth.id}
		authenticateURL={auth.authenticate_url}
		authenticated={auth.authenticated}
		externalAuthPollingState={externalAuthPollingState}
		startPollingExternalAuth={startPollingExternalAuth}
		displayName={auth.display_name}
		displayIcon={auth.display_icon}
		error={externalAuthErrors[auth.id]}
		auth={auth}
		isLoading={externalAuthPollingState === "polling"}
		onStartPolling={startPollingExternalAuth}
		displayRetry={externalAuthPollingState === "abandoned"}
		/>
		))}
		</FormFields>
Expand DownExpand Up		@@ -273,43 +276,6 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
		);
		};

		type ExternalAuthErrors = Record<string, string>;

		const useExternalAuthVerification = (
		externalAuth: TypesGen.TemplateVersionExternalAuth[],
		) => {
		const [externalAuthErrors, setExternalAuthErrors] =
		useState<ExternalAuthErrors>({});

		// Clear errors when externalAuth is refreshed
		useEffect(() => {
		setExternalAuthErrors({});
		}, [externalAuth]);

		const verifyExternalAuth = () => {
		const errors: ExternalAuthErrors = {};

		for (let i = 0; i < externalAuth.length; i++) {
		const auth = externalAuth.at(i);
		if (!auth) {
		continue;
		}
		if (!auth.authenticated) {
		errors[auth.id] = "You must authenticate to create a workspace!";
		}
		}

		setExternalAuthErrors(errors);
		const isValid = Object.keys(errors).length === 0;
		return isValid;
		};

		return {
		externalAuthErrors,
		verifyExternalAuth,
		};
		};

		const styles = {
		hasDescription: {
		paddingBottom: 16,
Expand Down