Skip to content

feat: add resource-action pills to custom roles table #14354

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 11 commits into from
Sep 3, 2024
Merged

feat: add resource-action pills to custom roles table #14354

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
5a61d3f
feat: add resource-action pills to custom roles table
jaaydenh Aug 19, 2024
83c5b09
fix: remove permission from theme and change name to colorRoles
jaaydenh Aug 21, 2024
d78f9a7
fix: revert name from colorRoles to roles
jaaydenh Aug 21, 2024
a7b63ba
fix: format
jaaydenh Aug 30, 2024
437bbd0
fix: custom role with no permissions
jaaydenh Aug 31, 2024
9514f30
feat: extract permissions pull list component and add tests
jaaydenh Aug 31, 2024
9497583
chore: undo color roles name change
jaaydenh Sep 3, 2024
fae3881
feat: add experimental pill colors
jaaydenh Sep 3, 2024
de5e171
fix: format
jaaydenh Sep 3, 2024
af142e3
chore: update experiment name
jaaydenh Sep 3, 2024
1b10a76
chore: cleanup
jaaydenh Sep 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
fix: remove permission from theme and change name to colorRoles
  • Loading branch information
@jaaydenh
jaaydenh committed Sep 3, 2024
commit 83c5b099e88f5c1ddbb2c3386417945a256e248e
6 changes: 3 additions & 3 deletions site/src/components/ActiveUserChart/ActiveUserChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,9 +127,9 @@ export const ActiveUserChart: FC<ActiveUserChartProps> = ({
{
label: `${interval === "day" ? "Daily" : "Weekly"} Active Users`,
data: chartData,
pointBackgroundColor: theme.roles.active.outline,
pointBorderColor: theme.roles.active.outline,
borderColor: theme.roles.active.outline,
pointBackgroundColor: theme.colorRoles.active.outline,
pointBorderColor: theme.colorRoles.active.outline,
borderColor: theme.colorRoles.active.outline,
},
],
}}
Expand Down
48 changes: 24 additions & 24 deletions site/src/components/Badges/Badges.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,19 +24,19 @@ const styles = {
},

enabledBadge: (theme) => ({
border: `1px solid ${theme.roles.success.outline}`,
backgroundColor: theme.roles.success.background,
color: theme.roles.success.text,
border: `1px solid ${theme.colorRoles.success.outline}`,
backgroundColor: theme.colorRoles.success.background,
color: theme.colorRoles.success.text,
}),
errorBadge: (theme) => ({
border: `1px solid ${theme.roles.error.outline}`,
backgroundColor: theme.roles.error.background,
color: theme.roles.error.text,
border: `1px solid ${theme.colorRoles.error.outline}`,
backgroundColor: theme.colorRoles.error.background,
color: theme.colorRoles.error.text,
}),
warnBadge: (theme) => ({
border: `1px solid ${theme.roles.warning.outline}`,
backgroundColor: theme.roles.warning.background,
color: theme.roles.warning.text,
border: `1px solid ${theme.colorRoles.warning.outline}`,
backgroundColor: theme.colorRoles.warning.background,
color: theme.colorRoles.warning.text,
}),
} satisfies Record<string, Interpolation<Theme>>;

Expand Down Expand Up @@ -112,9 +112,9 @@ export const EnterpriseBadge: FC = () => {
css={[
styles.badge,
(theme) => ({
backgroundColor: theme.roles.notice.background,
border: `1px solid ${theme.roles.notice.outline}`,
color: theme.roles.notice.text,
backgroundColor: theme.colorRoles.notice.background,
border: `1px solid ${theme.colorRoles.notice.outline}`,
color: theme.colorRoles.notice.text,
}),
]}
>
Expand All @@ -129,9 +129,9 @@ export const PremiumBadge: FC = () => {
css={[
styles.badge,
(theme) => ({
backgroundColor: theme.roles.notice.background,
border: `1px solid ${theme.roles.notice.outline}`,
color: theme.roles.notice.text,
backgroundColor: theme.colorRoles.notice.background,
border: `1px solid ${theme.colorRoles.notice.outline}`,
color: theme.colorRoles.notice.text,
}),
]}
>
Expand All @@ -146,9 +146,9 @@ export const PreviewBadge: FC = () => {
css={[
styles.badge,
(theme) => ({
border: `1px solid ${theme.roles.preview.outline}`,
backgroundColor: theme.roles.preview.background,
color: theme.roles.preview.text,
border: `1px solid ${theme.colorRoles.preview.outline}`,
backgroundColor: theme.colorRoles.preview.background,
color: theme.colorRoles.preview.text,
}),
]}
>
Expand All @@ -163,9 +163,9 @@ export const AlphaBadge: FC = () => {
css={[
styles.badge,
(theme) => ({
border: `1px solid ${theme.roles.preview.outline}`,
backgroundColor: theme.roles.preview.background,
color: theme.roles.preview.text,
border: `1px solid ${theme.colorRoles.preview.outline}`,
backgroundColor: theme.colorRoles.preview.background,
color: theme.colorRoles.preview.text,
}),
]}
>
Expand All @@ -180,9 +180,9 @@ export const DeprecatedBadge: FC = () => {
css={[
styles.badge,
(theme) => ({
border: `1px solid ${theme.roles.danger.outline}`,
backgroundColor: theme.roles.danger.background,
color: theme.roles.danger.text,
border: `1px solid ${theme.colorRoles.danger.outline}`,
backgroundColor: theme.colorRoles.danger.background,
color: theme.colorRoles.danger.text,
}),
]}
>
Expand Down
6 changes: 3 additions & 3 deletions site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,10 +108,10 @@ export const DeleteDialog: FC<DeleteDialogProps> = ({

const styles = {
callout: (theme) => ({
backgroundColor: theme.roles.danger.background,
border: `1px solid ${theme.roles.danger.outline}`,
backgroundColor: theme.colorRoles.danger.background,
border: `1px solid ${theme.colorRoles.danger.outline}`,
borderRadius: theme.shape.borderRadius,
color: theme.roles.danger.text,
color: theme.colorRoles.danger.text,
padding: "8px 16px",
}),
} satisfies Record<string, Interpolation<Theme>>;
16 changes: 8 additions & 8 deletions site/src/components/Dialogs/Dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,24 +74,24 @@ export const DialogActionButtons: FC<DialogActionButtonsProps> = ({
const styles = {
dangerButton: (theme) => ({
"&.MuiButton-contained": {
backgroundColor: theme.roles.danger.fill.solid,
borderColor: theme.roles.danger.fill.outline,
backgroundColor: theme.colorRoles.danger.fill.solid,
borderColor: theme.colorRoles.danger.fill.outline,

"&:not(.MuiLoadingButton-loading)": {
color: theme.roles.danger.fill.text,
color: theme.colorRoles.danger.fill.text,
},

"&:hover:not(:disabled)": {
backgroundColor: theme.roles.danger.hover.fill.solid,
borderColor: theme.roles.danger.hover.fill.outline,
backgroundColor: theme.colorRoles.danger.hover.fill.solid,
borderColor: theme.colorRoles.danger.hover.fill.outline,
},

"&.Mui-disabled": {
backgroundColor: theme.roles.danger.disabled.background,
borderColor: theme.roles.danger.disabled.outline,
backgroundColor: theme.colorRoles.danger.disabled.background,
borderColor: theme.colorRoles.danger.disabled.outline,

"&:not(.MuiLoadingButton-loading)": {
color: theme.roles.danger.disabled.fill.text,
color: theme.colorRoles.danger.disabled.fill.text,
},
},
},
Expand Down
2 changes: 1 addition & 1 deletion site/src/components/HelpTooltip/HelpTooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,7 +212,7 @@ const styles = {
display: "flex",
alignItems: "center",
...(theme.typography.body2 as CSSObject),
color: theme.roles.active.fill.outline,
color: theme.colorRoles.active.fill.outline,
}),

linkIcon: {
Expand Down
4 changes: 2 additions & 2 deletions site/src/components/InfoTooltip/InfoTooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
HelpTooltipTrigger,
} from "components/HelpTooltip/HelpTooltip";
import type { FC, ReactNode } from "react";
import type { ThemeRole } from "theme/roles";
import type { ThemeRole } from "theme/colorRoles";

interface InfoTooltipProps {
type?: ThemeRole;
Expand All @@ -22,7 +22,7 @@ export const InfoTooltip: FC<InfoTooltipProps> = ({
type = "info",
}) => {
const theme = useTheme();
const iconColor = theme.roles[type].outline;
const iconColor = theme.colorRoles[type].outline;

return (
<HelpTooltip>
Expand Down
6 changes: 3 additions & 3 deletions site/src/components/LastSeen/LastSeen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,13 @@ export const LastSeen: FC<LastSeenProps> = ({ at, ...attrs }) => {
// Since the agent reports on a 10m interval,
// the last_used_at can be inaccurate when recent.
message = "Now";
color = theme.roles.success.fill.solid;
color = theme.colorRoles.success.fill.solid;
} else if (t.isAfter(now.subtract(3, "day"))) {
color = theme.experimental.l2.text;
} else if (t.isAfter(now.subtract(1, "month"))) {
color = theme.roles.warning.fill.solid;
color = theme.colorRoles.warning.fill.solid;
} else if (t.isAfter(now.subtract(100, "year"))) {
color = theme.roles.error.fill.solid;
color = theme.colorRoles.error.fill.solid;
} else {
message = "Never";
}
Expand Down
18 changes: 9 additions & 9 deletions site/src/components/Logs/LogLine.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,29 +43,29 @@ const styles = {
padding: `0 var(--log-line-side-padding, ${DEFAULT_LOG_LINE_SIDE_PADDING}px)`,

"&.error": {
backgroundColor: theme.roles.error.background,
color: theme.roles.error.text,
backgroundColor: theme.colorRoles.error.background,
color: theme.colorRoles.error.text,

"& .dashed-line": {
backgroundColor: theme.roles.error.outline,
backgroundColor: theme.colorRoles.error.outline,
},
},

"&.debug": {
backgroundColor: theme.roles.notice.background,
color: theme.roles.notice.text,
backgroundColor: theme.colorRoles.notice.background,
color: theme.colorRoles.notice.text,

"& .dashed-line": {
backgroundColor: theme.roles.notice.outline,
backgroundColor: theme.colorRoles.notice.outline,
},
},

"&.warn": {
backgroundColor: theme.roles.warning.background,
color: theme.roles.warning.text,
backgroundColor: theme.colorRoles.warning.background,
color: theme.colorRoles.warning.text,

"& .dashed-line": {
backgroundColor: theme.roles.warning.outline,
backgroundColor: theme.colorRoles.warning.outline,
},
},
}),
Expand Down
8 changes: 4 additions & 4 deletions site/src/components/PaginationWidget/PageButtons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,14 +74,14 @@ const BasePageButton: FC<BasePageButtonProps> = ({
<Button
css={
highlighted && {
borderColor: theme.roles.active.outline,
backgroundColor: theme.roles.active.background,
borderColor: theme.colorRoles.active.outline,
backgroundColor: theme.colorRoles.active.background,

// Override the hover state with active colors, but not hover
// colors because clicking won't do anything.
"&:hover": {
borderColor: theme.roles.active.outline,
backgroundColor: theme.roles.active.background,
borderColor: theme.colorRoles.active.outline,
backgroundColor: theme.colorRoles.active.background,
},
}
}
Expand Down
6 changes: 3 additions & 3 deletions site/src/components/Paywall/Paywall.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,8 +81,8 @@ const styles = {
maxWidth: 920,
margin: "auto",
padding: 24,
backgroundImage: `linear-gradient(160deg, transparent, ${theme.roles.active.background})`,
border: `1px solid ${theme.roles.active.fill.outline}`,
backgroundImage: `linear-gradient(160deg, transparent, ${theme.colorRoles.active.background})`,
border: `1px solid ${theme.colorRoles.active.fill.outline}`,
borderRadius: 8,
gap: 32,
}),
Expand Down Expand Up @@ -115,7 +115,7 @@ const styles = {
fontWeight: 500,
},
featureIcon: (theme) => ({
color: theme.roles.active.fill.outline,
color: theme.colorRoles.active.fill.outline,
}),
feature: {
display: "flex",
Expand Down
6 changes: 3 additions & 3 deletions site/src/components/Paywall/PopoverPaywall.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,8 +85,8 @@ const styles = {
alignItems: "center",
maxWidth: 600,
padding: "24px 36px",
backgroundImage: `linear-gradient(160deg, transparent, ${theme.roles.active.background})`,
border: `1px solid ${theme.roles.active.fill.outline}`,
backgroundImage: `linear-gradient(160deg, transparent, ${theme.colorRoles.active.background})`,
border: `1px solid ${theme.colorRoles.active.fill.outline}`,
borderRadius: 8,
gap: 18,
}),
Expand Down Expand Up @@ -119,7 +119,7 @@ const styles = {
fontWeight: 500,
},
featureIcon: (theme) => ({
color: theme.roles.active.fill.outline,
color: theme.colorRoles.active.fill.outline,
fontSize: "1.5em",
}),
feature: {
Expand Down
4 changes: 2 additions & 2 deletions site/src/components/Pill/Pill.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,15 @@ import {
forwardRef,
useMemo,
} from "react";
import type { ThemeRole } from "theme/roles";
import type { ThemeRole } from "theme/colorRoles";

export type PillProps = HTMLAttributes<HTMLDivElement> & {
icon?: ReactNode;
type?: ThemeRole;
};

const themeStyles = (type: ThemeRole) => (theme: Theme) => {
const palette = theme.roles[type];
const palette = theme.colorRoles[type];
return {
backgroundColor: palette.background,
borderColor: palette.outline,
Expand Down
2 changes: 1 addition & 1 deletion site/src/components/RichParameterInput/RichParameterInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ const styles = {
},
},
suggestion: (theme) => ({
color: theme.roles.notice.fill.solid,
color: theme.colorRoles.notice.fill.solid,
marginLeft: "-4px",
padding: "4px 6px",
lineHeight: "inherit",
Expand Down
4 changes: 2 additions & 2 deletions site/src/components/StatusIndicator/StatusIndicator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useTheme } from "@emotion/react";
import type { FC } from "react";
import type { ThemeRole } from "theme/roles";
import type { ThemeRole } from "theme/colorRoles";

interface StatusIndicatorProps {
color: ThemeRole;
Expand All @@ -15,7 +15,7 @@ export const StatusIndicator: FC<StatusIndicatorProps> = ({ color }) => {
height: 8,
width: 8,
borderRadius: 4,
backgroundColor: theme.roles[color].fill.solid,
backgroundColor: theme.colorRoles[color].fill.solid,
}}
/>
);
Expand Down
2 changes: 1 addition & 1 deletion site/src/modules/dashboard/DeploymentBanner/DeploymentBannerView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -374,7 +374,7 @@ const HealthIssue: FC<PropsWithChildren> = ({ children }) => {
<Stack direction="row" spacing={1} alignItems="center">
<ErrorIcon
css={{ width: 16, height: 16 }}
htmlColor={theme.roles.error.outline}
htmlColor={theme.colorRoles.error.outline}
/>
{children}
</Stack>
Expand Down
4 changes: 2 additions & 2 deletions site/src/modules/dashboard/LicenseBanner/LicenseBannerView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,10 +47,10 @@ export const LicenseBannerView: FC<LicenseBannerViewProps> = ({
display: flex;
align-items: center;
padding: 12px;
background-color: ${theme.roles[type].background};
background-color: ${theme.colorRoles[type].background};
`;

const textColor = theme.roles[type].text;
const textColor = theme.colorRoles[type].text;

if (messages.length === 1) {
return (
Expand Down
2 changes: 1 addition & 1 deletion site/src/modules/resources/AgentMetadata.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -238,7 +238,7 @@ const styles = {
},

metadataValueSuccess: (theme) => ({
color: theme.roles.success.fill.outline,
color: theme.colorRoles.success.fill.outline,
}),

metadataValueError: (theme) => ({
Expand Down
6 changes: 3 additions & 3 deletions site/src/modules/resources/XRayScanAlert.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,13 +98,13 @@ const styles = {
},
},
critical: (theme) => ({
color: theme.roles.error.fill.solid,
color: theme.colorRoles.error.fill.solid,
}),
high: (theme) => ({
color: theme.roles.warning.fill.solid,
color: theme.colorRoles.warning.fill.solid,
}),
medium: (theme) => ({
color: theme.roles.notice.fill.solid,
color: theme.colorRoles.notice.fill.solid,
}),
link: {
marginLeft: "auto",
Expand Down
4 changes: 2 additions & 2 deletions site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,8 +110,8 @@ const styles = {
}),

activeTag: (theme) => ({
borderColor: theme.roles.active.outline,
backgroundColor: theme.roles.active.background,
borderColor: theme.colorRoles.active.outline,
backgroundColor: theme.colorRoles.active.background,
}),

description: (theme) => ({
Expand Down
Loading