DEVPROD-3362 Mark Evergreen ide as deprecated

package.json

@@ -72,6 +72,7 @@
     "@leafygreen-ui/guide-cue": "5.0.5",
     "@leafygreen-ui/icon": "11.26.0",
     "@leafygreen-ui/icon-button": "15.0.19",
+    "@leafygreen-ui/info-sprinkle": "^1.0.2",
     "@leafygreen-ui/inline-definition": "6.0.14",
     "@leafygreen-ui/interaction-ring": "7.0.2",
     "@leafygreen-ui/leafygreen-provider": "3.1.11",

src/pages/spawn/spawnHost/SpawnHostCard.stories.tsx → src/pages/spawn/spawnHost/SpawnHostCard/SpawnHostCard.stories.tsx

@@ -1,5 +1,5 @@
-import { SpawnHostCard } from "pages/spawn/spawnHost/SpawnHostCard";
 import { CustomStoryObj, CustomMeta } from "test_utils/types";
+import SpawnHostCard from ".";
 
 export default {
   title: "Pages/Spawn/Spawn Host Card",

src/pages/spawn/spawnHost/__snapshots__/SpawnHostCard.stories.storyshot → src/pages/spawn/spawnHost/SpawnHostCard/__snapshots__/SpawnHostCard.stories.storyshot

@@ -196,7 +196,9 @@ exports[`Snapshot Tests Pages/Spawn/Spawn Host Card Default 1`] = `
         IDE
       </div>
       <div>
-        <span>
+        <div
+          class="css-1m51o3m-IDEContainer e1287ob91"
+        >
           <a
             class="lg-ui-0001 css-16hif17-StyledLink leafygreen-ui-1gfngq5"
             href="/host/i-04ade558e1e26b0ad/ide"
@@ -205,10 +207,35 @@ exports[`Snapshot Tests Pages/Spawn/Spawn Host Card Default 1`] = `
             <span
               class="leafygreen-ui-1ewnca3"
             >
-              Open IDE
+              Open IDE (Deprecated)
             </span>
           </a>
-        </span>
+          <span
+            aria-disabled="true"
+            aria-label="more info"
+            class="leafygreen-ui-emw599"
+            data-testid="info-sprinkle-icon"
+            role="button"
+            tabindex="0"
+          >
+            <svg
+              aria-hidden="true"
+              aria-label="Info With Circle Icon"
+              class="leafygreen-ui-1st74h4"
+              height="16"
+              role="img"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM9 4C9 4.55228 8.55228 5 8 5C7.44772 5 7 4.55228 7 4C7 3.44772 7.44772 3 8 3C8.55228 3 9 3.44772 9 4ZM8 6C8.55228 6 9 6.44772 9 7V11H9.5C9.77614 11 10 11.2239 10 11.5C10 11.7761 9.77614 12 9.5 12H6.5C6.22386 12 6 11.7761 6 11.5C6 11.2239 6.22386 11 6.5 11H7V7H6.5C6.22386 7 6 6.77614 6 6.5C6 6.22386 6.22386 6 6.5 6H8Z"
+                fill="currentColor"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </span>
+        </div>
       </div>
     </div>
   </div>

src/pages/spawn/spawnHost/SpawnHostCard/constants.ts

@@ -0,0 +1,6 @@
+const workstationSupportedDistros = [
+  "ubuntu1804-workstation",
+  "ubuntu1804-workstation-graviton",
+];
+
+export { workstationSupportedDistros };

src/pages/spawn/spawnHost/SpawnHostCard.tsx → src/pages/spawn/spawnHost/SpawnHostCard/index.tsx

@@ -1,5 +1,6 @@
 import styled from "@emotion/styled";
 import Badge from "@leafygreen-ui/badge";
+import { InfoSprinkle } from "@leafygreen-ui/info-sprinkle";
 import {
   Analytics,
   useSpawnAnalytics,
@@ -12,14 +13,15 @@ import { size } from "constants/tokens";
 import { useDateFormat } from "hooks";
 import { HostStatus } from "types/host";
 import { MyHost } from "types/spawn";
+import { workstationSupportedDistros } from "./constants";
 
 type SendEvent = Analytics["sendEvent"];
 
 interface SpawnHostCardProps {
   host: MyHost;
 }
 
-export const SpawnHostCard: React.FC<SpawnHostCardProps> = ({ host }) => {
+const SpawnHostCard: React.FC<SpawnHostCardProps> = ({ host }) => {
   const { sendEvent } = useSpawnAnalytics();
 
   return (
@@ -88,18 +90,29 @@ const spawnHostCardFieldMaps = (sendEvent: SendEvent) => ({
   ),
   IDE: (host: MyHost) =>
     host?.distro?.isVirtualWorkStation &&
-    host?.status === HostStatus.Running ? (
-      <span>
+    host?.status === HostStatus.Running &&
+    workstationSupportedDistros.includes(host?.distro?.id) ? (
+      <IDEContainer>
         <StyledLink
           href={getIdeUrl(host.id)}
           onClick={() => sendEvent({ name: "Opened IDE" })}
         >
-          Open IDE
+          Open IDE (Deprecated)
         </StyledLink>
-      </span>
+        <InfoSprinkle>
+          The Evergreen IDE is now deprecated and is no longer installed on new
+          workstations
+        </InfoSprinkle>
+      </IDEContainer>
     ) : undefined,
 });
 
+const IDEContainer = styled.div`
+  display: flex;
+  gap: ${size.xs};
+`;
 const PaddedBadge = styled(Badge)`
   margin-right: ${size.xs};
 `;
+
+export default SpawnHostCard;

src/pages/spawn/spawnHost/SpawnHostTable.tsx

@@ -10,7 +10,7 @@ import { BaseTable } from "components/Table/BaseTable";
 import { size } from "constants/tokens";
 import { useQueryParam } from "hooks/useQueryParam";
 import { MyHost, QueryParams } from "types/spawn";
-import { SpawnHostCard } from "./SpawnHostCard";
+import SpawnHostCard from "./SpawnHostCard";
 import { SpawnHostTableActions } from "./SpawnHostTableActions";
 
 interface SpawnHostTableProps {

src/pages/spawn/spawnHost/index.ts

@@ -1,6 +1,5 @@
 export { SpawnHostTable } from "./SpawnHostTable";
 export { SpawnHostButton } from "./SpawnHostButton";
 export { SpawnHostActionButton } from "./SpawnHostActionButton";
-export { SpawnHostCard } from "./SpawnHostCard";
 export { EditSpawnHostModal } from "./EditSpawnHostModal";
 export { EditSpawnHostButton } from "./EditSpawnHostButton";

yarn.lock

@@ -3491,6 +3491,18 @@
     "@leafygreen-ui/emotion" "^4.0.7"
     lodash "^4.17.21"
 
+"@leafygreen-ui/info-sprinkle@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@leafygreen-ui/info-sprinkle/-/info-sprinkle-1.0.2.tgz#bce738c71e2fdbf99950c22e70a938d270f8ebb1"
+  integrity sha512-SWab7+ljlNQQML6f2t2VOnp2JtZjcJ+KcZcVHUikjt7gYnS6+YtK9MEwZOFsLue6IchaJgPNsVA+Fm+e/PjSuQ==
+  dependencies:
+    "@leafygreen-ui/emotion" "^4.0.7"
+    "@leafygreen-ui/icon" "^11.25.0"
+    "@leafygreen-ui/lib" "^13.0.0"
+    "@leafygreen-ui/palette" "^4.0.7"
+    "@leafygreen-ui/tokens" "^2.2.0"
+    "@leafygreen-ui/tooltip" "^11.0.0"
+
 "@leafygreen-ui/[email protected]":
   version "6.0.14"
   resolved "https://registry.yarnpkg.com/@leafygreen-ui/inline-definition/-/inline-definition-6.0.14.tgz#fd0ba775a2ff88520ed31d0489e57fd90416bad3"