Jan 25, 2024 · Jan 23, 2024
diff --git a/site/src/utils/entitlements.test.ts → ...rc/modules/dashboard/entitlements.test.ts b/site/src/utils/entitlements.test.ts → ...rc/modules/dashboard/entitlements.test.ts
diff --git a/site/src/utils/entitlements.ts → site/src/modules/dashboard/entitlements.ts b/site/src/utils/entitlements.ts → site/src/modules/dashboard/entitlements.ts
 import { Entitlements, Feature, FeatureName } from "api/typesGenerated";
 importtype{ Entitlements, Feature, FeatureName } from "api/typesGenerated";

 /**
 * @param hasLicense true if Enterprise edition
diff --git a/site/src/modules/dashboard/useFeatureVisibility.ts b/site/src/modules/dashboard/useFeatureVisibility.ts
 import { FeatureName } from "api/typesGenerated";
 import { selectFeatureVisibility } from "./entitlements";
 import { useDashboard } from "./useDashboard";
 import { selectFeatureVisibility } from "utils/entitlements";

 export const useFeatureVisibility = (): Record<FeatureName, boolean> => {
  const { entitlements } = useDashboard();
diff --git a/site/src/pages/CliAuthPage/CliAuthPage.tsx b/site/src/pages/CliAuthPage/CliAuthPage.tsx
 import {useEffect, useState, FC, PropsWithChildren } from "react";
 import {type FC } from "react";
 import { Helmet } from "react-helmet-async";
 import { useQuery } from "react-query";
 import { getApiKey } from "api/api";
 import { pageTitle } from "utils/page";
 import { CliAuthPageView } from "./CliAuthPageView";

 export const CliAuthenticationPage: FC<PropsWithChildren<unknown>> = () => {
  const [apiKey, setApiKey] = useState<string | null>(null);

  useEffect(() => {
    getApiKey()
      .then(({ key }) => {
        setApiKey(key);
      })
      .catch((error) => {
        console.error(error);
      });
  }, []);
 export const CliAuthenticationPage: FC = () => {
  const { data } = useQuery({
    queryFn: () => getApiKey(),
  });

  return (
    <>
      <Helmet>
        <title>{pageTitle("CLI Auth")}</title>
      </Helmet>
      <CliAuthPageView sessionToken={apiKey} />
      <CliAuthPageView sessionToken={data?.key} />
    </>
  );
 };
diff --git a/site/src/pages/CliAuthPage/CliAuthPageView.tsx b/site/src/pages/CliAuthPage/CliAuthPageView.tsx
 import Button from "@mui/material/Button";
 import {useTheme } from "@emotion/react";
 import {type Interpolation, type Theme } from "@emotion/react";
 import { type FC } from "react";
 import { Link as RouterLink } from "react-router-dom";
 import { CodeExample } from "components/CodeExample/CodeExample";
 import { FullScreenLoader } from "components/Loader/FullScreenLoader";

 export interface CliAuthPageViewProps {
  sessionToken: string | null;
  sessionToken?: string;
 }

 export const CliAuthPageView: FC<CliAuthPageViewProps> = ({ sessionToken }) => {
  const theme = useTheme();

  if (!sessionToken) {
    return <FullScreenLoader />;
  }
    <SignInLayout>
      <Welcome>Session token</Welcome>

      <p
        css={{
          fontSize: 16,
          color: theme.palette.text.secondary,
          marginBottom: 32,
          textAlign: "center",
          lineHeight: "160%",
        }}
      >
      <p css={styles.instructions}>
        Copy the session token below and{" "}
        <strong css={{ whiteSpace: "nowrap" }}>
          paste it in your terminal

      <CodeExample code={sessionToken} secret />

      <div
        css={{
          display: "flex",
          justifyContent: "flex-end",
          paddingTop: 8,
        }}
      >
      <div css={styles.backButton}>
        <Button component={RouterLink} size="large" to="/workspaces" fullWidth>
          Go to workspaces
        </Button>
      </div>
    </SignInLayout>
  );
 };

 const styles = {
  instructions: (theme) => ({
    fontSize: 16,
    color: theme.palette.text.secondary,
    marginBottom: 32,
    textAlign: "center",
    lineHeight: "160%",
  }),

  backButton: {
    display: "flex",
    justifyContent: "flex-end",
    paddingTop: 8,
  },
 } satisfies Record<string, Interpolation<Theme>>;
Original file line number	Diff line number	Diff line change
		@@ -1,4 +1,4 @@
		import { Entitlements, Feature, FeatureName } from "api/typesGenerated";
		importtype{ Entitlements, Feature, FeatureName } from "api/typesGenerated";

		/**
		* @param hasLicense true if Enterprise edition
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,6 +1,6 @@
		import { FeatureName } from "api/typesGenerated";
		import { selectFeatureVisibility } from "./entitlements";
		import { useDashboard } from "./useDashboard";
		import { selectFeatureVisibility } from "utils/entitlements";

		export const useFeatureVisibility = (): Record<FeatureName, boolean> => {
		const { entitlements } = useDashboard();
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,28 +1,21 @@
		import {useEffect, useState, FC, PropsWithChildren } from "react";
		import {type FC } from "react";
		import { Helmet } from "react-helmet-async";
		import { useQuery } from "react-query";
		import { getApiKey } from "api/api";
		import { pageTitle } from "utils/page";
		import { CliAuthPageView } from "./CliAuthPageView";

		export const CliAuthenticationPage: FC<PropsWithChildren<unknown>> = () => {
		const [apiKey, setApiKey] = useState<string \| null>(null);

		useEffect(() => {
		getApiKey()
		.then(({ key }) => {
		setApiKey(key);
		})
		.catch((error) => {
		console.error(error);
		});
		}, []);
		export const CliAuthenticationPage: FC = () => {
		const { data } = useQuery({
		queryFn: () => getApiKey(),
		});

		return (
		<>
		<Helmet>
		<title>{pageTitle("CLI Auth")}</title>
		</Helmet>
		<CliAuthPageView sessionToken={apiKey} />
		<CliAuthPageView sessionToken={data?.key} />
		</>
		);
		};
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,5 +1,5 @@
		import Button from "@mui/material/Button";
		import {useTheme } from "@emotion/react";
		import {type Interpolation, type Theme } from "@emotion/react";
		import { type FC } from "react";
		import { Link as RouterLink } from "react-router-dom";
		import { CodeExample } from "components/CodeExample/CodeExample";
Expand All		@@ -8,12 +8,10 @@ import { Welcome } from "components/Welcome/Welcome";
		import { FullScreenLoader } from "components/Loader/FullScreenLoader";

		export interface CliAuthPageViewProps {
		sessionToken: string \| null;
		sessionToken?: string;
		}

		export const CliAuthPageView: FC<CliAuthPageViewProps> = ({ sessionToken }) => {
		const theme = useTheme();

		if (!sessionToken) {
		return <FullScreenLoader />;
		}
Expand All		@@ -22,15 +20,7 @@ export const CliAuthPageView: FC<CliAuthPageViewProps> = ({ sessionToken }) => {
		<SignInLayout>
		<Welcome>Session token</Welcome>

		<p
		css={{
		fontSize: 16,
		color: theme.palette.text.secondary,
		marginBottom: 32,
		textAlign: "center",
		lineHeight: "160%",
		}}
		>
		<p css={styles.instructions}>
		Copy the session token below and{" "}
		<strong css={{ whiteSpace: "nowrap" }}>
		paste it in your terminal
Expand All		@@ -40,17 +30,27 @@ export const CliAuthPageView: FC<CliAuthPageViewProps> = ({ sessionToken }) => {

		<CodeExample code={sessionToken} secret />

		<div
		css={{
		display: "flex",
		justifyContent: "flex-end",
		paddingTop: 8,
		}}
		>
		<div css={styles.backButton}>
		<Button component={RouterLink} size="large" to="/workspaces" fullWidth>
		Go to workspaces
		</Button>
		</div>
		</SignInLayout>
		);
		};

		const styles = {
		instructions: (theme) => ({
		fontSize: 16,
		color: theme.palette.text.secondary,
		marginBottom: 32,
		textAlign: "center",
		lineHeight: "160%",
		}),

		backButton: {
		display: "flex",
		justifyContent: "flex-end",
		paddingTop: 8,
		},
		} satisfies Record<string, Interpolation<Theme>>;