Make Metabot Cool Again (#42797)

* Make Metabot Cool Again

* update tests

e2e/test/scenarios/admin-2/whitelabel.cy.spec.js

@@ -511,7 +511,7 @@ describeEE("formatting > whitelabel", () => {
   describe("metabot", () => {
     it("should toggle metabot visibility", () => {
       cy.visit("/");
-      cy.findByAltText("Metabot");
+      cy.findAllByAltText("Metabot").should("have.length", 2);
 
       cy.visit("/admin/settings/whitelabel/conceal-metabase");
       cy.findByRole("main")

frontend/src/metabase/core/components/MetabotLogo/MetabotLogo.tsx

@@ -4,11 +4,12 @@ import { t } from "ttag";
 
 import { LogoRoot } from "./MetabotLogo.styled";
 
-export type MetabotVariant = "happy" | "sad";
+export type MetabotVariant = "happy" | "sad" | "cool";
 
 const urlByVariant = {
   happy: "app/assets/img/metabot-happy.svg",
   sad: "app/assets/img/metabot-sad.svg",
+  cool: "app/assets/img/metabot-shades.svg",
 };
 
 export interface MetabotLogoProps {

frontend/src/metabase/css/core/animation.module.css

@@ -16,3 +16,13 @@
 .ProgressBarNoAnimation {
   animation: none;
 }
+
+.SpinOut {
+  transform-style: preserve-3d;
+  transform-origin: center;
+  transition: transform 1s;
+}
+
+.SpinOutActive {
+  transform: rotateY(180deg);
+}

frontend/src/metabase/home/components/HomeGreeting/HomeGreeting.styled.tsx

@@ -9,9 +9,11 @@ export const GreetingRoot = styled.div`
   align-items: center;
 `;
 
-export const GreetingLogo = styled(MetabotLogo)`
-  padding-right: 0.5rem;
+export const GreetingLogo = styled(MetabotLogo)<{ isCool: boolean }>`
   height: 2.5rem;
+  position: absolute;
+  top: 0;
+  opacity: ${props => (props.isCool ? 1 : 0)};
 
   ${breakpointMinExtraLarge} {
     height: 3rem;

frontend/src/metabase/home/components/HomeGreeting/HomeGreeting.tsx

-import { useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { t } from "ttag";
 import _ from "underscore";
 
 import Tooltip from "metabase/core/components/Tooltip";
+import styles from "metabase/css/core/animation.module.css";
 import { useSelector } from "metabase/lib/redux";
 import { getUser } from "metabase/selectors/user";
+import { Box } from "metabase/ui";
 
 import { getHasMetabotLogo } from "../../selectors";
 
@@ -27,7 +29,7 @@ export const HomeGreeting = (): JSX.Element => {
           tooltip={t`Don't tell anyone, but you're my favorite.`}
           placement="bottom"
         >
-          <GreetingLogo />
+          <MetabotGreeting />
         </Tooltip>
       )}
       <GreetingMessage data-testid="greeting-message" showLogo={showLogo}>
@@ -49,3 +51,68 @@ const getMessage = (name: string | null | undefined): string => {
 
   return _.sample(options) ?? "";
 };
+
+const MetabotGreeting = () => {
+  const [buffer, setBuffer] = useState<string[]>([]);
+  const [isCooling, setIsCooling] = useState(false);
+  const [isCool, setIsCool] = useState(false);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      setBuffer(prevBuffer => {
+        const newBuffer = [...prevBuffer, event.key];
+        if (newBuffer.length > 10) {
+          newBuffer.shift();
+        }
+        return newBuffer;
+      });
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (isCoolEnough(buffer)) {
+      setTimeout(() => {
+        setIsCooling(true);
+      }, 1);
+      setTimeout(() => {
+        setIsCool(true);
+      }, 300);
+    }
+  }, [buffer]);
+
+  return (
+    <Box
+      style={{
+        position: "relative",
+        width: "62px",
+        height: "40px",
+        marginInlineEnd: "0.5rem",
+      }}
+    >
+      <GreetingLogo
+        isCool={isCool}
+        className={`${styles.SpinOut} ${isCooling ? styles.SpinOutActive : ""}`}
+        variant="cool"
+      />
+      <GreetingLogo
+        isCool={!isCool}
+        className={`${styles.SpinOut} ${isCooling ? styles.SpinOutActive : ""}`}
+        variant="happy"
+      />
+    </Box>
+  );
+};
+
+const isCoolEnough = (buffer: string[]) => {
+  const currentBuffer = buffer.join("");
+  return (
+    currentBuffer ===
+    "ArrowUpArrowUpArrowDownArrowDownArrowLeftArrowRightArrowLeftArrowRightba"
+  );
+};

frontend/src/metabase/home/components/HomeGreeting/HomeGreeting.unit.spec.tsx

@@ -32,7 +32,7 @@ describe("HomeGreeting", () => {
     });
 
     expect(screen.getByText(/John/)).toBeInTheDocument();
-    expect(screen.getByRole("img")).toBeInTheDocument();
+    expect(screen.getAllByRole("img")).toHaveLength(2);
   });
 
   it("should render without logo", () => {

resources/frontend_client/app/assets/img/metabot-shades.svg

+<svg width="58" height="43" viewBox="0 0 58 43" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M54 0.75H4C2.20507 0.75 0.75 2.20507 0.75 4V39C0.75 40.7949 2.20507 42.25 4 42.25H54C55.7949 42.25 57.25 40.7949 57.25 39V4C57.25 2.20507 55.7949 0.75 54 0.75Z" fill="#CBE2F7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 1.5C2.61929 1.5 1.5 2.61929 1.5 4V39C1.5 40.3807 2.61929 41.5 4 41.5H54C55.3807 41.5 56.5 40.3807 56.5 39V4C56.5 2.61929 55.3807 1.5 54 1.5H4ZM0 4C0 1.79086 1.79086 0 4 0H54C56.2091 0 58 1.79086 58 4V39C58 41.2091 56.2091 43 54 43H4C1.79086 43 0 41.2091 0 39V4Z" fill="#509EE3"/>
+<path d="M49 6H9C7.89543 6 7 6.89543 7 8V30C7 31.1046 7.89543 32 9 32H49C50.1046 32 51 31.1046 51 30V8C51 6.89543 50.1046 6 49 6Z" fill="#EEF6FD"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 6.75C8.30964 6.75 7.75 7.30964 7.75 8V30C7.75 30.6904 8.30964 31.25 9 31.25H49C49.6904 31.25 50.25 30.6904 50.25 30V8C50.25 7.30964 49.6904 6.75 49 6.75H9ZM6.25 8C6.25 6.48122 7.48122 5.25 9 5.25H49C50.5188 5.25 51.75 6.48122 51.75 8V30C51.75 31.5188 50.5188 32.75 49 32.75H9C7.48122 32.75 6.25 31.5188 6.25 30V8Z" fill="#509EE3"/>
+<path d="M31 20.5H32C32 22.27 30.952 23.5 29 23.5C27.048 23.5 26 22.27 26 20.5H27C27 21.5 27.5 22.5 29 22.5C30.5 22.5 31 21.5 31 20.5Z" fill="#509EE3"/>
+<path d="M20.75 17.5C21.7165 17.5 22.5 16.7165 22.5 15.75C22.5 14.7835 21.7165 14 20.75 14C19.7835 14 19 14.7835 19 15.75C19 16.7165 19.7835 17.5 20.75 17.5Z" fill="#509EE3"/>
+<path d="M36.75 17.5C37.7165 17.5 38.5 16.7165 38.5 15.75C38.5 14.7835 37.7165 14 36.75 14C35.7835 14 35 14.7835 35 15.75C35 16.7165 35.7835 17.5 36.75 17.5Z" fill="#509EE3"/>
+<path d="M43.5 38.5C44.3284 38.5 45 37.8284 45 37C45 36.1716 44.3284 35.5 43.5 35.5C42.6716 35.5 42 36.1716 42 37C42 37.8284 42.6716 38.5 43.5 38.5Z" fill="#CBE2F7" stroke="#509EE3"/>
+<path d="M49 38.5C49.8284 38.5 50.5 37.8284 50.5 37C50.5 36.1716 49.8284 35.5 49 35.5C48.1716 35.5 47.5 36.1716 47.5 37C47.5 37.8284 48.1716 38.5 49 38.5Z" fill="#CBE2F7" stroke="#509EE3"/>
+<path d="M28 8.53804C28 11.5727 26.433 15.7154 23.7015 19.1061C20.9752 22.4905 17.1616 25.038 12.7273 25.038C9.31789 25.038 6.78399 23.9897 5.09693 22.1374C3.40321 20.2778 2.5 17.5387 2.5 14.038C2.5 10.7781 3.64919 8.16859 5.63142 6.37013C7.61899 4.56684 10.49 3.53804 14 3.53804C14.1693 3.53804 14.4053 3.53246 14.6962 3.52558C16.1915 3.49022 19.1361 3.42058 21.9152 3.89906C23.5749 4.18483 25.1186 4.65831 26.2356 5.41345C27.3311 6.15403 28 7.14939 28 8.53804ZM45.2727 25.038C40.8384 25.038 37.0248 22.4905 34.2985 19.1061C31.567 15.7154 30 11.5727 30 8.53804C30 7.14939 30.6689 6.15403 31.7644 5.41345C32.8814 4.65831 34.4251 4.18483 36.0848 3.89906C38.8639 3.42058 41.8085 3.49022 43.3038 3.52558C43.5947 3.53246 43.8307 3.53804 44 3.53804C47.51 3.53804 50.381 4.56684 52.3686 6.37013C54.3508 8.16859 55.5 10.7781 55.5 14.038C55.5 17.5387 54.5968 20.2778 52.9031 22.1374C51.216 23.9897 48.6821 25.038 45.2727 25.038Z" fill="url(#paint0_linear_4_66)" stroke="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30 9H27.5V8H30V9Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 3C17.5 2.72386 17.7239 2.5 18 2.5H40C40.2761 2.5 40.5 2.72386 40.5 3C40.5 3.27614 40.2761 3.5 40 3.5H18C17.7239 3.5 17.5 3.27614 17.5 3Z" fill="white"/>
+<path d="M55 11H58V13H55V11Z" fill="white"/>
+<path d="M0 11H3V13H0V11Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_4_66" x1="42.75" y1="3" x2="42.75" y2="25.538" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1581E3"/>
+<stop offset="1" stop-color="#87BFF2"/>
+</linearGradient>
+</defs>
+</svg>