From 868e54c787b304927a8b84707599eac6401c95cd Mon Sep 17 00:00:00 2001
From: Tanner Stirrat <tstirrat@gmail.com>
Date: Fri, 16 May 2025 18:19:30 -0600
Subject: [PATCH] Replace all buttons with shadcn buttons

---
 src/components/FullPlayground.tsx   | 223 ++++++++++++----------------
 src/components/InlinePlayground.tsx |  19 +--
 src/components/ValidationButton.tsx |   6 +-
 3 files changed, 106 insertions(+), 142 deletions(-)

diff --git a/src/components/FullPlayground.tsx b/src/components/FullPlayground.tsx
index 373b247..909919e 100644
--- a/src/components/FullPlayground.tsx
+++ b/src/components/FullPlayground.tsx
@@ -11,8 +11,7 @@ import { useZedTerminalService } from "../spicedb-common/services/zedterminalser
 import { parseValidationYAML } from "../spicedb-common/validationfileformat";
 import { LinearProgress, Tab, Tabs, Tooltip } from "@material-ui/core";
 import AppBar from "@material-ui/core/AppBar";
-import Button from "@material-ui/core/Button";
-import ButtonGroup from "@material-ui/core/ButtonGroup";
+import { Button } from "@/components/ui/button";
 import TextField from "@material-ui/core/TextField";
 import {
   Theme,
@@ -268,22 +267,6 @@ const useStyles = makeStyles((theme: Theme) =>
       height: "60vh",
       width: "100%",
     },
-    hideTextOnMed: {
-      [theme.breakpoints.down("md")]: {
-        justifyContent: "flex-start",
-        overflow: "hidden",
-        width: "28px",
-        minWidth: "28px",
-        "& .MuiButton-label": {
-          justifyContent: "flex-start",
-          overflow: "hidden",
-          width: "28px",
-          "& .MuiButton-startIcon.MuiButton-iconSizeSmall": {
-            marginLeft: "0px",
-          },
-        },
-      },
-    },
     hide: {
       display: "none",
     },
@@ -295,18 +278,6 @@ const useStyles = makeStyles((theme: Theme) =>
       gridTemplateColumns: "1fr auto",
       alignItems: "center",
     },
-    btnAccept: {
-      "& .MuiSvgIcon-root": {
-        fill: theme.palette.success.main,
-      },
-      color: theme.palette.getContrastText(theme.palette.success.main),
-    },
-    btnRevert: {
-      "& .MuiSvgIcon-root": {
-        fill: theme.palette.error.main,
-      },
-      color: theme.palette.getContrastText(theme.palette.error.main),
-    },
     tenantGraphContainer: {
       width: "100%",
       height: "100%",
@@ -759,59 +730,59 @@ export function ThemedAppView(props: { datastore: DataStore }) {
               )}
             </div>
             {AppConfig().discord.inviteUrl ? (
-              <Button
-                className={classes.hideTextOnMed}
-                size="small"
-                href={AppConfig().discord.inviteUrl}
-                startIcon={
+              <Button asChild variant="link" size="sm">
+                <a
+                  href={AppConfig().discord.inviteUrl}
+                  target="_blank"
+                  rel="noreferrer"
+                >
                   <DISCORD
                     viewBox="0 0 71 55"
                     style={{ height: "1em", width: "1em" }}
                   />
-                }
-              >
-                Discuss on Discord
+                  <span className="hidden md:inline">Discuss on Discord</span>
+                </a>
               </Button>
             ) : (
               <span />
             )}
+            {isSharingEnabled && (
+              <Button
+                size="sm"
+                onClick={() => conductSharing()}
+                variant="secondary"
+                disabled={
+                  sharingState.status === SharingStatus.SHARING ||
+                  validationState.status === ValidationStatus.RUNNING
+                }
+              >
+                <ShareIcon />
+                <span className="hidden md:inline">Share</span>
+              </Button>
+            )}
             <Button
-              className={clsx(TourElementClass.share, classes.hideTextOnMed, {
-                [classes.hide]: !isSharingEnabled,
-              })}
-              size="small"
-              onClick={() => conductSharing()}
-              disabled={
-                sharingState.status === SharingStatus.SHARING ||
-                validationState.status === ValidationStatus.RUNNING
-              }
-              startIcon={<ShareIcon />}
-            >
-              Share
-            </Button>
-            <Button
-              className={classes.hideTextOnMed}
-              size="small"
+              variant="secondary"
+              size="sm"
               onClick={conductDownload}
               disabled={
                 sharingState.status === SharingStatus.SHARING ||
                 validationState.status === ValidationStatus.RUNNING
               }
-              startIcon={<GetAppIcon />}
             >
-              Download
+              <GetAppIcon />
+              <span className="hidden md:inline">Download</span>
             </Button>
             <Button
-              className={classes.hideTextOnMed}
-              size="small"
+              size="sm"
+              variant="secondary"
               onClick={conductUpload}
               disabled={
                 sharingState.status === SharingStatus.SHARING ||
                 validationState.status === ValidationStatus.RUNNING
               }
-              startIcon={<InsertDriveFileIcon />}
             >
-              Load From File
+              <InsertDriveFileIcon />
+              <span className="hidden md:inline">Load From File</span>
             </Button>
           </>
         )}
@@ -888,11 +859,8 @@ export function ThemedAppView(props: { datastore: DataStore }) {
         <div className={classes.contextToolbar}>
           <div className={classes.contextTools}>
             {currentItem?.kind === DataStoreItemKind.SCHEMA && (
-              <Button
-                variant="contained"
-                onClick={formatSchema}
-                startIcon={<FormatTextdirectionLToRIcon />}
-              >
+              <Button variant="secondary" onClick={formatSchema}>
+                <FormatTextdirectionLToRIcon />
                 Format
               </Button>
             )}
@@ -925,115 +893,110 @@ export function ThemedAppView(props: { datastore: DataStore }) {
               </div>
             )}
 
-            {currentItem?.kind === DataStoreItemKind.ASSERTIONS && (
-              <ValidateButton
-                datastore={datastore}
-                validationState={validationState}
-                conductValidation={conductValidation}
-                developerService={developerService}
-              />
-            )}
-
-            {currentItem?.kind === DataStoreItemKind.EXPECTED_RELATIONS && (
-              <ValidateButton
-                datastore={datastore}
-                validationState={validationState}
-                conductValidation={conductValidation}
-                developerService={developerService}
-              />
-            )}
+            {currentItem?.kind !== undefined &&
+              [
+                DataStoreItemKind.ASSERTIONS,
+                DataStoreItemKind.EXPECTED_RELATIONS,
+              ].includes(currentItem.kind) && (
+                <ValidateButton
+                  datastore={datastore}
+                  validationState={validationState}
+                  conductValidation={conductValidation}
+                  developerService={developerService}
+                />
+              )}
 
             {currentItem?.kind === DataStoreItemKind.EXPECTED_RELATIONS &&
               previousValidationForDiff === undefined && (
-                <ButtonGroup className={classes.expectedActions}>
+                <>
                   <Button
-                    variant="contained"
+                    variant="secondary"
                     disabled={
                       developerService.state.status !== "ready" ||
                       validationState.status === ValidationStatus.RUNNING
                     }
-                    startIcon={<RefreshIcon />}
                     onClick={() => handleGenerateAndUpdate(false)}
                   >
+                    <RefreshIcon />
                     Re-Generate
                   </Button>
                   <Button
-                    variant="contained"
+                    variant="secondary"
                     disabled={
                       developerService.state.status !== "ready" ||
                       validationState.status === ValidationStatus.RUNNING
                     }
-                    startIcon={<CompareIcon />}
                     onClick={() => handleGenerateAndUpdate(true)}
                   >
+                    <CompareIcon />
                     Compute and Diff
                   </Button>
-                </ButtonGroup>
+                </>
               )}
             {currentItem?.kind === DataStoreItemKind.EXPECTED_RELATIONS &&
               previousValidationForDiff !== undefined && (
-                <ButtonGroup className={classes.expectedActions}>
-                  <Button
-                    variant="contained"
-                    className={classes.btnAccept}
-                    startIcon={<CheckCircleIcon />}
-                    onClick={handleAcceptDiff}
-                  >
+                <>
+                  <Button variant="default" onClick={handleAcceptDiff}>
+                    <CheckCircleIcon />
                     Accept Update
                   </Button>
-                  <Button
-                    variant="contained"
-                    className={classes.btnRevert}
-                    startIcon={<HighlightOffIcon />}
-                    onClick={handleRevertDiff}
-                  >
+                  <Button variant="destructive" onClick={handleRevertDiff}>
+                    <HighlightOffIcon />
                     Revert Update
                   </Button>
-                </ButtonGroup>
+                </>
               )}
           </div>
           <div />
           {currentItem?.kind === DataStoreItemKind.SCHEMA && (
-            <Button
-              className={classes.docsLink}
-              href="https://authzed.com/docs/spicedb/modeling/developing-a-schema"
-              target="_blank"
-              startIcon={<DescriptionIcon />}
-            >
-              Schema Development Guide
+            <Button asChild variant="link" className={classes.docsLink}>
+              <a
+                href="https://authzed.com/docs/spicedb/modeling/developing-a-schema"
+                target="_blank"
+                rel="noreferrer"
+              >
+                <DescriptionIcon />
+                Schema Development Guide
+              </a>
             </Button>
           )}
 
           {currentItem?.kind === DataStoreItemKind.RELATIONSHIPS && (
-            <Button
-              className={classes.docsLink}
-              href="https://authzed.com/docs/spicedb/modeling/developing-a-schema#creating-test-relationships"
-              target="_blank"
-              startIcon={<DescriptionIcon />}
-            >
-              Test Relationships Guide
+            <Button asChild variant="link" className={classes.docsLink}>
+              <a
+                href="https://authzed.com/docs/spicedb/modeling/developing-a-schema#creating-test-relationships"
+                target="_blank"
+                rel="noreferrer"
+              >
+                <DescriptionIcon />
+                Test Relationships Guide
+              </a>
             </Button>
           )}
 
           {currentItem?.kind === DataStoreItemKind.ASSERTIONS && (
-            <Button
-              className={classes.docsLink}
-              href="https://authzed.com/docs/spicedb/modeling/developing-a-schema#assertions"
-              target="_blank"
-              startIcon={<DescriptionIcon />}
-            >
-              Assertions Guide
+            <Button asChild variant="link" className={classes.docsLink}>
+              <a
+                href="https://authzed.com/docs/spicedb/modeling/developing-a-schema#assertions"
+                target="_blank"
+                rel="noreferrer"
+              >
+                <DescriptionIcon />
+                Assertions Guide
+              </a>
             </Button>
           )}
 
           {currentItem?.kind === DataStoreItemKind.EXPECTED_RELATIONS && (
-            <Button
-              className={classes.docsLink}
-              href="https://authzed.com/docs/spicedb/modeling/developing-a-schema#expected-relations"
-              target="_blank"
-              startIcon={<DescriptionIcon />}
-            >
-              Expected Relations Guide
+            <Button asChild className={classes.docsLink} variant="link">
+              <a
+                href="https://authzed.com/docs/spicedb/modeling/developing-a-schema#expected-relations"
+                target="_blank"
+                rel="noreferrer"
+              >
+                <DescriptionIcon />
+                Expected Relations Guide
+              </a>
             </Button>
           )}
         </div>
diff --git a/src/components/InlinePlayground.tsx b/src/components/InlinePlayground.tsx
index 35a9b7b..d0cf448 100644
--- a/src/components/InlinePlayground.tsx
+++ b/src/components/InlinePlayground.tsx
@@ -4,7 +4,7 @@ import { parseSchema } from "../spicedb-common/parsers/dsl/dsl";
 import { parseRelationships } from "../spicedb-common/parsing";
 import { useDeveloperService } from "../spicedb-common/services/developerservice";
 import AppBar from "@material-ui/core/AppBar";
-import Button from "@material-ui/core/Button";
+import { Button } from "@/components/ui/button";
 import {
   createStyles,
   darken,
@@ -193,14 +193,15 @@ function InlinePlaygroundUI(props: { datastore: DataStore }) {
           />
         </Tabs>
         <div className={classes.buttonContainer}>
-          <Button
-            variant="contained"
-            color="primary"
-            href={window.location.toString().replace("/i/", "/s/")}
-            target="_blank"
-            startIcon={<LaunchIcon />}
-          >
-            Open
+          <Button asChild variant="link">
+            <a
+              href={window.location.toString().replace("/i/", "/s/")}
+              target="_blank"
+              rel="noreferrer"
+            >
+              <LaunchIcon />
+              Open
+            </a>
           </Button>
         </div>
       </AppBar>
diff --git a/src/components/ValidationButton.tsx b/src/components/ValidationButton.tsx
index 76c7661..e5e794f 100644
--- a/src/components/ValidationButton.tsx
+++ b/src/components/ValidationButton.tsx
@@ -1,5 +1,5 @@
 import { DeveloperService } from "../spicedb-common/services/developerservice";
-import Button from "@material-ui/core/Button";
+import { Button } from "@/components/ui/button";
 import { Theme, createStyles, makeStyles } from "@material-ui/core/styles";
 import { fade } from "@material-ui/core/styles/colorManipulator";
 import CheckCircleIcon from "@material-ui/icons/CheckCircle";
@@ -96,8 +96,7 @@ export function ValidateButton(props: {
           "Validation not run"}
       </div>
       <Button
-        variant="contained"
-        startIcon={<PlayCircleFilledIcon />}
+        variant="secondary"
         className={TourElementClass.run}
         disabled={
           props.developerService.state.status !== "ready" ||
@@ -105,6 +104,7 @@ export function ValidateButton(props: {
         }
         onClick={props.conductValidation}
       >
+        <PlayCircleFilledIcon />
         Run
       </Button>
     </div>