Skip to content

Commit 21bbecf

Browse files
tstirrat15tstirrat15
committed
Replace all buttons with shadcn buttons
1 parent eec0fc5 commit 21bbecf

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%",
@@ -756,59 +727,59 @@ export function ThemedAppView(props: { datastore: DataStore }) {
756727
)}
757728
</div>
758729
{AppConfig().discord.inviteUrl ? (
759-
<Button
760-
className={classes.hideTextOnMed}
761-
size="small"
762-
href={AppConfig().discord.inviteUrl}
763-
startIcon={
730+
<Button asChild variant="link" size="sm">
731+
<a
732+
href={AppConfig().discord.inviteUrl}
733+
target="_blank"
734+
rel="noreferrer"
735+
>
764736
<DISCORD
765737
viewBox="0 0 71 55"
766738
style={{ height: "1em", width: "1em" }}
767739
/>
768-
}
769-
>
770-
Discuss on Discord
740+
<span className="hidden md:inline">Discuss on Discord</span>
741+
</a>
771742
</Button>
772743
) : (
773744
<span />
774745
)}
746+
{isSharingEnabled && (
747+
<Button
748+
size="sm"
749+
onClick={() => conductSharing()}
750+
variant="secondary"
751+
disabled={
752+
sharingState.status === SharingStatus.SHARING ||
753+
validationState.status === ValidationStatus.RUNNING
754+
}
755+
>
756+
<ShareIcon />
757+
<span className="hidden md:inline">Share</span>
758+
</Button>
759+
)}
775760
<Button
776-
className={clsx(TourElementClass.share, classes.hideTextOnMed, {
777-
[classes.hide]: !isSharingEnabled,
778-
})}
779-
size="small"
780-
onClick={() => conductSharing()}
781-
disabled={
782-
sharingState.status === SharingStatus.SHARING ||
783-
validationState.status === ValidationStatus.RUNNING
784-
}
785-
startIcon={<ShareIcon />}
786-
>
787-
Share
788-
</Button>
789-
<Button
790-
className={classes.hideTextOnMed}
791-
size="small"
761+
variant="secondary"
762+
size="sm"
792763
onClick={conductDownload}
793764
disabled={
794765
sharingState.status === SharingStatus.SHARING ||
795766
validationState.status === ValidationStatus.RUNNING
796767
}
797-
startIcon={<GetAppIcon />}
798768
>
799-
Download
769+
<GetAppIcon />
770+
<span className="hidden md:inline">Download</span>
800771
</Button>
801772
<Button
802-
className={classes.hideTextOnMed}
803-
size="small"
773+
size="sm"
774+
variant="secondary"
804775
onClick={conductUpload}
805776
disabled={
806777
sharingState.status === SharingStatus.SHARING ||
807778
validationState.status === ValidationStatus.RUNNING
808779
}
809-
startIcon={<InsertDriveFileIcon />}
810780
>
811-
Load From File
781+
<InsertDriveFileIcon />
782+
<span className="hidden md:inline">Load From File</span>
812783
</Button>
813784
</>
814785
)}
@@ -885,11 +856,8 @@ export function ThemedAppView(props: { datastore: DataStore }) {
885856
<div className={classes.contextToolbar}>
886857
<div className={classes.contextTools}>
887858
{currentItem?.kind === DataStoreItemKind.SCHEMA && (
888-
<Button
889-
variant="contained"
890-
onClick={formatSchema}
891-
startIcon={<FormatTextdirectionLToRIcon />}
892-
>
859+
<Button variant="secondary" onClick={formatSchema}>
860+
<FormatTextdirectionLToRIcon />
893861
Format
894862
</Button>
895863
)}
@@ -922,115 +890,110 @@ export function ThemedAppView(props: { datastore: DataStore }) {
922890
</div>
923891
)}
924892

925-
{currentItem?.kind === DataStoreItemKind.ASSERTIONS && (
926-
<ValidateButton
927-
datastore={datastore}
928-
validationState={validationState}
929-
conductValidation={conductValidation}
930-
developerService={developerService}
931-
/>
932-
)}
933-
934-
{currentItem?.kind === DataStoreItemKind.EXPECTED_RELATIONS && (
935-
<ValidateButton
936-
datastore={datastore}
937-
validationState={validationState}
938-
conductValidation={conductValidation}
939-
developerService={developerService}
940-
/>
941-
)}
893+
{currentItem?.kind &&
894+
[
895+
DataStoreItemKind.ASSERTIONS,
896+
DataStoreItemKind.EXPECTED_RELATIONS,
897+
].includes(currentItem.kind) && (
898+
<ValidateButton
899+
datastore={datastore}
900+
validationState={validationState}
901+
conductValidation={conductValidation}
902+
developerService={developerService}
903+
/>
904+
)}
942905

943906
{currentItem?.kind === DataStoreItemKind.EXPECTED_RELATIONS &&
944907
previousValidationForDiff === undefined && (
945-
<ButtonGroup className={classes.expectedActions}>
908+
<>
946909
<Button
947-
variant="contained"
910+
variant="secondary"
948911
disabled={
949912
developerService.state.status !== "ready" ||
950913
validationState.status === ValidationStatus.RUNNING
951914
}
952-
startIcon={<RefreshIcon />}
953915
onClick={() => handleGenerateAndUpdate(false)}
954916
>
917+
<RefreshIcon />
955918
Re-Generate
956919
</Button>
957920
<Button
958-
variant="contained"
921+
variant="secondary"
959922
disabled={
960923
developerService.state.status !== "ready" ||
961924
validationState.status === ValidationStatus.RUNNING
962925
}
963-
startIcon={<CompareIcon />}
964926
onClick={() => handleGenerateAndUpdate(true)}
965927
>
928+
<CompareIcon />
966929
Compute and Diff
967930
</Button>
968-
</ButtonGroup>
931+
</>
969932
)}
970933
{currentItem?.kind === DataStoreItemKind.EXPECTED_RELATIONS &&
971934
previousValidationForDiff !== undefined && (
972-
<ButtonGroup className={classes.expectedActions}>
973-
<Button
974-
variant="contained"
975-
className={classes.btnAccept}
976-
startIcon={<CheckCircleIcon />}
977-
onClick={handleAcceptDiff}
978-
>
935+
<>
936+
<Button variant="default" onClick={handleAcceptDiff}>
937+
<CheckCircleIcon />
979938
Accept Update
980939
</Button>
981-
<Button
982-
variant="contained"
983-
className={classes.btnRevert}
984-
startIcon={<HighlightOffIcon />}
985-
onClick={handleRevertDiff}
986-
>
940+
<Button variant="destructive" onClick={handleRevertDiff}>
941+
<HighlightOffIcon />
987942
Revert Update
988943
</Button>
989-
</ButtonGroup>
944+
</>
990945
)}
991946
</div>
992947
<div />
993948
{currentItem?.kind === DataStoreItemKind.SCHEMA && (
994-
<Button
995-
className={classes.docsLink}
996-
href="https://authzed.com/docs/spicedb/modeling/developing-a-schema"
997-
target="_blank"
998-
startIcon={<DescriptionIcon />}
999-
>
1000-
Schema Development Guide
949+
<Button asChild variant="link" className={classes.docsLink}>
950+
<a
951+
href="https://authzed.com/docs/spicedb/modeling/developing-a-schema"
952+
target="_blank"
953+
rel="noreferrer"
954+
>
955+
<DescriptionIcon />
956+
Schema Development Guide
957+
</a>
1001958
</Button>
1002959
)}
1003960

1004961
{currentItem?.kind === DataStoreItemKind.RELATIONSHIPS && (
1005-
<Button
1006-
className={classes.docsLink}
1007-
href="https://authzed.com/docs/spicedb/modeling/developing-a-schema#creating-test-relationships"
1008-
target="_blank"
1009-
startIcon={<DescriptionIcon />}
1010-
>
1011-
Test Relationships Guide
962+
<Button asChild variant="link" className={classes.docsLink}>
963+
<a
964+
href="https://authzed.com/docs/spicedb/modeling/developing-a-schema#creating-test-relationships"
965+
target="_blank"
966+
rel="noreferrer"
967+
>
968+
<DescriptionIcon />
969+
Test Relationships Guide
970+
</a>
1012971
</Button>
1013972
)}
1014973

1015974
{currentItem?.kind === DataStoreItemKind.ASSERTIONS && (
1016-
<Button
1017-
className={classes.docsLink}
1018-
href="https://authzed.com/docs/spicedb/modeling/developing-a-schema#assertions"
1019-
target="_blank"
1020-
startIcon={<DescriptionIcon />}
1021-
>
1022-
Assertions Guide
975+
<Button asChild variant="link" className={classes.docsLink}>
976+
<a
977+
href="https://authzed.com/docs/spicedb/modeling/developing-a-schema#assertions"
978+
target="_blank"
979+
rel="noreferrer"
980+
>
981+
<DescriptionIcon />
982+
Assertions Guide
983+
</a>
1023984
</Button>
1024985
)}
1025986

1026987
{currentItem?.kind === DataStoreItemKind.EXPECTED_RELATIONS && (
1027-
<Button
1028-
className={classes.docsLink}
1029-
href="https://authzed.com/docs/spicedb/modeling/developing-a-schema#expected-relations"
1030-
target="_blank"
1031-
startIcon={<DescriptionIcon />}
1032-
>
1033-
Expected Relations Guide
988+
<Button asChild className={classes.docsLink} variant="link">
989+
<a
990+
href="https://authzed.com/docs/spicedb/modeling/developing-a-schema#expected-relations"
991+
target="_blank"
992+
rel="noreferrer"
993+
>
994+
<DescriptionIcon />
995+
Expected Relations Guide
996+
</a>
1034997
</Button>
1035998
)}
1036999
</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)