Revert "emotion: AppLink"

This reverts commit f4373dd.
coder · aslilac · Oct 16, 2023 · Oct 13, 2023 · Oct 13, 2023 · Oct 13, 2023
commit e3986d2672beed23a1b13875d104ec4bb0462b5c
diff --git a/site/src/components/Resources/AppLink/AppLink.tsx b/site/src/components/Resources/AppLink/AppLink.tsx
@@ -1,17 +1,18 @@
 import CircularProgress from "@mui/material/CircularProgress";
 import Link from "@mui/material/Link";
+import { makeStyles } from "@mui/styles";
 import Tooltip from "@mui/material/Tooltip";
 import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
-import { type FC, useState } from "react";
-import { useTheme } from "@emotion/react";
-import { getApiKey } from "api/api";
-import type * as TypesGen from "api/typesGenerated";
-import { useProxy } from "contexts/ProxyContext";
 import { PrimaryAgentButton } from "components/Resources/AgentButton";
-import { createAppLinkHref } from "utils/apps";
+import { FC, useState } from "react";
+import { combineClasses } from "utils/combineClasses";
+import * as TypesGen from "api/typesGenerated";
 import { generateRandomString } from "utils/random";
 import { BaseIcon } from "./BaseIcon";
 import { ShareIcon } from "./ShareIcon";
+import { useProxy } from "contexts/ProxyContext";
+import { createAppLinkHref } from "utils/apps";
+import { getApiKey } from "api/api";
 
 const Language = {
   appTitle: (appName: string, identifier: string): string =>
@@ -30,7 +31,7 @@ export const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
   const appsHost = proxy.preferredWildcardHostname;
   const [fetchingSessionToken, setFetchingSessionToken] = useState(false);
 
-  const theme = useTheme();
+  const styles = useStyles();
   const username = workspace.owner_name;
 
   let appSlug = app.slug;
@@ -64,18 +65,12 @@ export const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
   }
   if (app.health === "unhealthy") {
     canClick = false;
-    icon = <ErrorOutlineIcon css={{ color: theme.palette.warning.light }} />;
+    icon = <ErrorOutlineIcon className={styles.unhealthyIcon} />;
     primaryTooltip = "Unhealthy";
   }
   if (!appsHost && app.subdomain) {
     canClick = false;
-    icon = (
-      <ErrorOutlineIcon
-        css={{
-          color: theme.palette.grey[300],
-        }}
-      />
-    );
+    icon = <ErrorOutlineIcon className={styles.notConfiguredIcon} />;
     primaryTooltip =
       "Your admin has not configured subdomain application access";
   }
@@ -91,13 +86,7 @@ export const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
       endIcon={isPrivateApp ? undefined : <ShareIcon app={app} />}
       disabled={!canClick}
     >
-      <span
-        css={
-          !isPrivateApp && {
-            marginRight: theme.spacing(1),
-          }
-        }
-      >
+      <span className={combineClasses({ [styles.appName]: !isPrivateApp })}>
         {appDisplayName}
       </span>
     </PrimaryAgentButton>
@@ -109,10 +98,7 @@ export const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
         <Link
           href={href}
           target="_blank"
-          css={{
-            pointerEvents: canClick ? "none" : undefined,
-            textDecoration: "none !important",
-          }}
+          className={canClick ? styles.link : styles.disabledLink}
           onClick={
             canClick
               ? async (event) => {
@@ -157,3 +143,26 @@ export const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
     </Tooltip>
   );
 };
+
+const useStyles = makeStyles((theme) => ({
+  link: {
+    textDecoration: "none !important",
+  },
+
+  disabledLink: {
+    pointerEvents: "none",
+    textDecoration: "none !important",
+  },
+
+  unhealthyIcon: {
+    color: theme.palette.warning.light,
+  },
+
+  notConfiguredIcon: {
+    color: theme.palette.grey[300],
+  },
+
+  appName: {
+    marginRight: theme.spacing(1),
+  },
+}));