From 0d7074a172d68184445c5fc9ed8d391d396c2c31 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Mon, 26 Feb 2024 15:17:29 -0500
Subject: [PATCH] Finalize Button migration (#10367)

* Don't export the legacy getButtonClasses function
* Deleted legacy Button component; add ref forwarding support to new button
---
 packages/replay-next/components/Button.tsx    |  30 ++--
 pages/browser/choose-role.tsx                 |  16 +--
 pages/browser/welcome.tsx                     |  13 +-
 .../components/Timeline/FocusModePopout.tsx   |  11 +-
 src/ui/components/shared/Button.tsx           | 132 ------------------
 .../shared/Confirm/ConfirmDialog.tsx          |  14 +-
 .../components/shared/LaunchBrowserModal.tsx  |   2 -
 .../AddPaymentMethod.tsx                      |  15 +-
 .../shared/WorkspaceSettingsModal/Details.tsx |  12 +-
 .../WorkspaceSettingsModal/PricingPage.tsx    |  12 +-
 10 files changed, 47 insertions(+), 210 deletions(-)
 delete mode 100644 src/ui/components/shared/Button.tsx

diff --git a/packages/replay-next/components/Button.tsx b/packages/replay-next/components/Button.tsx
index 0ed91b45438..75548e115ea 100644
--- a/packages/replay-next/components/Button.tsx
+++ b/packages/replay-next/components/Button.tsx
@@ -1,25 +1,29 @@
-import { ButtonHTMLAttributes } from "react";
+import { ButtonHTMLAttributes, ForwardedRef, forwardRef } from "react";
 
 import styles from "./Button.module.css";
 
-export function Button({
-  className = "",
-  color = "primary",
-  size = "normal",
-  variant = "solid",
-  ...rest
-}: ButtonHTMLAttributes<HTMLButtonElement> & {
-  color?: "primary" | "secondary";
-  size?: "normal" | "large" | "small";
-  variant?: "outline" | "solid";
-}) {
+export const Button = forwardRef(function Button(
+  {
+    className = "",
+    color = "primary",
+    size = "normal",
+    variant = "solid",
+    ...rest
+  }: ButtonHTMLAttributes<HTMLButtonElement> & {
+    color?: "primary" | "secondary";
+    size?: "normal" | "large" | "small";
+    variant?: "outline" | "solid";
+  },
+  ref: ForwardedRef<HTMLButtonElement>
+) {
   return (
     <button
       className={`${className} ${styles.Button}`}
       data-color={color}
       data-size={size}
       data-variant={variant}
+      ref={ref}
       {...rest}
     />
   );
-}
+});
diff --git a/pages/browser/choose-role.tsx b/pages/browser/choose-role.tsx
index 46ebac7a1e5..a4b7a5ad0e6 100644
--- a/pages/browser/choose-role.tsx
+++ b/pages/browser/choose-role.tsx
@@ -1,8 +1,8 @@
 import { useRouter } from "next/router";
 
+import { Button } from "replay-next/components/Button";
 import { Role } from "shared/user-data/GraphQL/config";
 import { userData } from "shared/user-data/GraphQL/UserData";
-import { getButtonClasses } from "ui/components/shared/Button";
 import {
   OnboardingActions,
   OnboardingBody,
@@ -25,18 +25,12 @@ export default function ImportSettings() {
         <OnboardingHeader>Can you tell us your role?</OnboardingHeader>
         <OnboardingBody>(So we can skip stuff you might find boring)</OnboardingBody>
         <OnboardingActions>
-          <button
-            className={getButtonClasses("blue", "primary", "2xl")}
-            onClick={() => setRole("developer")}
-          >
+          <Button onClick={() => setRole("developer")} size="large">
             Developer
-          </button>
-          <button
-            className={getButtonClasses("blue", "primary", "2xl")}
-            onClick={() => setRole("other")}
-          >
+          </Button>
+          <Button onClick={() => setRole("other")} size="large">
             Not a Developer
-          </button>
+          </Button>
         </OnboardingActions>
         <iframe id="migrationFrame" className="h-0 w-0" />
       </OnboardingContentWrapper>
diff --git a/pages/browser/welcome.tsx b/pages/browser/welcome.tsx
index c0a2a967623..b9153ae3842 100644
--- a/pages/browser/welcome.tsx
+++ b/pages/browser/welcome.tsx
@@ -1,7 +1,4 @@
-import Link from "next/link";
-import React from "react";
-
-import { getButtonClasses } from "ui/components/shared/Button";
+import { Button } from "replay-next/components/Button";
 import {
   OnboardingBody,
   OnboardingContent,
@@ -12,7 +9,9 @@ import {
 import styles from "src/ui/components/shared/Onboarding/Onboarding.module.css";
 
 export default function WelcomeToReplay() {
-  const classes = getButtonClasses("blue", "primary", "2xl");
+  const onClick = () => {
+    window.location.replace("/login?returnTo=/browser/choose-role");
+  };
 
   return (
     <div className={styles.stars}>
@@ -21,9 +20,9 @@ export default function WelcomeToReplay() {
           <OnboardingHeader>{`Welcome to Replay`}</OnboardingHeader>
           <OnboardingBody>{` `}</OnboardingBody>
 
-          <Link href="/login?returnTo=/browser/choose-role" className={classes}>
+          <Button onClick={onClick} size="large">
             Let's get started!
-          </Link>
+          </Button>
         </OnboardingContent>
       </OnboardingModalContainer>
       <div className={styles.bottom}>
diff --git a/src/ui/components/Timeline/FocusModePopout.tsx b/src/ui/components/Timeline/FocusModePopout.tsx
index ec6d19e28b1..18e3673a30f 100644
--- a/src/ui/components/Timeline/FocusModePopout.tsx
+++ b/src/ui/components/Timeline/FocusModePopout.tsx
@@ -17,7 +17,6 @@ import { useAppDispatch, useAppSelector } from "ui/setup/hooks";
 import { AppDispatch } from "ui/setup/store";
 import { trackEvent } from "ui/utils/telemetry";
 
-import { Button as LegacyButton } from "../shared/Button";
 import Icon from "../shared/Icon";
 import styles from "./FocusModePopout.module.css";
 
@@ -151,15 +150,13 @@ export default function FocusModePopout({
             Cancel
           </Button>
         )}
-        <LegacyButton
-          color="blue"
-          dataTestId="SaveFocusModeButton"
+        <Button
+          data-test-id="SaveFocusModeButton"
+          disabled={isSavePending}
           onClick={savePendingChanges}
-          size="md"
-          style={isSavePending ? "disabled" : "primary"}
         >
           {isSavePending ? "Saving" : "Save"}
-        </LegacyButton>
+        </Button>
       </div>
     </div>
   );
diff --git a/src/ui/components/shared/Button.tsx b/src/ui/components/shared/Button.tsx
deleted file mode 100644
index 57d5873df2d..00000000000
--- a/src/ui/components/shared/Button.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import classNames from "classnames";
-import React, { forwardRef } from "react";
-
-type ButtonSizes = "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
-type ButtonStyles = "primary" | "secondary" | "disabled";
-type ColorScale = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
-type Colors = "gray" | "blue" | "red" | "yellow" | "green" | "indigo" | "purple" | "pink" | "white";
-
-// coercing tailwind purge to preserve these dynamic classes
-// prettier-ignore
-["bg-gray-50","bg-gray-100","bg-gray-200","bg-gray-300","bg-gray-400","bg-gray-500","bg-gray-600","bg-gray-700","bg-gray-800","bg-gray-900","bg-blue-50","bg-blue-100","bg-blue-200","bg-blue-300","bg-blue-400","bg-blue-500","bg-blue-600","bg-blue-700","bg-blue-800","bg-blue-900","bg-red-50","bg-red-100","bg-red-200","bg-red-300","bg-red-400","bg-red-500","bg-red-600","bg-red-700","bg-red-800","bg-red-900","bg-yellow-50","bg-yellow-100","bg-yellow-200","bg-yellow-300","bg-yellow-400","bg-yellow-500","bg-yellow-600","bg-yellow-700","bg-yellow-800","bg-yellow-900","bg-green-50","bg-green-100","bg-green-200","bg-green-300","bg-green-400","bg-green-500","bg-green-600","bg-green-700","bg-green-800","bg-green-900","bg-indigo-50","bg-indigo-100","bg-indigo-200","bg-indigo-300","bg-indigo-400","bg-indigo-500","bg-indigo-600","bg-indigo-700","bg-indigo-800","bg-indigo-900","bg-purple-50","bg-purple-100","bg-purple-200","bg-purple-300","bg-purple-400","bg-purple-500","bg-purple-600","bg-purple-700","bg-purple-800","bg-purple-900","bg-pink-50","bg-pink-100","bg-pink-200","bg-pink-300","bg-pink-400","bg-pink-500","bg-pink-600","bg-pink-700","bg-pink-800","bg-pink-900","bg-white-50","bg-white-100","bg-white-200","bg-white-300","bg-white-400","bg-white-500","bg-white-600","bg-white-700","bg-white-800","bg-white-900","text-gray-50","text-gray-100","text-gray-200","text-gray-300","text-gray-400","text-gray-500","text-gray-600","text-gray-700","text-gray-800","text-gray-900","text-blue-50","text-blue-100","text-blue-200","text-blue-300","text-blue-400","text-blue-500","text-blue-600","text-blue-700","text-blue-800","text-blue-900","text-red-50","text-red-100","text-red-200","text-red-300","text-red-400","text-red-500","text-red-600","text-red-700","text-red-800","text-red-900","text-yellow-50","text-yellow-100","text-yellow-200","text-yellow-300","text-yellow-400","text-yellow-500","text-yellow-600","text-yellow-700","text-yellow-800","text-yellow-900","text-green-50","text-green-100","text-green-200","text-green-300","text-green-400","text-green-500","text-green-600","text-green-700","text-green-800","text-green-900","text-indigo-50","text-indigo-100","text-indigo-200","text-indigo-300","text-indigo-400","text-indigo-500","text-indigo-600","text-indigo-700","text-indigo-800","text-indigo-900","text-purple-50","text-purple-100","text-purple-200","text-purple-300","text-purple-400","text-purple-500","text-purple-600","text-purple-700","text-purple-800","text-purple-900","text-pink-50","text-pink-100","text-pink-200","text-pink-300","text-pink-400","text-pink-500","text-pink-600","text-pink-700","text-pink-800","text-pink-900","text-white-50","text-white-100","text-white-200","text-white-300","text-white-400","text-white-500","text-white-600","text-white-700","text-white-800","text-white-900"]
-
-const STANDARD_CLASSES = {
-  sm: "inline-flex flex-shrink-0 items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded",
-  md: "inline-flex flex-shrink-0 items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md",
-  lg: "inline-flex flex-shrink-0 items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md",
-  xl: "inline-flex flex-shrink-0 items-center px-4 py-2 border border-transparent text-base font-medium rounded-md",
-  "2xl":
-    "inline-flex flex-shrink-0 items-center px-6 py-3 border border-transparent text-base font-medium rounded-md",
-  "3xl":
-    "inline-flex flex-shrink-0 items-center px-6 py-3 border border-transparent text-2xl font-medium rounded-md",
-};
-
-function getColorCode(color: Colors, num: ColorScale) {
-  // We convert blue-600 and blue-700 to primaryAccent and primaryAccentHover
-  if (color === "blue") {
-    if (num === 600) {
-      return "primaryAccent";
-    } else if (num === 700) {
-      return "primaryAccentHover";
-    }
-  }
-
-  if (color === "pink") {
-    if (num === 600) {
-      return "secondaryAccent";
-    } else if (num === 700) {
-      return "secondaryAccentHover";
-    }
-  }
-
-  return `${color}-${num}`;
-}
-
-function getTextClass(color: Colors) {
-  if (color === "white") {
-    return "text-buttontextColor";
-  }
-
-  return `text-${getColorCode(color, 700)}`;
-}
-
-function getColorClasses(color: Colors, style: ButtonStyles) {
-  let bgStyle, textStyle;
-
-  if (style === "primary") {
-    textStyle = getTextClass("white");
-    bgStyle = `bg-${getColorCode(color, 600)} hover:bg-${getColorCode(color, 700)}`;
-  } else if (style === "secondary") {
-    textStyle = getTextClass(color);
-    bgStyle = `border-${getColorCode(color, 600)} hover:border-${getColorCode(color, 700)}`;
-  } else {
-    textStyle = getTextClass("gray");
-    bgStyle = `bg-gray-200`;
-  }
-
-  return `${textStyle} ${bgStyle}`;
-}
-
-export function getButtonClasses(color: Colors, style: ButtonStyles, size: ButtonSizes) {
-  const standardClasses = STANDARD_CLASSES[size];
-  const colorClasses = getColorClasses(color, style);
-  const focusClasses = `focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-${getColorCode(
-    color,
-    500
-  )}`;
-
-  return classNames(standardClasses, colorClasses, focusClasses);
-}
-
-export const Button = forwardRef<
-  HTMLButtonElement,
-  ButtonProps & {
-    color: Colors;
-    disabled?: boolean;
-    size: ButtonSizes;
-    style: ButtonStyles;
-  }
->(
-  (
-    {
-      size,
-      children,
-      dataTestId,
-      dataTestName,
-      disabled,
-      style,
-      color,
-      className,
-      onClick = () => {},
-      type,
-    },
-    ref
-  ) => {
-    const buttonClasses = getButtonClasses(color, style, size);
-
-    return (
-      <button
-        onClick={onClick}
-        data-test-id={dataTestId}
-        data-test-name={dataTestName}
-        disabled={disabled || style === "disabled"}
-        className={classNames(buttonClasses, className)}
-        ref={ref}
-        type={type}
-      >
-        {children}
-      </button>
-    );
-  }
-);
-Button.displayName = "Button";
-
-interface ButtonProps {
-  children?: React.ReactNode;
-  className?: string;
-  dataTestId?: string;
-  dataTestName?: string;
-  disabled?: boolean;
-  onClick?: () => void;
-  type?: "button" | "submit";
-}
diff --git a/src/ui/components/shared/Confirm/ConfirmDialog.tsx b/src/ui/components/shared/Confirm/ConfirmDialog.tsx
index 6bfbdeffcd5..0505bbf3548 100644
--- a/src/ui/components/shared/Confirm/ConfirmDialog.tsx
+++ b/src/ui/components/shared/Confirm/ConfirmDialog.tsx
@@ -2,7 +2,6 @@ import { useEffect, useRef } from "react";
 
 import { Button } from "replay-next/components/Button";
 
-import { Button as LegacyButton } from "../Button";
 import {
   Dialog,
   DialogActions,
@@ -69,25 +68,22 @@ export const ConfirmDialog = ({
       {description && <DialogDescription>{description}</DialogDescription>}
       <DialogActions>
         <Button
-          className="mx-3 flex-1 justify-center"
           data-test-id={dataTestId ? `${dataTestId}-DeclineButton` : undefined}
           data-test-name={dataTestName ? `${dataTestName}-DeclineButton` : undefined}
           onClick={onDecline}
         >
           {declineLabel}
         </Button>
-        <LegacyButton
+        <Button
           className="mx-2 flex-1 justify-center"
-          dataTestId={dataTestId ? `${dataTestId}-ConfirmButton` : undefined}
-          dataTestName={dataTestName ? `${dataTestName}-ConfirmButton` : undefined}
-          color={isDestructive ? "pink" : "blue"}
+          color={isDestructive ? "secondary" : "primary"}
+          data-test-id={dataTestId ? `${dataTestId}-ConfirmButton` : undefined}
+          data-test-name={dataTestName ? `${dataTestName}-ConfirmButton` : undefined}
           onClick={onAccept}
           ref={primaryButtonRef}
-          size="md"
-          style="primary"
         >
           {acceptLabel}
-        </LegacyButton>
+        </Button>
       </DialogActions>
     </Dialog>
   );
diff --git a/src/ui/components/shared/LaunchBrowserModal.tsx b/src/ui/components/shared/LaunchBrowserModal.tsx
index d2f228758f1..27fa20b4eff 100644
--- a/src/ui/components/shared/LaunchBrowserModal.tsx
+++ b/src/ui/components/shared/LaunchBrowserModal.tsx
@@ -1,11 +1,9 @@
-import classNames from "classnames";
 import React, { useEffect } from "react";
 import { connect } from "react-redux";
 
 import { actions } from "ui/actions";
 import { trackEvent } from "ui/utils/telemetry";
 
-import { getButtonClasses } from "./Button";
 import Modal, { ModalCloseButton } from "./NewModal";
 
 function LaunchBrowser({
diff --git a/src/ui/components/shared/WorkspaceSettingsModal/AddPaymentMethod.tsx b/src/ui/components/shared/WorkspaceSettingsModal/AddPaymentMethod.tsx
index 4e506a74524..c1abf1ce997 100644
--- a/src/ui/components/shared/WorkspaceSettingsModal/AddPaymentMethod.tsx
+++ b/src/ui/components/shared/WorkspaceSettingsModal/AddPaymentMethod.tsx
@@ -2,9 +2,9 @@ import { CardElement, useElements, useStripe } from "@stripe/react-stripe-js";
 import { PaymentMethod } from "@stripe/stripe-js";
 import React, { useEffect, useState } from "react";
 
+import { Button } from "replay-next/components/Button";
 import hooks from "ui/hooks";
 
-import { Button } from "../Button";
 import { CountrySelect } from "./CountrySelect";
 import { FieldRow } from "./FieldRow";
 import { InputField } from "./InputField";
@@ -175,22 +175,15 @@ export function EnterPaymentMethod({
       <CountrySelect />
       <div className="flex flex-row items-center justify-end space-x-4 border-t border-gray-200 pt-5 pb-2">
         <Button
-          size="sm"
-          color="blue"
-          style="secondary"
+          size="small"
           onClick={onCancel}
           className={saving ? "opacity-60" : undefined}
           type="button"
+          variant="outline"
         >
           Cancel
         </Button>
-        <Button
-          size="sm"
-          color="blue"
-          style="primary"
-          type="submit"
-          className={saving ? "opacity-60" : undefined}
-        >
+        <Button size="small" type="submit" className={saving ? "opacity-60" : undefined}>
           Save
         </Button>
       </div>
diff --git a/src/ui/components/shared/WorkspaceSettingsModal/Details.tsx b/src/ui/components/shared/WorkspaceSettingsModal/Details.tsx
index 21697f7f4bb..9608919ff85 100644
--- a/src/ui/components/shared/WorkspaceSettingsModal/Details.tsx
+++ b/src/ui/components/shared/WorkspaceSettingsModal/Details.tsx
@@ -1,13 +1,11 @@
-import React from "react";
-
+import { Button } from "replay-next/components/Button";
 import { SubscriptionWithPricing, Workspace } from "shared/graphql/types";
 import { inUnpaidFreeTrial, subscriptionEndsIn } from "ui/utils/workspace";
 
-import { Button } from "../Button";
 import { SettingsHeader } from "../SettingsModal/SettingsBody";
 import { BillingBanners } from "./BillingBanners";
 import { PlanDetails } from "./PlanDetails";
-import { Views, formatPaymentMethod, isSubscriptionCancelled } from "./utils";
+import { formatPaymentMethod, isSubscriptionCancelled } from "./utils";
 
 function TrialDetails({
   workspace,
@@ -44,12 +42,10 @@ function TrialDetails({
           </p>
           <div className="flex justify-center">
             <Button
-              size="xl"
-              color="blue"
-              style="primary"
-              type="submit"
               className="w-full justify-center"
               onClick={onSelectPricing}
+              size="large"
+              type="submit"
             >
               Team Plan Pricing
             </Button>
diff --git a/src/ui/components/shared/WorkspaceSettingsModal/PricingPage.tsx b/src/ui/components/shared/WorkspaceSettingsModal/PricingPage.tsx
index b7b14b82ec0..d39815e3b19 100644
--- a/src/ui/components/shared/WorkspaceSettingsModal/PricingPage.tsx
+++ b/src/ui/components/shared/WorkspaceSettingsModal/PricingPage.tsx
@@ -1,9 +1,7 @@
-import React from "react";
-
+import { Button } from "replay-next/components/Button";
 import ExternalLink from "replay-next/components/ExternalLink";
 import { SubscriptionWithPricing } from "shared/graphql/types";
 
-import { Button } from "../Button";
 import { PlanDetails } from "./PlanDetails";
 
 export function PricingPage({
@@ -24,13 +22,7 @@ export function PricingPage({
         </ExternalLink>
       </p>
       <PlanDetails subscription={subscription} />
-      <Button
-        color="blue"
-        size="xl"
-        style="primary"
-        className="my-6 w-full justify-center"
-        onClick={onEnterCard}
-      >
+      <Button className="my-6 w-full justify-center" onClick={onEnterCard} size="large">
         Add Payment Method
       </Button>
       <ExternalLink href="https://www.replay.io/terms-of-use" className="underline">