From cbbd8ab066080d20069029d8b5102312e8326ce1 Mon Sep 17 00:00:00 2001
From: CactusBlue <thecactusblue@gmail.com>
Date: Fri, 14 Mar 2025 18:36:04 -0700
Subject: [PATCH] Hide Last Used (#547)

<!-- ELLIPSIS_HIDDEN -->


> [!IMPORTANT]
> `OAuthButton` now conditionally hides the 'last used' label based on
the `isMock` prop, affecting mock environments.
>
>   - **Behavior**:
> - `OAuthButton` in `oauth-button.tsx` now accepts `isMock` prop to
conditionally hide 'last used' label.
> - In `oauth-button-group.tsx`, `OAuthButton` is passed `isMock` based
on `mockProject` presence.
>   - **Props**:
> - Added `isMock` prop to `OAuthButton` to control display of 'last
used' label.
>   - **Rendering**:
>     - `lastUsed` label in `OAuthButton` is hidden if `isMock` is true.
>
> <sup>This description was created by </sup>[<img alt="Ellipsis"
src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=stack-auth%2Fstack-auth&utm_source=github&utm_medium=referral)<sup>
for 310760fa7c098d7019c06bf6205bf89c66d75b97. It will automatically
update as commits are pushed.</sup>


<!-- ELLIPSIS_HIDDEN -->

---------

Co-authored-by: Zai Shi <zaishi00@outlook.com>
---
 packages/template/src/components/oauth-button-group.tsx | 4 +++-
 packages/template/src/components/oauth-button.tsx       | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/template/src/components/oauth-button-group.tsx b/packages/template/src/components/oauth-button-group.tsx
index c156dd5df..ea20813b1 100644
--- a/packages/template/src/components/oauth-button-group.tsx
+++ b/packages/template/src/components/oauth-button-group.tsx
@@ -21,7 +21,9 @@ export function OAuthButtonGroup({
   return (
     <div className='gap-4 flex flex-col items-stretch stack-scope'>
       {project.config.oauthProviders.map(p => (
-        <OAuthButton key={p.id} provider={p.id} type={type}/>
+        <OAuthButton key={p.id} provider={p.id} type={type}
+          isMock={!!mockProject}
+        />
       ))}
     </div>
   );
diff --git a/packages/template/src/components/oauth-button.tsx b/packages/template/src/components/oauth-button.tsx
index 3fef74dde..8743e73aa 100644
--- a/packages/template/src/components/oauth-button.tsx
+++ b/packages/template/src/components/oauth-button.tsx
@@ -18,9 +18,11 @@ const changeColor = (c: Color, value: number) => {
 export function OAuthButton({
   provider,
   type,
+  isMock = false,
 }: {
   provider: string,
   type: 'sign-in' | 'sign-up',
+  isMock?: boolean,
 }) {
   const { t } = useTranslation();
   const stackApp = useStackApp();
@@ -172,7 +174,7 @@ export function OAuthButton({
         }}
         className={`stack-oauth-button-${styleId} stack-scope relative`}
       >
-        {lastUsed === provider && (
+        {!isMock && lastUsed === provider && (
           <span className="absolute -top-2 -right-2 bg-blue-500 text-white text-xs px-2 py-1 rounded-md">
             last
           </span>