adding swag button (#48155)

* adding swag button

* adding unit tests

* updating copy and colors

* adjusting rc version detection

* adding t-shirt icon. Updating gradient and copy

* final adjustments

* I can't spell

frontend/src/metabase/admin/settings/app/components/SettingsEditor/SettingsEditor.jsx

@@ -9,6 +9,7 @@ import { t } from "ttag";
 import _ from "underscore";
 
 import ErrorBoundary from "metabase/ErrorBoundary";
+import { SwagButton } from "metabase/admin/settings/components/Swag/SwagButton";
 import { UpsellSSO } from "metabase/admin/upsells";
 import { AdminLayout } from "metabase/components/AdminLayout";
 import { NotFound } from "metabase/components/ErrorPages";
@@ -254,6 +255,7 @@ class SettingsEditor extends Component {
       <aside className={cx(AdminS.AdminList, CS.flexNoShrink)}>
         <ul className={CS.pt1} data-testid="admin-list-settings-items">
           <ErrorBoundary>{renderedSections}</ErrorBoundary>
+          <SwagButton />
         </ul>
       </aside>
     );

frontend/src/metabase/admin/settings/components/Swag/SwagButton.tsx

+import cx from "classnames";
+import { useMemo, useState } from "react";
+import { t } from "ttag";
+
+import { useSetting } from "metabase/common/hooks";
+import AdminS from "metabase/css/admin.module.css";
+import { Icon } from "metabase/ui";
+
+import { SwagModal } from "./SwagModal";
+import { SWAG_51_LOCAL_STORAGE_KEY } from "./constants";
+import { isSwagEnabled } from "./utils";
+
+export const SwagButton = () => {
+  const version = useSetting("version");
+  const [modalOpen, setModalOpen] = useState(false);
+
+  // Need to check the value again when modal closes to remove animation
+  // So the modal opening / closing is a dependency here
+  const isLinkUsed = useMemo(() => {
+    const rawValue = localStorage.getItem(SWAG_51_LOCAL_STORAGE_KEY);
+    return rawValue === "true";
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [modalOpen]);
+
+  if (!isSwagEnabled(version.tag)) {
+    return null;
+  }
+
+  return (
+    <>
+      <li
+        className={cx(AdminS.SwagButton, { [AdminS.LameSwag]: isLinkUsed })}
+        aria-disabled={isLinkUsed ? true : false}
+        onClick={() => setModalOpen(true)}
+        data-testid="swag-button"
+      >
+        {isLinkUsed ? <Icon name="check" /> : <Icon name="t-shirt" />}
+        <span>{t`Claim your swag`}</span>
+      </li>
+      <SwagModal opened={modalOpen} onClose={() => setModalOpen(false)} />
+    </>
+  );
+};

frontend/src/metabase/admin/settings/components/Swag/SwagButton.unit.spec.tsx

+import userEvent from "@testing-library/user-event";
+
+import { act, renderWithProviders, screen } from "__support__/ui";
+import { createMockUser, createMockVersion } from "metabase-types/api/mocks";
+import { createMockSettingsState } from "metabase-types/store/mocks";
+
+import { SwagButton } from "./SwagButton";
+import { SWAG_LINK } from "./constants";
+
+const USER_EMAIL = "toucan@metabase.com";
+const DEFAULT_DATE = new Date("2024-09-27");
+
+const user = userEvent.setup({ delay: null });
+
+const setup = ({ versionTag = "v0.51.0-RC" } = {}) => {
+  renderWithProviders(<SwagButton />, {
+    storeInitialState: {
+      currentUser: createMockUser({
+        email: USER_EMAIL,
+      }),
+      settings: createMockSettingsState({
+        version: createMockVersion({
+          tag: versionTag,
+        }),
+      }),
+    },
+  });
+};
+
+it("should render a button when date is below threshold and version includes RC", () => {
+  jest.useFakeTimers({
+    now: DEFAULT_DATE,
+  });
+  setup();
+  expect(screen.getByText(/Claim your swag/i)).toBeInTheDocument();
+});
+
+it("should not render a button when date is above threshold", () => {
+  jest.useFakeTimers({
+    now: new Date("2024-11-27"),
+  });
+  setup();
+  expect(screen.queryByText(/Claim your swag/i)).not.toBeInTheDocument();
+});
+
+it("should not render a button when version is not an RC", () => {
+  jest.useFakeTimers({
+    now: DEFAULT_DATE,
+  });
+  setup({ versionTag: "v0.51.3" });
+  expect(screen.queryByText(/Claim your swag/i)).not.toBeInTheDocument();
+});
+
+it("Clicking the swag button should open a modal", async () => {
+  jest.useFakeTimers({
+    now: DEFAULT_DATE,
+  });
+  setup();
+
+  await act(async () => {
+    await user.click(screen.getByText(/Claim your swag/i));
+  });
+
+  expect(
+    screen.getByRole("heading", { name: "A little something from us to you" }),
+  ).toBeInTheDocument();
+
+  expect(screen.getByRole("link", { name: "Get my swag" })).toHaveAttribute(
+    "href",
+    `${SWAG_LINK}?email=${USER_EMAIL}`,
+  );
+});
+
+it("Clicking the swag link should change the class on the button", async () => {
+  jest.useFakeTimers({
+    now: DEFAULT_DATE,
+  });
+  setup();
+
+  await act(async () => {
+    await user.click(screen.getByText(/Claim your swag/i));
+  });
+
+  await act(async () => {
+    await user.click(screen.getByRole("link", { name: "Get my swag" }));
+  });
+
+  expect(screen.getByTestId("swag-button")).toHaveAttribute(
+    "aria-disabled",
+    "true",
+  );
+});

frontend/src/metabase/admin/settings/components/Swag/SwagModal.tsx

+import { useLocalStorage } from "react-use";
+import { t } from "ttag";
+
+import { getCurrentUser } from "metabase/admin/datamodel/selectors";
+import { useSelector } from "metabase/lib/redux";
+import { Button, Flex, Modal, type ModalProps, Text } from "metabase/ui";
+
+import { SWAG_51_LOCAL_STORAGE_KEY, SWAG_LINK } from "./constants";
+
+export const SwagModal = (props: Pick<ModalProps, "opened" | "onClose">) => {
+  const user = useSelector(getCurrentUser);
+  const url = user.email ? `${SWAG_LINK}?email=${user.email}` : SWAG_LINK;
+
+  const [_value, setValue, _remove] = useLocalStorage(
+    SWAG_51_LOCAL_STORAGE_KEY,
+  );
+
+  return (
+    <Modal title={t`A little something from us to you`} {...props} size={560}>
+      <Text mt="0.5rem">
+        {t`As a thank-you for trying out this release candidate we’d love to send you some swag, while our supplies last. Click the button to give us your details and we’ll send you an email with instructions.`}
+      </Text>
+      <Flex justify="center" pt="1.5rem">
+        <Button
+          component={"a"}
+          href={url}
+          target="_blank"
+          variant="filled"
+          onClick={() => {
+            setValue(true);
+            props.onClose();
+          }}
+        >
+          {t`Get my swag`}
+        </Button>
+      </Flex>
+    </Modal>
+  );
+};

frontend/src/metabase/admin/settings/components/Swag/constants.ts

+export const SWAG_51_LOCAL_STORAGE_KEY = "mb-swag-51";
+export const SWAG_LINK = "https://metaba.se/rc-51-swag";

frontend/src/metabase/admin/settings/components/Swag/utils.ts

+export const isSwagEnabled = (version?: string) => {
+  if (!version) {
+    return false;
+  }
+
+  const CUTOFF_DATE = new Date("2024-11-01");
+  const versionRegex = /rc/i;
+
+  if (!version.match(versionRegex)) {
+    return false;
+  }
+
+  if (new Date() < CUTOFF_DATE) {
+    return true;
+  }
+
+  return false;
+};

frontend/src/metabase/css/admin.module.css

@@ -169,3 +169,38 @@
 .AdminTable tbody tr:first-child td {
   padding-top: var(--margin-1);
 }
+
+@keyframes animation-name {
+  0% {
+    background-position: 0% 50%;
+  }
+
+  50% {
+    background-position: 100% 50%;
+  }
+
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+.SwagButton {
+  padding: 10px 14px;
+  display: flex;
+  gap: 0.5rem;
+  justify-content: center;
+  align-items: center;
+  background: linear-gradient(320deg, #1883e2, #fb5fb0);
+  background-size: 400% 400%;
+  animation: animation-name 6s ease infinite;
+  border-radius: 0.5rem;
+  margin-left: 1rem;
+  margin-right: 1rem;
+  color: var(--mb-color-text-white);
+  cursor: pointer;
+}
+
+.LameSwag {
+  background: var(--mb-color-bg-medium);
+  color: var(--mb-color-text-light);
+}

frontend/src/metabase/ui/components/icons/Icon/icons/index.ts

@@ -351,6 +351,8 @@ import sun_component from "./sun.svg?component";
 import sun_source from "./sun.svg?source";
 import sync_component from "./sync.svg?component";
 import sync_source from "./sync.svg?source";
+import t_shirt_component from "./t-shirt.svg?component";
+import t_shirt_source from "./t-shirt.svg?source";
 import tab_component from "./tab.svg?component";
 import tab_source from "./tab.svg?source";
 import table_component from "./table.svg?component";
@@ -1093,6 +1095,10 @@ export const Icons = {
     component: sun_component,
     source: sun_source,
   },
+  "t-shirt": {
+    component: t_shirt_component,
+    source: t_shirt_source,
+  },
   tab: {
     component: tab_component,
     source: tab_source,

frontend/src/metabase/ui/components/icons/Icon/icons/t-shirt.svg

+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10.4695 2L15 3.70822V7.23607L12.1034 6.5305V13.5119H3.97082V6.5305L1 7.23607V3.70822L5.60477 2M10.4695 2H5.60477M10.4695 2C10.4324 2.9779 9.95703 4.56233 8.0557 4.56233C6.15438 4.56233 5.67904 2.9779 5.60477 2" stroke="currentcolor" stroke-width="1.5"/>
+</svg>
\ No newline at end of file