Skip to content

Commit 868e54c

Browse files
tstirrat15tstirrat15
committed
Replace all buttons with shadcn buttons
1 parent c1c5768 commit 868e54c

File tree

3 files changed

+106
-142
lines changed

3 files changed

+106
-142
lines changed

‎src/components/FullPlayground.tsx‎

Lines changed: 93 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,7 @@ import { useZedTerminalService } from "../spicedb-common/services/zedterminalser
1111
import { parseValidationYAML } from "../spicedb-common/validationfileformat";
1212
import { LinearProgress, Tab, Tabs, Tooltip } from "@material-ui/core";
1313
import AppBar from "@material-ui/core/AppBar";
14-
import Button from "@material-ui/core/Button";
15-
import ButtonGroup from "@material-ui/core/ButtonGroup";
14+
import { Button } from "@/components/ui/button";
1615
import TextField from "@material-ui/core/TextField";
1716
import {
1817
Theme,
@@ -268,22 +267,6 @@ const useStyles = makeStyles((theme: Theme) =>
268267
height: "60vh",
269268
width: "100%",
270269
},
271-
hideTextOnMed: {
272-
[theme.breakpoints.down("md")]: {
273-
justifyContent: "flex-start",
274-
overflow: "hidden",
275-
width: "28px",
276-
minWidth: "28px",
277-
"& .MuiButton-label": {
278-
justifyContent: "flex-start",
279-
overflow: "hidden",
280-
width: "28px",
281-
"& .MuiButton-startIcon.MuiButton-iconSizeSmall": {
282-
marginLeft: "0px",
283-
},
284-
},
285-
},
286-
},
287270
hide: {
288271
display: "none",
289272
},
@@ -295,18 +278,6 @@ const useStyles = makeStyles((theme: Theme) =>
295278
gridTemplateColumns: "1fr auto",
296279
alignItems: "center",
297280
},
298-
btnAccept: {
299-
"& .MuiSvgIcon-root": {
300-
fill: theme.palette.success.main,
301-
},
302-
color: theme.palette.getContrastText(theme.palette.success.main),
303-
},
304-
btnRevert: {
305-
"& .MuiSvgIcon-root": {
306-
fill: theme.palette.error.main,
307-
},
308-
color: theme.palette.getContrastText(theme.palette.error.main),
309-
},
310281
tenantGraphContainer: {
311282
width: "100%",
312283
height: "100%",
@@ -759,59 +730,59 @@ export function ThemedAppView(props: { datastore: DataStore }) {
759730
)}
760731
</div>
761732
{AppConfig().discord.inviteUrl ? (
762-
<Button
763-
className={classes.hideTextOnMed}
764-
size="small"
765-
href={AppConfig().discord.inviteUrl}
766-
startIcon={
733+
<Button asChild variant="link" size="sm">
734+
<a
735+
href={AppConfig().discord.inviteUrl}
736+
target="_blank"
737+
rel="noreferrer"
738+
>
767739
<DISCORD
768740
viewBox="0 0 71 55"
769741
style={{ height: "1em", width: "1em" }}
770742
/>
771-
}
772-
>
773-
Discuss on Discord
743+
<span className="hidden md:inline">Discuss on Discord</span>
744+
</a>
774745
</Button>
775746
) : (
776747
<span />
777748
)}
749+
{isSharingEnabled && (
750+
<Button
751+
size="sm"
752+
onClick={() => conductSharing()}
753+
variant="secondary"
754+
disabled={
755+
sharingState.status === SharingStatus.SHARING ||
756+
validationState.status === ValidationStatus.RUNNING
757+
}
758+
>
759+
<ShareIcon />
760+
<span className="hidden md:inline">Share</span>
761+
</Button>
762+
)}
778763
<Button
779-
className={clsx(TourElementClass.share, classes.hideTextOnMed, {
780-
[classes.hide]: !isSharingEnabled,
781-
})}
782-
size="small"
783-
onClick={() => conductSharing()}
784-
disabled={
785-
sharingState.status === SharingStatus.SHARING ||
786-
validationState.status === ValidationStatus.RUNNING
787-
}
788-
startIcon={<ShareIcon />}
789-
>
790-
Share
791-
</Button>
792-
<Button
793-
className={classes.hideTextOnMed}
794-
size="small"
764+
variant="secondary"
765+
size="sm"
795766
onClick={conductDownload}
796767
disabled={
797768
sharingState.status === SharingStatus.SHARING ||
798769
validationState.status === ValidationStatus.RUNNING
799770
}
800-
startIcon={<GetAppIcon />}
801771
>
802-
Download
772+
<GetAppIcon />
773+
<span className="hidden md:inline">Download</span>
803774
</Button>
804775
<Button
805-
className={classes.hideTextOnMed}
806-
size="small"
776+
size="sm"
777+
variant="secondary"
807778
onClick={conductUpload}
808779
disabled={
809780
sharingState.status === SharingStatus.SHARING ||
810781
validationState.status === ValidationStatus.RUNNING
811782
}
812-
startIcon={<InsertDriveFileIcon />}
813783
>
814-
Load From File
784+
<InsertDriveFileIcon />
785+
<span className="hidden md:inline">Load From File</span>
815786
</Button>
816787
</>
817788
)}
@@ -888,11 +859,8 @@ export function ThemedAppView(props: { datastore: DataStore }) {
888859
<div className={classes.contextToolbar}>
889860
<div className={classes.contextTools}>
890861
{currentItem?.kind === DataStoreItemKind.SCHEMA && (
891-
<Button
892-
variant="contained"
893-
onClick={formatSchema}
894-
startIcon={<FormatTextdirectionLToRIcon />}
895-
>
862+
<Button variant="secondary" onClick={formatSchema}>
863+
<FormatTextdirectionLToRIcon />
896864
Format
897865
</Button>
898866
)}
@@ -925,115 +893,110 @@ export function ThemedAppView(props: { datastore: DataStore }) {
925893
</div>
926894
)}
927895

928-
{currentItem?.kind === DataStoreItemKind.ASSERTIONS && (
929-
<ValidateButton
930-
datastore={datastore}
931-
validationState={validationState}
932-
conductValidation={conductValidation}
933-
developerService={developerService}
934-
/>
935-
)}
936-
937-
{currentItem?.kind === DataStoreItemKind.EXPECTED_RELATIONS && (
938-
<ValidateButton
939-
datastore={datastore}
940-
validationState={validationState}
941-
conductValidation={conductValidation}
942-
developerService={developerService}
943-
/>
944-
)}
896+
{currentItem?.kind !== undefined &&
897+
[
898+
DataStoreItemKind.ASSERTIONS,
899+
DataStoreItemKind.EXPECTED_RELATIONS,
900+
].includes(currentItem.kind) && (
901+
<ValidateButton
902+
datastore={datastore}
903+
validationState={validationState}
904+
conductValidation={conductValidation}
905+
developerService={developerService}
906+
/>
907+
)}
945908

946909
{currentItem?.kind === DataStoreItemKind.EXPECTED_RELATIONS &&
947910
previousValidationForDiff === undefined && (
948-
<ButtonGroup className={classes.expectedActions}>
911+
<>
949912
<Button
950-
variant="contained"
913+
variant="secondary"
951914
disabled={
952915
developerService.state.status !== "ready" ||
953916
validationState.status === ValidationStatus.RUNNING
954917
}
955-
startIcon={<RefreshIcon />}
956918
onClick={() => handleGenerateAndUpdate(false)}
957919
>
920+
<RefreshIcon />
958921
Re-Generate
959922
</Button>
960923
<Button
961-
variant="contained"
924+
variant="secondary"
962925
disabled={
963926
developerService.state.status !== "ready" ||
964927
validationState.status === ValidationStatus.RUNNING
965928
}
966-
startIcon={<CompareIcon />}
967929
onClick={() => handleGenerateAndUpdate(true)}
968930
>
931+
<CompareIcon />
969932
Compute and Diff
970933
</Button>
971-
</ButtonGroup>
934+
</>
972935
)}
973936
{currentItem?.kind === DataStoreItemKind.EXPECTED_RELATIONS &&
974937
previousValidationForDiff !== undefined && (
975-
<ButtonGroup className={classes.expectedActions}>
976-
<Button
977-
variant="contained"
978-
className={classes.btnAccept}
979-
startIcon={<CheckCircleIcon />}
980-
onClick={handleAcceptDiff}
981-
>
938+
<>
939+
<Button variant="default" onClick={handleAcceptDiff}>
940+
<CheckCircleIcon />
982941
Accept Update
983942
</Button>
984-
<Button
985-
variant="contained"
986-
className={classes.btnRevert}
987-
startIcon={<HighlightOffIcon />}
988-
onClick={handleRevertDiff}
989-
>
943+
<Button variant="destructive" onClick={handleRevertDiff}>
944+
<HighlightOffIcon />
990945
Revert Update
991946
</Button>
992-
</ButtonGroup>
947+
</>
993948
)}
994949
</div>
995950
<div />
996951
{currentItem?.kind === DataStoreItemKind.SCHEMA && (
997-
<Button
998-
className={classes.docsLink}
999-
href="https://authzed.com/docs/spicedb/modeling/developing-a-schema"
1000-
target="_blank"
1001-
startIcon={<DescriptionIcon />}
1002-
>
1003-
Schema Development Guide
952+
<Button asChild variant="link" className={classes.docsLink}>
953+
<a
954+
href="https://authzed.com/docs/spicedb/modeling/developing-a-schema"
955+
target="_blank"
956+
rel="noreferrer"
957+
>
958+
<DescriptionIcon />
959+
Schema Development Guide
960+
</a>
1004961
</Button>
1005962
)}
1006963

1007964
{currentItem?.kind === DataStoreItemKind.RELATIONSHIPS && (
1008-
<Button
1009-
className={classes.docsLink}
1010-
href="https://authzed.com/docs/spicedb/modeling/developing-a-schema#creating-test-relationships"
1011-
target="_blank"
1012-
startIcon={<DescriptionIcon />}
1013-
>
1014-
Test Relationships Guide
965+
<Button asChild variant="link" className={classes.docsLink}>
966+
<a
967+
href="https://authzed.com/docs/spicedb/modeling/developing-a-schema#creating-test-relationships"
968+
target="_blank"
969+
rel="noreferrer"
970+
>
971+
<DescriptionIcon />
972+
Test Relationships Guide
973+
</a>
1015974
</Button>
1016975
)}
1017976

1018977
{currentItem?.kind === DataStoreItemKind.ASSERTIONS && (
1019-
<Button
1020-
className={classes.docsLink}
1021-
href="https://authzed.com/docs/spicedb/modeling/developing-a-schema#assertions"
1022-
target="_blank"
1023-
startIcon={<DescriptionIcon />}
1024-
>
1025-
Assertions Guide
978+
<Button asChild variant="link" className={classes.docsLink}>
979+
<a
980+
href="https://authzed.com/docs/spicedb/modeling/developing-a-schema#assertions"
981+
target="_blank"
982+
rel="noreferrer"
983+
>
984+
<DescriptionIcon />
985+
Assertions Guide
986+
</a>
1026987
</Button>
1027988
)}
1028989

1029990
{currentItem?.kind === DataStoreItemKind.EXPECTED_RELATIONS && (
1030-
<Button
1031-
className={classes.docsLink}
1032-
href="https://authzed.com/docs/spicedb/modeling/developing-a-schema#expected-relations"
1033-
target="_blank"
1034-
startIcon={<DescriptionIcon />}
1035-
>
1036-
Expected Relations Guide
991+
<Button asChild className={classes.docsLink} variant="link">
992+
<a
993+
href="https://authzed.com/docs/spicedb/modeling/developing-a-schema#expected-relations"
994+
target="_blank"
995+
rel="noreferrer"
996+
>
997+
<DescriptionIcon />
998+
Expected Relations Guide
999+
</a>
10371000
</Button>
10381001
)}
10391002
</div>

‎src/components/InlinePlayground.tsx‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { parseSchema } from "../spicedb-common/parsers/dsl/dsl";
44
import { parseRelationships } from "../spicedb-common/parsing";
55
import { useDeveloperService } from "../spicedb-common/services/developerservice";
66
import AppBar from "@material-ui/core/AppBar";
7-
import Button from "@material-ui/core/Button";
7+
import { Button } from "@/components/ui/button";
88
import {
99
createStyles,
1010
darken,
@@ -193,14 +193,15 @@ function InlinePlaygroundUI(props: { datastore: DataStore }) {
193193
/>
194194
</Tabs>
195195
<div className={classes.buttonContainer}>
196-
<Button
197-
variant="contained"
198-
color="primary"
199-
href={window.location.toString().replace("/i/", "/s/")}
200-
target="_blank"
201-
startIcon={<LaunchIcon />}
202-
>
203-
Open
196+
<Button asChild variant="link">
197+
<a
198+
href={window.location.toString().replace("/i/", "/s/")}
199+
target="_blank"
200+
rel="noreferrer"
201+
>
202+
<LaunchIcon />
203+
Open
204+
</a>
204205
</Button>
205206
</div>
206207
</AppBar>

‎src/components/ValidationButton.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { DeveloperService } from "../spicedb-common/services/developerservice";
2-
import Button from "@material-ui/core/Button";
2+
import { Button } from "@/components/ui/button";
33
import { Theme, createStyles, makeStyles } from "@material-ui/core/styles";
44
import { fade } from "@material-ui/core/styles/colorManipulator";
55
import CheckCircleIcon from "@material-ui/icons/CheckCircle";
@@ -96,15 +96,15 @@ export function ValidateButton(props: {
9696
"Validation not run"}
9797
</div>
9898
<Button
99-
variant="contained"
100-
startIcon={<PlayCircleFilledIcon />}
99+
variant="secondary"
101100
className={TourElementClass.run}
102101
disabled={
103102
props.developerService.state.status !== "ready" ||
104103
props.validationState.status === ValidationStatus.RUNNING
105104
}
106105
onClick={props.conductValidation}
107106
>
107+
<PlayCircleFilledIcon />
108108
Run
109109
</Button>
110110
</div>

0 commit comments

Comments
 (0)