Compare commits
6 Commits
python-sec
...
generated-
| Author | SHA1 | Date | |
|---|---|---|---|
|
f8639f2a6b | ||
|
|
183b221739 | ||
|
|
c94ef4b547 | ||
|
|
f88350721b | ||
|
|
307468afac | ||
|
|
b929494a04 |
@@ -34,7 +34,7 @@ export function MetabotChatInput() {
|
||||
{metabot.isDoingScience ? (
|
||||
<Loader size="sm" />
|
||||
) : (
|
||||
<Icon name="ai" c="var(--mb-color-brand)" size="1rem" />
|
||||
<Icon name="ai" c="brand" size="1rem" />
|
||||
)}
|
||||
</Flex>
|
||||
|
||||
@@ -78,7 +78,7 @@ export function MetabotChatInput() {
|
||||
className={cx(S.chatButton, S.stopGenerationButton)}
|
||||
>
|
||||
<Tooltip label={t`Stop generation`}>
|
||||
<Icon name="stop" c="var(--mb-color-text-secondary)" />
|
||||
<Icon name="stop" c="text-secondary" />
|
||||
</Tooltip>
|
||||
</UnstyledButton>
|
||||
)}
|
||||
@@ -89,7 +89,7 @@ export function MetabotChatInput() {
|
||||
data-testid="metabot-close-chat"
|
||||
className={S.chatButton}
|
||||
>
|
||||
<Icon name="close" c="var(--mb-color-text-secondary)" />
|
||||
<Icon name="close" c="text-secondary" />
|
||||
</UnstyledButton>
|
||||
)}
|
||||
|
||||
@@ -100,7 +100,7 @@ export function MetabotChatInput() {
|
||||
data-testid="metabot-overflow-button"
|
||||
className={S.stackedOverflowButton}
|
||||
>
|
||||
<Icon name="ellipsis" c="var(--mb-color-text-secondary)" />
|
||||
<Icon name="ellipsis" c="text-secondary" />
|
||||
</UnstyledButton>
|
||||
</Menu.Target>
|
||||
|
||||
|
||||
@@ -89,7 +89,7 @@
|
||||
width: fit-content;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--mb-color-border);
|
||||
background-color: var(--mb-color-bg-white);
|
||||
background-color: var(--mb-color-background-primary);
|
||||
color: var(--mb-color-text-secondary);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
@@ -105,7 +105,7 @@ const CenteredLayoutPreview = ({ children }: { children: React.ReactNode }) => (
|
||||
<Stack align="center" justify="center">
|
||||
<Flex
|
||||
m="40px"
|
||||
bg="var(--mb-color-background)"
|
||||
bg="background-primary"
|
||||
style={{
|
||||
border: "1px solid var(--mb-color-border)",
|
||||
borderRadius: "16px",
|
||||
|
||||
@@ -6,7 +6,7 @@ import S from "./MetabotQuestion.module.css";
|
||||
|
||||
export const MetabotQuestionEmptyState = () => (
|
||||
<Stack h="100%" w="100%" gap="sm" align="center" justify="center">
|
||||
<Icon name="ai" c="text-tertiary" size="3rem" opacity={0.7} />
|
||||
<Icon name="ai" c="text-disabled" size="3rem" opacity={0.7} />
|
||||
|
||||
<Stack gap="xs" align="center">
|
||||
<Text lh="sm">{t`Ask questions to AI.`}</Text>
|
||||
@@ -17,7 +17,7 @@ export const MetabotQuestionEmptyState = () => (
|
||||
className={S.emptyStateDisclaimerText}
|
||||
lh="sm"
|
||||
fz="sm"
|
||||
c="text-tertiary"
|
||||
c="text-disabled"
|
||||
>{t`AI isn't perfect. Double-check results.`}</Text>
|
||||
</Stack>
|
||||
);
|
||||
|
||||
@@ -45,7 +45,7 @@ export function QuestionDetails() {
|
||||
].filter((section) => section.length > 0);
|
||||
|
||||
return (
|
||||
<Text size="0.75rem" c="var(--mb-color-text-tertiary)">
|
||||
<Text size="0.75rem" c="text-disabled">
|
||||
{sections.join(" ")}
|
||||
</Text>
|
||||
);
|
||||
|
||||
@@ -11,7 +11,7 @@ export function QuestionTitle() {
|
||||
}
|
||||
|
||||
return (
|
||||
<Text fw={700} c="var(--mb-color-text-primary)" fz="xl">
|
||||
<Text fw={700} c="text-primary" fz="xl">
|
||||
{titleText}
|
||||
</Text>
|
||||
);
|
||||
|
||||
@@ -16,7 +16,7 @@ export function SidebarHeader() {
|
||||
align="center"
|
||||
className={S.sidebarHeader}
|
||||
>
|
||||
<Text fz="sm" c="var(--mb-color-text-tertiary)">
|
||||
<Text fz="sm" c="text-disabled">
|
||||
{t`AI isn't perfect. Double-check results.`}
|
||||
</Text>
|
||||
|
||||
@@ -25,11 +25,7 @@ export function SidebarHeader() {
|
||||
onClick={() => metabot.resetConversation()}
|
||||
data-testid="metabot-new-conversation"
|
||||
>
|
||||
<Icon
|
||||
name="edit_document_outlined"
|
||||
size="1rem"
|
||||
c="var(--mb-color-text-tertiary)"
|
||||
/>
|
||||
<Icon name="edit_document_outlined" size="1rem" c="text-disabled" />
|
||||
</UnstyledButton>
|
||||
</Tooltip>
|
||||
</Flex>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -58,7 +58,7 @@ const THEMES = {
|
||||
filter: '#7172AD',
|
||||
'text-primary': '#4C5773',
|
||||
'text-secondary': '#696E7B',
|
||||
'text-tertiary': '#949AAB',
|
||||
'text-disabled': '#949AAB',
|
||||
border: '#EEECEC',
|
||||
background: '#F9FBFC',
|
||||
'background-hover': '#F9FBFC',
|
||||
@@ -74,7 +74,7 @@ const THEMES = {
|
||||
filter: '#7172AD',
|
||||
'text-primary': '#FFFFFF',
|
||||
'text-secondary': '#FFFFFF',
|
||||
'text-tertiary': '#FFFFFF',
|
||||
'text-disabled': '#FFFFFF',
|
||||
border: '#5A5F6B',
|
||||
background: '#2D353A',
|
||||
'background-hover': '#2D353A',
|
||||
|
||||
@@ -16,8 +16,8 @@ const DefaultErrorMessage = ({ message, theme }: Props) => {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
padding: "1.25rem 1rem",
|
||||
background: theme?.colors?.background ?? colors["bg-error"],
|
||||
color: theme?.colors?.["text-primary"] ?? colors["text-dark"],
|
||||
background: theme?.colors?.background ?? colors["background-error"],
|
||||
color: theme?.colors?.["text-primary"] ?? colors["text-primary"],
|
||||
border: `1px solid ${theme?.colors?.error ?? colors.error}`,
|
||||
borderRadius: "0.5rem",
|
||||
textAlign: "center",
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
|
||||
.TextSchema {
|
||||
font-size: 0.75em;
|
||||
color: var(--mb-color-text-light);
|
||||
color: var(--mb-color-text-disabled);
|
||||
line-height: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
@@ -28,7 +28,7 @@
|
||||
|
||||
.BackButtonLabel {
|
||||
font-size: 16px;
|
||||
color: var(--mb-color-text-dark);
|
||||
color: var(--mb-color-text-primary);
|
||||
margin-left: 0.5rem;
|
||||
overflow-wrap: anywhere;
|
||||
word-break: break-word;
|
||||
|
||||
@@ -3,20 +3,20 @@
|
||||
}
|
||||
|
||||
.DataBucketListItemTitle {
|
||||
color: var(--mb-color-text-dark);
|
||||
color: var(--mb-color-text-primary);
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.DataBucketListItemDescription {
|
||||
color: var(--mb-color-text-light);
|
||||
color: var(--mb-color-text-disabled);
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.DataBucketListItemIcon {
|
||||
color: var(--mb-color-text-dark);
|
||||
color: var(--mb-color-text-primary);
|
||||
}
|
||||
|
||||
.DataBucketListItemContainer {
|
||||
@@ -24,7 +24,7 @@
|
||||
.DataBucketListItemDescription,
|
||||
.DataBucketListItemTitle,
|
||||
.DataBucketListItemIcon {
|
||||
color: var(--mb-color-text-white);
|
||||
color: var(--mb-color-text-primary-inverse);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
.HeaderContainer {
|
||||
align-items: center;
|
||||
color: var(--mb-color-text-medium);
|
||||
color: var(--mb-color-text-secondary);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
|
||||
@@ -3,5 +3,5 @@
|
||||
}
|
||||
|
||||
.Header {
|
||||
color: var(--mb-color-text-dark);
|
||||
color: var(--mb-color-text-primary);
|
||||
}
|
||||
|
||||
@@ -162,7 +162,7 @@ const LinkToDocsOnReferencingSavedQuestionsInQueries = () => {
|
||||
<Box
|
||||
p="md"
|
||||
ta="center"
|
||||
bg={"bg-light"}
|
||||
bg={"background-secondary"}
|
||||
style={{
|
||||
borderTop: "1px solid var(--mb-color-border)",
|
||||
}}
|
||||
@@ -195,10 +195,10 @@ const Header = ({
|
||||
|
||||
{selectedSchema?.name && schemas.length > 1 && (
|
||||
<>
|
||||
<Box component="span" mx="sm" c="text-medium">
|
||||
<Box component="span" mx="sm" c="text-secondary">
|
||||
/
|
||||
</Box>
|
||||
<Box component="span" data-testid="source-schema" c="text-medium">
|
||||
<Box component="span" data-testid="source-schema" c="text-secondary">
|
||||
{selectedSchema.displayName()}
|
||||
</Box>
|
||||
</>
|
||||
|
||||
@@ -72,19 +72,13 @@ export function SimpleDataPickerView({
|
||||
{displayOptions.map((option) => {
|
||||
const isSelected = selectedEntity === option.id;
|
||||
const iconColor = isSelected
|
||||
? "--mb-color-text-white"
|
||||
: "--mb-color-icon-primary";
|
||||
? "text-primary-inverse"
|
||||
: "icon-primary";
|
||||
return (
|
||||
<NavLink
|
||||
key={option.id}
|
||||
active={selectedEntity === option.id}
|
||||
leftSection={
|
||||
<Icon
|
||||
color={`var(${iconColor})`}
|
||||
name="table"
|
||||
aria-hidden
|
||||
/>
|
||||
}
|
||||
leftSection={<Icon c={iconColor} name="table" aria-hidden />}
|
||||
label={option.name}
|
||||
onClick={() => onClick(option.id)}
|
||||
variant="default"
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 310px;
|
||||
background-color: var(--mb-color-bg-light);
|
||||
background-color: var(--mb-color-background-secondary);
|
||||
overflow: auto;
|
||||
|
||||
@media screen and (max-width: 40em) {
|
||||
@@ -29,7 +29,7 @@
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--mb-color-text-dark);
|
||||
color: var(--mb-color-text-primary);
|
||||
border-bottom: 1px solid var(--mb-color-border);
|
||||
padding: 1rem;
|
||||
|
||||
|
||||
@@ -32,7 +32,7 @@ export function AIAnalysisContentWrapper({
|
||||
<CopyButton
|
||||
value={explanation}
|
||||
aria-label={t`Copy`}
|
||||
style={{ color: "var(--mb-color-text-medium)" }}
|
||||
style={{ color: "var(--mb-color-text-secondary)" }}
|
||||
/>
|
||||
)}
|
||||
{onClose && (
|
||||
@@ -42,7 +42,7 @@ export function AIAnalysisContentWrapper({
|
||||
p={4}
|
||||
onClick={onClose}
|
||||
aria-label={t`Close`}
|
||||
color="text-medium"
|
||||
color="text-secondary"
|
||||
>
|
||||
<Icon name="close" size={16} />
|
||||
</Button>
|
||||
|
||||
@@ -99,7 +99,7 @@ export function AIQuestionAnalysisSidebar({
|
||||
return (
|
||||
<CopyButton
|
||||
value={analysisData.summary}
|
||||
style={{ color: "var(--mb-color-text-medium)" }}
|
||||
style={{ color: "var(--mb-color-text-secondary)" }}
|
||||
aria-label={t`Copy`}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -101,7 +101,7 @@ export function SettingsSAMLForm() {
|
||||
{({ dirty }) => (
|
||||
<Form>
|
||||
<Title order={2}>{t`Set up SAML-based SSO`}</Title>
|
||||
<Text c="text-medium" mb="xl">
|
||||
<Text c="text-secondary" mb="xl">
|
||||
{jt`Use the settings below to configure your SSO via SAML. If you have any questions, check out our ${(
|
||||
<ExternalLink
|
||||
key="link"
|
||||
@@ -110,7 +110,7 @@ export function SettingsSAMLForm() {
|
||||
)}.`}
|
||||
</Text>
|
||||
<FormSection title={t`Configure your identity provider (IdP)`}>
|
||||
<Text c="text-medium" mb="xl">
|
||||
<Text c="text-secondary" mb="xl">
|
||||
{/* eslint-disable-next-line no-literal-metabase-strings -- Metabase settings */}
|
||||
{t`Your identity provider will need the following info about Metabase.`}
|
||||
</Text>
|
||||
@@ -123,7 +123,7 @@ export function SettingsSAMLForm() {
|
||||
/>
|
||||
|
||||
<Title order={4} mt="xl">{t`SAML attributes`}</Title>
|
||||
<Text c="text-medium" mb="md">
|
||||
<Text c="text-secondary" mb="md">
|
||||
{t`In most IdPs, you'll need to put each of these in an input box labeled "Name" in the attribute statements section.`}
|
||||
</Text>
|
||||
|
||||
@@ -169,7 +169,7 @@ export function SettingsSAMLForm() {
|
||||
// eslint-disable-next-line no-literal-metabase-strings -- Metabase settings
|
||||
title={t`Tell Metabase about your identity provider`}
|
||||
>
|
||||
<Text mb="xl" mt="sm" c="text-medium">
|
||||
<Text mb="xl" mt="sm" c="text-secondary">
|
||||
{/* eslint-disable-next-line no-literal-metabase-strings -- Metabase settings */}
|
||||
{t`Metabase will need the following info about your provider.`}
|
||||
</Text>
|
||||
@@ -244,7 +244,7 @@ export function SettingsSAMLForm() {
|
||||
<FormSection
|
||||
title={t`Synchronize group membership with your SSO`}
|
||||
>
|
||||
<Text c="text-medium" mb="lg">
|
||||
<Text c="text-secondary" mb="lg">
|
||||
{/* eslint-disable-next-line no-literal-metabase-strings -- Metabase settings */}
|
||||
{t`To enable this, you'll need to create mappings to tell Metabase which group(s) your users should
|
||||
be added to based on the SSO group they're in.`}
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
|
||||
.CacheableItemTable {
|
||||
table-layout: fixed;
|
||||
background-color: var(--mb-color-text-white);
|
||||
background-color: var(--mb-color-text-primary-inverse);
|
||||
|
||||
col {
|
||||
width: 30%;
|
||||
|
||||
@@ -315,7 +315,7 @@ const TableSkeleton = ({ columns }: { columns: ColumnItem[] }) => (
|
||||
);
|
||||
|
||||
const NoResultsTableRow = () => (
|
||||
<Center fw="bold" c="text-light">
|
||||
<Center fw="bold" c="text-disabled">
|
||||
{t`No dashboards or questions have their own caching policies yet.`}
|
||||
</Center>
|
||||
);
|
||||
|
||||
@@ -59,7 +59,9 @@ export const StyledLauncher = styled.div<
|
||||
font-weight: ${({ forRoot, inheritsRootStrategy }) =>
|
||||
forRoot || inheritsRootStrategy ? "normal" : "bold"};
|
||||
background-color: ${({ forRoot }) =>
|
||||
forRoot ? "var(--mb-color-bg-medium" : "var(--mb-color-bg-white"};
|
||||
forRoot
|
||||
? "var(--mb-color-background-tertiary"
|
||||
: "var(--mb-color-background-primary"};
|
||||
${({ forRoot }) =>
|
||||
!forRoot &&
|
||||
css`
|
||||
|
||||
@@ -76,8 +76,8 @@ export const StrategyFormLauncher = ({
|
||||
shouldDisableTooltip ? "" : "-with-tooltip"
|
||||
}`}
|
||||
>
|
||||
<Flex gap="0.5rem" color="text-medium" align="center">
|
||||
<FixedSizeIcon name={forRoot ? "star" : "database"} color="inherit" />
|
||||
<Flex gap="0.5rem" color="text-secondary" align="center">
|
||||
<FixedSizeIcon name={forRoot ? "star" : "database"} c="inherit" />
|
||||
<Title c="inherit" order={6}>
|
||||
{title}
|
||||
</Title>
|
||||
|
||||
@@ -47,7 +47,10 @@ export const StrategyFormLauncherPanel = ({
|
||||
});
|
||||
|
||||
return (
|
||||
<Panel role="group" style={{ backgroundColor: "var(--mb-color-bg-light)" }}>
|
||||
<Panel
|
||||
role="group"
|
||||
style={{ backgroundColor: "var(--mb-color-background-secondary)" }}
|
||||
>
|
||||
<StrategyFormLauncherPanelBox>
|
||||
<StrategyFormLauncher
|
||||
forId={rootId}
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
}
|
||||
|
||||
.modalFooter {
|
||||
background: var(--mb-color-bg-white);
|
||||
background: var(--mb-color-background-primary);
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
@@ -106,10 +106,7 @@ export const CleanupCollectionTable = ({
|
||||
{/* Name */}
|
||||
<ItemCell data-testid="clean-up-table-collection">
|
||||
<Flex align="center" gap="sm">
|
||||
<FixedSizeIcon
|
||||
name={getIcon(item).name}
|
||||
color="var(--mb-color-brand)"
|
||||
/>
|
||||
<FixedSizeIcon name={getIcon(item).name} c="brand" />
|
||||
<Ellipsified>{item.name}</Ellipsified>
|
||||
</Flex>
|
||||
</ItemCell>
|
||||
|
||||
@@ -4,7 +4,6 @@ import { t } from "ttag";
|
||||
import type { ObjectWithModel } from "metabase/lib/icon";
|
||||
import { PLUGIN_COLLECTIONS } from "metabase/plugins";
|
||||
import { Group, Icon, Text } from "metabase/ui";
|
||||
import { color } from "metabase/ui/utils/colors";
|
||||
import type { Collection } from "metabase-types/api";
|
||||
|
||||
export const CollectionAuthorityLevelDisplay = ({
|
||||
@@ -17,7 +16,7 @@ export const CollectionAuthorityLevelDisplay = ({
|
||||
...collection,
|
||||
model: "collection",
|
||||
} as ObjectWithModel);
|
||||
return { ...icon, color: icon.color && color(icon.color) };
|
||||
return { ...icon, color: icon.color };
|
||||
}, [collection]);
|
||||
|
||||
if (collection.authority_level !== "official") {
|
||||
|
||||
@@ -12,7 +12,7 @@ export const CollectionAuthorityLevelIcon: CollectionAuthorityLevelIconComponent
|
||||
}
|
||||
const level = AUTHORITY_LEVELS[String(collection.authority_level)];
|
||||
const levelColor = level.color ? color(level.color) : undefined;
|
||||
const iconColor = archived ? color("text-light") : levelColor;
|
||||
const iconColor = archived ? color("text-disabled") : levelColor;
|
||||
return (
|
||||
<Icon
|
||||
{...iconProps}
|
||||
|
||||
@@ -23,7 +23,7 @@ export const OFFICIAL_COLLECTION: CollectionAuthorityLevelConfig = {
|
||||
// eslint-disable-next-line ttag/no-module-declaration -- see metabase#55045
|
||||
name: t`Official`,
|
||||
icon: "official_collection",
|
||||
color: "saturated-yellow",
|
||||
color: "saturated-yellow" as const,
|
||||
tooltips: {
|
||||
// eslint-disable-next-line ttag/no-module-declaration -- see metabase#55045
|
||||
default: t`Official collection`,
|
||||
|
||||
@@ -21,7 +21,7 @@ export const VerifiedToggle = ({
|
||||
role="switch"
|
||||
variant="viewHeader"
|
||||
onClick={() => handleVerifiedFilterChange(!verified)}
|
||||
c={verified ? "brand" : "text-dark"}
|
||||
c={verified ? "brand" : "text-primary"}
|
||||
>
|
||||
<Icon name="verified" />
|
||||
</ActionIcon>
|
||||
|
||||
@@ -9,7 +9,7 @@ type SectionLayoutProps = {
|
||||
|
||||
export function SectionLayout({ children }: SectionLayoutProps) {
|
||||
return (
|
||||
<Stack h="100%" gap={0} bg="bg-light">
|
||||
<Stack h="100%" gap={0} bg="background-secondary">
|
||||
<Flex flex={1} mih={0} miw={0}>
|
||||
<Stack flex={1} miw={0} gap={0}>
|
||||
{children}
|
||||
|
||||
@@ -179,7 +179,7 @@ export function LibrarySectionLayout() {
|
||||
py={0}
|
||||
/>
|
||||
<Stack
|
||||
bg="background-light"
|
||||
bg="background-secondary"
|
||||
data-testid="library-page"
|
||||
pb="2rem"
|
||||
px="3.5rem"
|
||||
@@ -251,7 +251,7 @@ const RootSnippetsCollectionMenu = ({
|
||||
<Button
|
||||
w={24}
|
||||
h={24}
|
||||
c="text-medium"
|
||||
c="text-secondary"
|
||||
size="compact-xs"
|
||||
variant="subtle"
|
||||
leftSection={<FixedSizeIcon name="ellipsis" size={16} />}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { Link } from "react-router";
|
||||
|
||||
import { Ellipsified } from "metabase/common/components/Ellipsified";
|
||||
import type { ColorName } from "metabase/lib/colors/types";
|
||||
import type { IconName } from "metabase/ui";
|
||||
import { Card, Flex, Icon, Stack, Text } from "metabase/ui";
|
||||
|
||||
@@ -10,7 +11,7 @@ type EntityListItemProps = {
|
||||
name: string;
|
||||
description?: string | null;
|
||||
icon: IconName;
|
||||
iconColor?: string;
|
||||
iconColor?: ColorName;
|
||||
href: string;
|
||||
};
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@ export const PageContainer = ({
|
||||
}: React.PropsWithChildren<StackProps>) => {
|
||||
return (
|
||||
<Stack
|
||||
bg="background-light"
|
||||
bg="background-secondary"
|
||||
h="100%"
|
||||
pb="2rem"
|
||||
px="3.5rem"
|
||||
|
||||
@@ -132,7 +132,9 @@ type PaneHeaderTabsProps = {
|
||||
|
||||
export function PaneHeaderTabs({ tabs, withBackground }: PaneHeaderTabsProps) {
|
||||
const { pathname } = useSelector(getLocation);
|
||||
const backgroundColor = withBackground ? "bg-secondary" : "transparent";
|
||||
const backgroundColor = withBackground
|
||||
? "background-secondary"
|
||||
: "transparent";
|
||||
|
||||
return (
|
||||
<Group gap="sm">
|
||||
|
||||
@@ -3,6 +3,6 @@
|
||||
}
|
||||
|
||||
.empyIcon {
|
||||
background-color: var(--mb-color-bg-medium);
|
||||
background-color: var(--mb-color-background-tertiary);
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
@@ -553,7 +553,7 @@ const ResultsItem = ({
|
||||
<Icon
|
||||
name="chevronright"
|
||||
size={16}
|
||||
color="var(--mb-color-text-light)"
|
||||
c="text-disabled"
|
||||
className={cx(S.chevron, {
|
||||
[S.expanded]: isExpanded,
|
||||
})}
|
||||
|
||||
@@ -216,7 +216,7 @@ export function SearchNew({ query, params, filters }: SearchNewProps) {
|
||||
if (filteredTables.length === 0) {
|
||||
return (
|
||||
<Box p="xl">
|
||||
<Text c="text.2">{t`No tables found`}</Text>
|
||||
<Text c="text-disabled">{t`No tables found`}</Text>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -131,7 +131,7 @@ export function TableAttributesEditBulk({
|
||||
<Stack gap="md">
|
||||
<Group
|
||||
align="center"
|
||||
c="text-light"
|
||||
c="text-disabled"
|
||||
gap={10}
|
||||
flex="1"
|
||||
fs="lg"
|
||||
@@ -143,7 +143,7 @@ export function TableAttributesEditBulk({
|
||||
>
|
||||
<Title
|
||||
order={4}
|
||||
c="text-dark"
|
||||
c="text-primary"
|
||||
style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}
|
||||
>
|
||||
<Icon name="collection2" size={20} />
|
||||
|
||||
@@ -157,7 +157,7 @@ function DataModelContent({ params }: Props) {
|
||||
|
||||
return (
|
||||
<Flex
|
||||
bg="bg-light"
|
||||
bg="background-secondary"
|
||||
data-testid="data-model"
|
||||
h="100%"
|
||||
style={{ overflow: "auto" }}
|
||||
|
||||
@@ -29,7 +29,7 @@ export function SegmentRevisionDiff({
|
||||
const label = getPropertyLabel(property);
|
||||
|
||||
return (
|
||||
<Box p="md" bg="bg-light" bd="1px solid border">
|
||||
<Box p="md" bg="background-secondary" bd="1px solid border">
|
||||
<Flex align="center" gap="sm" mb="sm">
|
||||
<DiffIcon before={before} after={after} />
|
||||
<Text size="sm" fw={400} c="text-secondary">
|
||||
@@ -88,7 +88,7 @@ function TextDiff({ before, after }: TextDiffProps) {
|
||||
span
|
||||
fw={part.added ? 600 : undefined}
|
||||
td={part.removed ? "line-through" : undefined}
|
||||
c={part.removed ? "text-tertiary" : undefined}
|
||||
c={part.removed ? "text-disabled" : undefined}
|
||||
>
|
||||
{part.value}
|
||||
</Text>
|
||||
@@ -99,7 +99,7 @@ function TextDiff({ before, after }: TextDiffProps) {
|
||||
|
||||
if (beforeStr != null) {
|
||||
return (
|
||||
<Text size="sm" td="line-through" c="text-tertiary">
|
||||
<Text size="sm" td="line-through" c="text-disabled">
|
||||
{beforeStr}
|
||||
</Text>
|
||||
);
|
||||
|
||||
@@ -47,7 +47,7 @@ export function SegmentRevisionItem({
|
||||
{action}
|
||||
</Text>
|
||||
</Stack>
|
||||
<Text size="sm" c="text-tertiary" title={formattedDate}>
|
||||
<Text size="sm" c="text-disabled" title={formattedDate}>
|
||||
{timeAgo}
|
||||
</Text>
|
||||
</Flex>
|
||||
|
||||
@@ -201,12 +201,7 @@ export const DatabaseReplicationForm = ({
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Card
|
||||
radius="md"
|
||||
bg="var(--mb-color-bg-light)"
|
||||
p={0}
|
||||
shadow="none"
|
||||
>
|
||||
<Card radius="md" bg="background-secondary" p={0} shadow="none">
|
||||
<Flex
|
||||
align="flex-start"
|
||||
direction="row"
|
||||
@@ -272,16 +267,16 @@ export const DatabaseReplicationForm = ({
|
||||
<Text fz="md">
|
||||
<Text
|
||||
span
|
||||
c="text-dark"
|
||||
c="text-primary"
|
||||
display="inline"
|
||||
fw="500"
|
||||
>
|
||||
{table.tableSchema}
|
||||
</Text>
|
||||
<Text span c="text-medium" display="inline">
|
||||
<Text span c="text-secondary" display="inline">
|
||||
.{table.tableName}
|
||||
</Text>{" "}
|
||||
<Text span c="text-light" display="inline">
|
||||
<Text span c="text-disabled" display="inline">
|
||||
{noSyncReason(table)}
|
||||
</Text>
|
||||
</Text>
|
||||
@@ -293,12 +288,7 @@ export const DatabaseReplicationForm = ({
|
||||
)}
|
||||
</Card>
|
||||
|
||||
<Card
|
||||
radius="md"
|
||||
bg="var(--mb-color-bg-light)"
|
||||
p={0}
|
||||
shadow="none"
|
||||
>
|
||||
<Card radius="md" bg="background-secondary" p={0} shadow="none">
|
||||
<Flex
|
||||
align="flex-start"
|
||||
direction="row"
|
||||
@@ -367,13 +357,13 @@ export const DatabaseReplicationForm = ({
|
||||
<Text fz="md">
|
||||
<Text
|
||||
span
|
||||
c="text-dark"
|
||||
c="text-primary"
|
||||
display="inline"
|
||||
fw="500"
|
||||
>
|
||||
{table.tableSchema}
|
||||
</Text>
|
||||
<Text span c="text-medium" display="inline">
|
||||
<Text span c="text-secondary" display="inline">
|
||||
.{table.tableName}
|
||||
</Text>
|
||||
</Text>
|
||||
@@ -387,7 +377,7 @@ export const DatabaseReplicationForm = ({
|
||||
|
||||
<Card
|
||||
radius="md"
|
||||
bg="var(--mb-color-bg-light)"
|
||||
bg="background-secondary"
|
||||
p="md"
|
||||
my="sm"
|
||||
shadow="none"
|
||||
@@ -395,7 +385,7 @@ export const DatabaseReplicationForm = ({
|
||||
<Stack>
|
||||
<Group justify="space-between">
|
||||
<Box ta="left">
|
||||
<Text c="text-light">{database.name}</Text>
|
||||
<Text c="text-disabled">{database.name}</Text>
|
||||
{!previewResponseLoading &&
|
||||
typeof previewResponse?.totalEstimatedRowCount ===
|
||||
"number" ? (
|
||||
@@ -410,7 +400,7 @@ export const DatabaseReplicationForm = ({
|
||||
{previewResponseLoading && <Loader />}
|
||||
|
||||
<Box ta="right">
|
||||
<Text c="text-light">{t`Available Cloud Storage`}</Text>
|
||||
<Text c="text-disabled">{t`Available Cloud Storage`}</Text>
|
||||
{!previewResponseLoading &&
|
||||
typeof previewResponse?.freeQuota === "number" ? (
|
||||
<Text fw="bold" w="100%">
|
||||
|
||||
@@ -14,7 +14,7 @@ export function DatabaseReplicationPostgresInfo() {
|
||||
);
|
||||
|
||||
return (
|
||||
<Text size="md" c="text-medium">
|
||||
<Text size="md" c="text-secondary">
|
||||
{jt`Note: You may need to ${link} in the source database. The process might also require a database restart.`}
|
||||
</Text>
|
||||
);
|
||||
|
||||
@@ -21,7 +21,7 @@ export const DatabaseReplicationStatusInfo = memo(
|
||||
t`Replicating to Metabase Cloud Storage`
|
||||
: // eslint-disable-next-line no-literal-metabase-strings -- This string only shows for admins.
|
||||
t`Not replicating to Metabase Cloud Storage`;
|
||||
const color = hasConnection ? "success" : "text-light";
|
||||
const color = hasConnection ? "success" : "text-disabled";
|
||||
|
||||
return (
|
||||
<Flex align="center" gap="sm" {...flexProps}>
|
||||
|
||||
@@ -119,7 +119,7 @@ export const DestinationDatabaseConnectionModal = ({
|
||||
px="md"
|
||||
mx="xl"
|
||||
my="md"
|
||||
bg="accent-gray-light"
|
||||
bg="background-secondary"
|
||||
align="center"
|
||||
justify="space-between"
|
||||
bd="1px solid border"
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
flex-shrink: 0;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--mb-color-background-light);
|
||||
background-color: var(--mb-color-background-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -34,7 +34,7 @@ export function PanelHeader({ node, onClose }: PanelHeaderProps) {
|
||||
|
||||
return (
|
||||
<Group className={S.root} p="lg" gap="0.75rem" wrap="nowrap">
|
||||
<Center w="2.75rem" h="2.75rem" bdrs="50%" bg="bg-secondary">
|
||||
<Center w="2.75rem" h="2.75rem" bdrs="50%" bg="background-secondary">
|
||||
<FixedSizeIcon name={getNodeIcon(node)} c="brand" size={20} />
|
||||
</Center>
|
||||
<Stack gap="xs" flex={1}>
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
|
||||
.pill {
|
||||
color: var(--mb-color-text-primary);
|
||||
background-color: var(--mb-color-bg-medium);
|
||||
background-color: var(--mb-color-background-tertiary);
|
||||
|
||||
&:hover,
|
||||
&.selected {
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import type { Edge, Node } from "@xyflow/react";
|
||||
|
||||
import type { ColorName } from "metabase/lib/colors/types";
|
||||
import type {
|
||||
DependencyGroupType,
|
||||
DependencyId,
|
||||
@@ -13,7 +14,7 @@ export type NodeType = Node<DependencyNode>;
|
||||
|
||||
export type NodeTypeInfo = {
|
||||
label: string;
|
||||
color: string;
|
||||
color: ColorName;
|
||||
};
|
||||
|
||||
export type NodeLink = {
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
import { PLUGIN_EMBEDDING_IFRAME_SDK_SETUP } from "metabase/plugins";
|
||||
import { hasPremiumFeature } from "metabase-enterprise/settings";
|
||||
|
||||
/**
|
||||
* Initialize embedding iframe SDK setup plugin features that depend on hasPremiumFeature.
|
||||
*/
|
||||
export function initializePlugin() {
|
||||
// Feature gate the embed setup for gradual rollouts.
|
||||
// In the future, we may drop this to enable users to try out new iframe embedding.
|
||||
if (hasPremiumFeature("embedding_simple")) {
|
||||
PLUGIN_EMBEDDING_IFRAME_SDK_SETUP.isEnabled = () => true;
|
||||
}
|
||||
}
|
||||
@@ -57,7 +57,7 @@ const PanelWrapper = ({
|
||||
<Title order={2} size="h4" mb="sm">
|
||||
{title}
|
||||
</Title>
|
||||
<Text c="text-medium">{subtitle}</Text>
|
||||
<Text c="text-secondary">{subtitle}</Text>
|
||||
</Box>
|
||||
{children}
|
||||
</Stack>
|
||||
@@ -308,7 +308,7 @@ const ErrorAlert = ({
|
||||
},
|
||||
label: {
|
||||
fontSize: "var(--mantine-font-size-md)",
|
||||
color: "var(--mb-color-text-dark)",
|
||||
color: "var(--mb-color-text-primary)",
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -141,7 +141,7 @@ function GoogleSheetsConnectModal({
|
||||
fullWidth
|
||||
autoContrast
|
||||
color="brand"
|
||||
c="var(--mb-color-text-white)"
|
||||
c="text-primary-inverse"
|
||||
value={linkType}
|
||||
onChange={setLinkType}
|
||||
data={
|
||||
@@ -152,7 +152,7 @@ function GoogleSheetsConnectModal({
|
||||
}
|
||||
/>
|
||||
<Flex
|
||||
bg="bg-light"
|
||||
bg="background-secondary"
|
||||
style={{ borderRadius: "0.5rem" }}
|
||||
p="md"
|
||||
direction="column"
|
||||
@@ -194,7 +194,7 @@ function GoogleSheetsConnectModal({
|
||||
: "https://docs.google.com/spreadsheets/d/abc123-xyz456"
|
||||
}
|
||||
/>
|
||||
<Text size="sm" color="secondary">
|
||||
<Text size="sm" c="text-secondary">
|
||||
{copyInstruction}
|
||||
</Text>
|
||||
</Box>
|
||||
@@ -240,7 +240,7 @@ function GoogleSheetsDisconnectModal({
|
||||
<ModalWrapper onClose={onClose} title={title}>
|
||||
<Stack gap="md">
|
||||
<DriveConnectionDisplay />
|
||||
<Text c="text-medium" pb="md">
|
||||
<Text c="text-secondary" pb="md">
|
||||
{bodyCopy}
|
||||
</Text>
|
||||
<Flex w="100%" gap="sm" justify="space-between">
|
||||
@@ -303,7 +303,7 @@ export const DriveConnectionDisplay = () => {
|
||||
return (
|
||||
<MaybeLink href={folderUrl ?? ""}>
|
||||
<Flex
|
||||
bg="bg-light"
|
||||
bg="background-secondary"
|
||||
w="100%"
|
||||
gap="sm"
|
||||
p="md"
|
||||
@@ -313,7 +313,7 @@ export const DriveConnectionDisplay = () => {
|
||||
<Box>
|
||||
<Text fw="bold">{t`Google Drive connected`}</Text>
|
||||
{!!userName && (
|
||||
<Text c="text-medium" fz="sm" lh="140%">
|
||||
<Text c="text-secondary" fz="sm" lh="140%">
|
||||
{t`Connected by ${userName} ${relativeConnectionTime}`}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
@@ -15,7 +15,7 @@ export function GdriveErrorMenuItem({ error }: { error: any }) {
|
||||
<Icon name="warning" c="error" mt="xs" mr="sm" />
|
||||
<Box>
|
||||
<Text fw="bold">{t`Couldn't sync Google Sheets`}</Text>
|
||||
<Text size="sm" c="text-medium" maw="16rem">
|
||||
<Text size="sm" c="text-secondary" maw="16rem">
|
||||
{getErrorMessage(
|
||||
error,
|
||||
// eslint-disable-next-line no-literal-metabase-strings -- admin only ui
|
||||
|
||||
@@ -21,7 +21,7 @@ function PausedModal({ onClose }: { onClose: () => void }) {
|
||||
<Text size="lg" fw="bold">
|
||||
{t`Couldn't upload the file, storage is full`}
|
||||
</Text>
|
||||
<Text c="text-medium">
|
||||
<Text c="text-secondary">
|
||||
{isAdmin
|
||||
? // eslint-disable-next-line no-literal-metabase-strings -- admin only
|
||||
t`Add more storage to your Metabase or connect a database to store the uploaded files.`
|
||||
|
||||
@@ -11,7 +11,7 @@ export const UserTypeCellRoot = styled.td`
|
||||
text-transform: capitalize;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: var(--mb-color-text-medium);
|
||||
color: var(--mb-color-text-secondary);
|
||||
|
||||
${ChangeTypeButton} {
|
||||
visibility: hidden;
|
||||
|
||||
@@ -16,7 +16,7 @@ export const BillingInfoRowContainer = styled.div<{ extraPadding?: boolean }>`
|
||||
align-items: center;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid var(--mb-color-bg-medium);
|
||||
border-bottom: 1px solid var(--mb-color-background-tertiary);
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
@@ -46,7 +46,7 @@ const BillingInfoError = () => {
|
||||
<SettingHeader id="billing" title={t`Billing`} />
|
||||
<Box mt="1rem" data-testid="billing-info-error">
|
||||
<Alert variant="error" icon="warning">
|
||||
<Text c="text-medium">
|
||||
<Text c="text-secondary">
|
||||
{t`An error occurred while fetching information about your billing.`}
|
||||
<br />
|
||||
<strong>{t`Need help?`}</strong>{" "}
|
||||
|
||||
@@ -96,7 +96,11 @@ function BillingInfoRow({
|
||||
return (
|
||||
<ErrorBoundary errorComponent={EmptyErrorComponent}>
|
||||
<BillingInfoRowContainer extraPadding={extraPadding} {...props}>
|
||||
<Text c="text-md" maw="15rem" data-testid={`billing-info-key-${id}`}>
|
||||
<Text
|
||||
c="text-secondary"
|
||||
maw="15rem"
|
||||
data-testid={`billing-info-key-${id}`}
|
||||
>
|
||||
{lineItem.name}
|
||||
</Text>
|
||||
<BillingInfoValue
|
||||
|
||||
@@ -4,14 +4,14 @@ import { t } from "ttag";
|
||||
import { Anchor, Text } from "metabase/ui";
|
||||
|
||||
const Container = styled.div`
|
||||
background: var(--mb-color-bg-light);
|
||||
background: var(--mb-color-background-secondary);
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.75rem 1rem;
|
||||
margin-top: 1.5rem;
|
||||
`;
|
||||
|
||||
const Title = styled.div`
|
||||
color: var(--mb-color-text-medium);
|
||||
color: var(--mb-color-text-secondary);
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0.5rem;
|
||||
@@ -21,7 +21,7 @@ export const StillNeedHelp = () => {
|
||||
return (
|
||||
<Container>
|
||||
<Title>{t`Still need help?`}</Title>
|
||||
<Text color="text-medium">
|
||||
<Text color="text-secondary">
|
||||
{t`You can ask for billing help at `}
|
||||
{/* eslint-disable-next-line i18next/no-literal-string */}
|
||||
<Anchor href="mailto:billing@metabase.com">billing@metabase.com</Anchor>
|
||||
|
||||
@@ -85,7 +85,7 @@ export function MetabotAdminPage() {
|
||||
.t`${metabot.name} is Metabase's AI agent. To help ${metabot.name} more easily find and focus on the data you care about most, configure what content it should be able to access or use to create queries.`}
|
||||
/>
|
||||
{isEmbedMetabot && (
|
||||
<Text c="text-medium" maw="40rem">
|
||||
<Text c="text-secondary" maw="40rem">
|
||||
{t`If you're embedding the Metabot component in an app, you can specify a different collection that embedded Metabot is allowed to use for creating queries.`}
|
||||
</Text>
|
||||
)}
|
||||
@@ -281,11 +281,11 @@ function CollectionInfo({ collection }: { collection: Collection }) {
|
||||
const parent = collectionInfo?.effective_ancestors?.slice(-1)?.[0];
|
||||
|
||||
return (
|
||||
<Flex align="center" gap="sm" c="text-light" mb="sm">
|
||||
<Flex align="center" gap="sm" c="text-disabled" mb="sm">
|
||||
{parent && (
|
||||
<>
|
||||
<CollectionDisplay collection={parent} />
|
||||
<Text c="text-light" fw="bold">
|
||||
<Text c="text-disabled" fw="bold">
|
||||
/
|
||||
</Text>
|
||||
</>
|
||||
@@ -304,7 +304,7 @@ const CollectionDisplay = ({
|
||||
return (
|
||||
<Flex align="center" gap="sm">
|
||||
<Icon {...icon} c={icon.color ?? "brand"} />
|
||||
<Text c="text-medium" fw="bold">
|
||||
<Text c="text-secondary" fw="bold">
|
||||
{collection.name}
|
||||
</Text>
|
||||
</Flex>
|
||||
|
||||
@@ -154,7 +154,7 @@ export const MetabotPromptSuggestionPane = ({
|
||||
{t`Something went wrong.`}
|
||||
</Center>
|
||||
) : data?.total === 0 ? (
|
||||
<Center my="lg" fw="bold" c="text-light">
|
||||
<Center my="lg" fw="bold" c="text-disabled">
|
||||
{t`No prompts found.`}
|
||||
</Center>
|
||||
) : null
|
||||
@@ -211,7 +211,7 @@ const SuggestedPromptRow = ({
|
||||
</Box>
|
||||
<td>
|
||||
<Flex align="center" gap="sm">
|
||||
<Icon name={row.model} c="text-medium" /> {row.model_name}
|
||||
<Icon name={row.model} c="text-secondary" /> {row.model_name}
|
||||
</Flex>
|
||||
</td>
|
||||
<Box component="td" h="3.5rem">
|
||||
|
||||
@@ -138,7 +138,7 @@ export const MetabotPurchasePageForStoreUser = () => {
|
||||
|
||||
<Stack gap="md">
|
||||
<Card
|
||||
bg="var(--mb-color-bg-light)"
|
||||
bg="background-secondary"
|
||||
p={12}
|
||||
radius="md"
|
||||
shadow="none"
|
||||
|
||||
@@ -31,7 +31,7 @@ export function MetabotAppBarButton({
|
||||
<ActionIcon
|
||||
className={className}
|
||||
variant="subtle"
|
||||
c="var(--mb-color-text-primary)"
|
||||
c="text-primary"
|
||||
bd="1px solid var(--mb-color-border)"
|
||||
p="sm"
|
||||
h="2.25rem"
|
||||
|
||||
@@ -140,7 +140,7 @@ export const AgentSuggestionMessage = ({
|
||||
<Paper
|
||||
shadow="none"
|
||||
radius="md"
|
||||
bg="bg-white"
|
||||
bg="background-primary"
|
||||
className={S.container}
|
||||
data-testid="metabot-chat-suggestion"
|
||||
>
|
||||
@@ -156,10 +156,7 @@ export const AgentSuggestionMessage = ({
|
||||
<Text size="sm">{suggestedTransform.name}</Text>
|
||||
</Flex>
|
||||
<Flex align="center" gap="sm">
|
||||
<Text
|
||||
size="sm"
|
||||
c={isNew ? "var(--mb-color-saturated-blue)" : "text-secondary"}
|
||||
>
|
||||
<Text size="sm" c={isNew ? "saturated-blue" : "text-secondary"}>
|
||||
{isNew ? t`New` : t`Revision`}
|
||||
</Text>
|
||||
<Flex align="center" justify="center" h="md" w="md">
|
||||
@@ -175,12 +172,24 @@ export const AgentSuggestionMessage = ({
|
||||
>
|
||||
{match({ isLoading, error })
|
||||
.with({ error: P.not(P.nullish) }, () => (
|
||||
<Flex p="md" bg="bg-light" justify="center" align="center" gap="sm">
|
||||
<Flex
|
||||
p="md"
|
||||
bg="background-secondary"
|
||||
justify="center"
|
||||
align="center"
|
||||
gap="sm"
|
||||
>
|
||||
<Text mb="1px" c="danger">{t`Failed to load preview`}</Text>
|
||||
</Flex>
|
||||
))
|
||||
.with({ isLoading: true }, () => (
|
||||
<Flex p="md" bg="bg-light" justify="center" align="center" gap="sm">
|
||||
<Flex
|
||||
p="md"
|
||||
bg="background-secondary"
|
||||
justify="center"
|
||||
align="center"
|
||||
gap="sm"
|
||||
>
|
||||
<Loader size="xs" color="text-secondary" type="dots" />
|
||||
<Text mb="1px" c="text-secondary">{t`Loading preview`}</Text>
|
||||
</Flex>
|
||||
@@ -211,7 +220,7 @@ export const AgentSuggestionMessage = ({
|
||||
variant="subtle"
|
||||
fw="normal"
|
||||
fz="sm"
|
||||
c={canApply ? "success" : "text-light"}
|
||||
c={canApply ? "success" : "text-disabled"}
|
||||
disabled={!canApply}
|
||||
onClick={handleApply}
|
||||
>
|
||||
|
||||
@@ -3,13 +3,14 @@ import cx from "classnames";
|
||||
import { match } from "ts-pattern";
|
||||
import { t } from "ttag";
|
||||
|
||||
import type { ColorName } from "metabase/lib/colors/types";
|
||||
import { Collapse, Flex, Group, Icon, Paper, Stack, Text } from "metabase/ui";
|
||||
import type { MetabotTodoItem } from "metabase-types/api";
|
||||
|
||||
import S from "./MetabotAgentTodoMessage.module.css";
|
||||
|
||||
type TodoStatusConfig = {
|
||||
color: string;
|
||||
color: ColorName;
|
||||
td?: string;
|
||||
};
|
||||
|
||||
|
||||
@@ -46,7 +46,7 @@ const ToolCallDetailsModal = ({
|
||||
title={
|
||||
<Flex align="center">
|
||||
{t`Tool Call: ${message.name}`}
|
||||
<Badge ml="sm" color="text-dark">
|
||||
<Badge ml="sm" color="text-primary">
|
||||
{message.id}
|
||||
</Badge>
|
||||
</Flex>
|
||||
@@ -74,7 +74,7 @@ const ToolCallDetailsModal = ({
|
||||
<Flex align="center">
|
||||
<Text fw="bold">{t`Response`}</Text>
|
||||
{message.is_error && (
|
||||
<Badge ml="sm" bg="danger" c="text-white">
|
||||
<Badge ml="sm" bg="danger" c="text-primary-inverse">
|
||||
{t`Errored`}
|
||||
</Badge>
|
||||
)}
|
||||
@@ -107,7 +107,7 @@ export const AgentToolCallMessage = ({
|
||||
<Flex
|
||||
p="sm"
|
||||
pl="md"
|
||||
bg="bg-light"
|
||||
bg="background-secondary"
|
||||
bd="1px solid var(--mb-color-border)"
|
||||
bdrs="sm"
|
||||
direction="row"
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
}
|
||||
|
||||
.inputContainerLoading {
|
||||
background: var(--mb-color-bg-light);
|
||||
background: var(--mb-color-background-secondary);
|
||||
}
|
||||
|
||||
.messagesContainer {
|
||||
@@ -77,14 +77,14 @@
|
||||
.messageUser {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 1rem;
|
||||
background: var(--mb-color-bg-medium);
|
||||
background: var(--mb-color-background-tertiary);
|
||||
}
|
||||
|
||||
.messageUserAction {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
background: var(--mb-color-bg-light);
|
||||
border: 1px solid var(--mb-color-bg-medium);
|
||||
background: var(--mb-color-background-secondary);
|
||||
border: 1px solid var(--mb-color-background-tertiary);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
@@ -127,7 +127,7 @@ export const MetabotChat = ({
|
||||
data-testid="metabot-empty-chat-info"
|
||||
>
|
||||
<Box component={EmptyDashboardBot} w="6rem" />
|
||||
<Text c="text-light" maw="12rem" ta="center">
|
||||
<Text c="text-disabled" maw="12rem" ta="center">
|
||||
{config.emptyText ??
|
||||
t`I can help you explore your metrics and models.`}
|
||||
</Text>
|
||||
|
||||
@@ -9,7 +9,7 @@ interface MetabotResetLongChatButtonProps {
|
||||
export const MetabotResetLongChatButton = ({
|
||||
onResetConversation,
|
||||
}: MetabotResetLongChatButtonProps) => (
|
||||
<Text lh={1} c="text-light" m={0} ta="center">
|
||||
<Text lh={1} c="text-disabled" m={0} ta="center">
|
||||
{jt`This chat is getting long. You can ${(
|
||||
<UnstyledButton
|
||||
key="reset"
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
|
||||
.toolCallStarted {
|
||||
--spread: 160px;
|
||||
--base-gradient-color: var(--mb-color-bg-white);
|
||||
--base-gradient-color: var(--mb-color-background-primary);
|
||||
--base-color: var(--mb-color-text-primary);
|
||||
--bg: linear-gradient(
|
||||
90deg,
|
||||
|
||||
@@ -103,7 +103,7 @@ export const MetabotInlineSQLPrompt = ({
|
||||
disabled={disabled}
|
||||
leftSection={
|
||||
isDoingScience ? (
|
||||
<Loader size="xs" color="text-light" />
|
||||
<Loader size="xs" color="text-disabled" />
|
||||
) : (
|
||||
<Icon name="insight" />
|
||||
)
|
||||
|
||||
@@ -23,7 +23,7 @@ export const Text = styled.span`
|
||||
`;
|
||||
|
||||
export const Time = styled.time`
|
||||
color: var(--mb-color-text-medium);
|
||||
color: var(--mb-color-text-secondary);
|
||||
font-size: 0.766rem;
|
||||
line-height: 1.25rem;
|
||||
`;
|
||||
|
||||
@@ -20,7 +20,7 @@ const ModerationReviewIcon = ({
|
||||
<div>
|
||||
<div>{getModeratorDisplayText(moderator, currentUser)}</div>
|
||||
<Text
|
||||
c="text-medium"
|
||||
c="text-secondary"
|
||||
component="time"
|
||||
dateTime={review.created_at}
|
||||
fz="var(--mantine-font-size-xs)"
|
||||
|
||||
@@ -17,7 +17,7 @@ export const VerifyButton = styled((props: ButtonProps) => (
|
||||
padding: 8px;
|
||||
|
||||
&:disabled {
|
||||
color: var(--mb-color-text-medium);
|
||||
color: var(--mb-color-text-secondary);
|
||||
}
|
||||
|
||||
position: relative;
|
||||
|
||||
@@ -22,5 +22,5 @@ MODERATION_STATUS_ICONS.set("verified_filled", {
|
||||
|
||||
MODERATION_STATUS_ICONS.set(null, {
|
||||
name: "close",
|
||||
color: "text-light",
|
||||
color: "text-disabled",
|
||||
});
|
||||
|
||||
@@ -92,7 +92,7 @@ describe("moderation/service", () => {
|
||||
it("should return an icon for a removed review", () => {
|
||||
expect(getRemovedReviewStatusIcon()).toEqual({
|
||||
name: "close",
|
||||
color: "text-light",
|
||||
color: "text-disabled",
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -27,7 +27,6 @@ import { initializePlugin as initializeDependencies } from "./dependencies";
|
||||
import { initializePlugin as initializeEmbedding } from "./embedding";
|
||||
import { initializePlugin as initializeEmbeddingSdk } from "./embedding-sdk";
|
||||
import { initializePlugin as initializeEmbeddingIframeSdk } from "./embedding_iframe_sdk";
|
||||
import { initializePlugin as initializeEmbeddingIframeSdkSetup } from "./embedding_iframe_sdk_setup";
|
||||
import { initializePlugin as initializeFeatureLevelPermissions } from "./feature_level_permissions";
|
||||
import { initializePlugin as initializeGroupManagers } from "./group_managers";
|
||||
import { initializePlugin as initializeMetabot } from "./metabot";
|
||||
@@ -69,7 +68,6 @@ export function initializePlugins() {
|
||||
initializeEmbedding();
|
||||
initializeEmbeddingSdk();
|
||||
initializeEmbeddingIframeSdk();
|
||||
initializeEmbeddingIframeSdkSetup();
|
||||
initializeSnippets();
|
||||
initializeSmtpOverride();
|
||||
initializeSharing();
|
||||
|
||||
@@ -126,7 +126,7 @@ export const AllChangesView = ({ entities, title }: AllChangesViewProps) => {
|
||||
p="sm"
|
||||
gap="sm"
|
||||
mb={group.items.length > 0 ? "0.75rem" : 0}
|
||||
bg="bg-light"
|
||||
bg="background-secondary"
|
||||
bdrs="md"
|
||||
>
|
||||
<Icon name="synced_collection" size={16} c="text-secondary" />
|
||||
|
||||
@@ -29,7 +29,7 @@ export const ChangesLists = ({ title }: ChangesListsProps) => {
|
||||
if (allEntities.length === 0) {
|
||||
return (
|
||||
<Box ta="center" py="xl">
|
||||
<Text c="text-light" size="sm">
|
||||
<Text c="text-disabled" size="sm">
|
||||
{t`No changes to push`}
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
@@ -61,7 +61,7 @@ export const CollectionSyncList = ({
|
||||
}
|
||||
|
||||
if (collections.length === 0) {
|
||||
return <Text c="text-medium">{emptyMessage}</Text>;
|
||||
return <Text c="text-secondary">{emptyMessage}</Text>;
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
@@ -34,7 +34,7 @@ export const CollectionSyncRow = ({
|
||||
>
|
||||
<Flex justify="space-between" align="center">
|
||||
<Flex align="center" gap="sm">
|
||||
<Icon name={icon.name} c={icon.color ?? "text-medium"} />
|
||||
<Icon name={icon.name} c={icon.color ?? "text-secondary"} />
|
||||
<Text fw="medium">{collection.name}</Text>
|
||||
</Flex>
|
||||
<Flex align="center" gap="sm">
|
||||
|
||||
@@ -121,14 +121,14 @@ export const BranchPicker = ({
|
||||
flex={1}
|
||||
disabled={disabled || isLoading || isCreating}
|
||||
onClick={() => combobox.toggleDropdown()}
|
||||
leftSection={<Icon name="git_branch" c="text-medium" size={14} />}
|
||||
leftSection={<Icon name="git_branch" c="text-secondary" size={14} />}
|
||||
rightSection={
|
||||
isLoading || isCreating ? (
|
||||
<Loader size="xs" />
|
||||
) : (
|
||||
<Icon
|
||||
name="chevrondown"
|
||||
c="text-medium"
|
||||
c="text-secondary"
|
||||
size={12}
|
||||
style={{
|
||||
transform: combobox.dropdownOpened
|
||||
@@ -141,7 +141,7 @@ export const BranchPicker = ({
|
||||
}
|
||||
data-testid="branch-picker-button"
|
||||
>
|
||||
<Text fw="bold" c="text-medium" size="sm" lh="md" truncate>
|
||||
<Text fw="bold" c="text-secondary" size="sm" lh="md" truncate>
|
||||
{value}
|
||||
</Text>
|
||||
</Button>
|
||||
@@ -169,7 +169,7 @@ export const BranchPicker = ({
|
||||
<>
|
||||
{filteredBranches.length === 0 && !showCreateOption ? (
|
||||
<Box p="md">
|
||||
<Text size="sm" c="text-light" ta="center">
|
||||
<Text size="sm" c="text-disabled" ta="center">
|
||||
{searchValue
|
||||
? t`No branches found`
|
||||
: t`No branches available`}
|
||||
@@ -183,7 +183,7 @@ export const BranchPicker = ({
|
||||
<Box px="sm" py="sm">
|
||||
<Text
|
||||
size="xs"
|
||||
c="text-light"
|
||||
c="text-disabled"
|
||||
tt="uppercase"
|
||||
fw="bold"
|
||||
>
|
||||
@@ -220,7 +220,7 @@ export const BranchPicker = ({
|
||||
<Icon name="add" size={16} />
|
||||
<Box>
|
||||
<Text lh="md">{t`Create branch "${searchValue}"`}</Text>
|
||||
<Text size="xs" c="text-light">
|
||||
<Text size="xs" c="text-disabled">
|
||||
{t`from ${baseBranch || value}`}
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
@@ -25,7 +25,7 @@ export const CommitMessageSection = ({
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Text size="xs" c="text-medium" mt="sm">
|
||||
<Text size="xs" c="text-secondary" mt="sm">
|
||||
{t`This message will be visible in your Git history`}
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
@@ -281,7 +281,7 @@ export const RemoteSyncAdminSettings = () => {
|
||||
<Form disabled={!dirty}>
|
||||
<Stack gap="xl" maw="52rem">
|
||||
{!isRemoteSyncEnabled && (
|
||||
<Text c="text-medium" size="sm">
|
||||
<Text c="text-secondary" size="sm">
|
||||
{jt`Need help setting this up? Check out our ${(
|
||||
<ExternalLink key="link" href={docsUrl}>
|
||||
{t`setup guide`}
|
||||
|
||||
@@ -65,7 +65,7 @@ export const SyncedCollectionsSidebarSection = ({
|
||||
</Flex>
|
||||
|
||||
{!hasSyncedCollections && (
|
||||
<Text c="text-light" fz="sm" ta="center">
|
||||
<Text c="text-disabled" fz="sm" ta="center">
|
||||
{t`No synced collections`}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { t } from "ttag";
|
||||
|
||||
import type { ColorName } from "metabase/lib/colors/types";
|
||||
import type { IconName } from "metabase/ui";
|
||||
import type {
|
||||
Collection,
|
||||
@@ -42,18 +43,20 @@ export const getSyncStatusIcon = (status: RemoteSyncEntityStatus): IconName => {
|
||||
}
|
||||
};
|
||||
|
||||
export const getSyncStatusColor = (status: RemoteSyncEntityStatus): string => {
|
||||
export const getSyncStatusColor = (
|
||||
status: RemoteSyncEntityStatus,
|
||||
): ColorName => {
|
||||
switch (status) {
|
||||
case "create":
|
||||
return "var(--mb-color-success)";
|
||||
return "success";
|
||||
case "removed":
|
||||
case "delete":
|
||||
return "var(--mb-color-danger)";
|
||||
return "danger";
|
||||
case "update":
|
||||
case "touch":
|
||||
return "var(--mb-color-saturated-blue)";
|
||||
return "saturated-blue";
|
||||
default:
|
||||
return "var(--mb-color-info)";
|
||||
return "info";
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -132,7 +132,6 @@ export const DataAttributeMappingEditor = ({
|
||||
onClick={() =>
|
||||
handleChange(removeEntry<ValueType>(entries, index))
|
||||
}
|
||||
color={"text"}
|
||||
data-testid="remove-mapping"
|
||||
/>
|
||||
</td>
|
||||
|
||||
@@ -249,7 +249,6 @@ const ValueInput = ({
|
||||
<Button
|
||||
leftSection={<Icon name="close" />}
|
||||
onClick={onDelete}
|
||||
color={"text"}
|
||||
data-testid="remove-mapping"
|
||||
/>
|
||||
)}
|
||||
@@ -260,7 +259,6 @@ const ValueInput = ({
|
||||
<Button
|
||||
leftSection={<Icon name="refresh" />}
|
||||
onClick={onRevert}
|
||||
color={"text"}
|
||||
data-testid="revert-mapping"
|
||||
/>
|
||||
</Tooltip>
|
||||
@@ -290,7 +288,7 @@ const InfoCard = ({
|
||||
!["tenant", "system", "jwt"].includes(source ?? "") ? null : (
|
||||
<HoverCard>
|
||||
<HoverCard.Target>
|
||||
<Icon name="info" c="text-light" />
|
||||
<Icon name="info" c="text-disabled" />
|
||||
</HoverCard.Target>
|
||||
<HoverCard.Dropdown maw="20rem">
|
||||
<Text p="sm" maw="20rem">
|
||||
|
||||
@@ -109,7 +109,7 @@ export function SearchSettingsWidget({
|
||||
maw="25rem"
|
||||
animated={progress < 100}
|
||||
/>
|
||||
<Text c="text-light" size="md">
|
||||
<Text c="text-disabled" size="md">
|
||||
{progress === 100
|
||||
? t`Initialized search index`
|
||||
: t`Initializing search index...`}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
.root {
|
||||
background-color: var(--mb-color-bg-white);
|
||||
background-color: var(--mb-color-background-primary);
|
||||
border: 1px solid var(--mb-color-border);
|
||||
border-radius: var(--mantine-radius-md);
|
||||
}
|
||||
|
||||
@@ -58,7 +58,7 @@ export function SnippetCollectionMenu({
|
||||
<Button
|
||||
w={24}
|
||||
h={24}
|
||||
c="text-medium"
|
||||
c="text-secondary"
|
||||
size="compact-xs"
|
||||
variant="subtle"
|
||||
leftSection={<FixedSizeIcon name="ellipsis" size={16} />}
|
||||
|
||||
@@ -32,11 +32,11 @@ export function SupportSettingsSection() {
|
||||
title={t`Helping hand`}
|
||||
description={
|
||||
<>
|
||||
<Text c="text-medium" mt="sm">
|
||||
<Text c="text-secondary" mt="sm">
|
||||
{/* eslint-disable-next-line no-literal-metabase-strings -- This string only shows for admins. */}
|
||||
{t`Let a Metabase Success Engineer log in to your instance with a troubleshooting account to help resolve problems for you.`}
|
||||
</Text>
|
||||
<Text c="text-medium">
|
||||
<Text c="text-secondary">
|
||||
{t`Access always auto expires after the period you select.`}
|
||||
</Text>
|
||||
</>
|
||||
|
||||
@@ -26,7 +26,7 @@ export function TableHeader({
|
||||
align="center"
|
||||
p="0.5rem 1rem 0.5rem 2rem"
|
||||
mih="4rem"
|
||||
bg="var(--mb-color-background)"
|
||||
bg="background-primary"
|
||||
>
|
||||
{database && table ? (
|
||||
<TableBreadcrumbs
|
||||
|
||||
@@ -77,7 +77,9 @@ export const TableActionInputBoolean = ({
|
||||
{value ? (
|
||||
value
|
||||
) : (
|
||||
<Input.Placeholder c="text-light">{NULL_LABEL}</Input.Placeholder>
|
||||
<Input.Placeholder c="text-disabled">
|
||||
{NULL_LABEL}
|
||||
</Input.Placeholder>
|
||||
)}
|
||||
</Input>
|
||||
</Combobox.Target>
|
||||
|
||||
@@ -101,7 +101,10 @@ export const TableActionInputSearchableSelect = ({
|
||||
|
||||
if (!value && inputProps?.placeholder) {
|
||||
return (
|
||||
<Input.Placeholder c="text-light" className={classNames?.selectLabel}>
|
||||
<Input.Placeholder
|
||||
c="text-disabled"
|
||||
className={classNames?.selectLabel}
|
||||
>
|
||||
{inputProps.placeholder}
|
||||
</Input.Placeholder>
|
||||
);
|
||||
@@ -109,7 +112,10 @@ export const TableActionInputSearchableSelect = ({
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<Input.Placeholder c="text-light" className={classNames?.selectLabel}>
|
||||
<Input.Placeholder
|
||||
c="text-disabled"
|
||||
className={classNames?.selectLabel}
|
||||
>
|
||||
{t`Loading...`}
|
||||
</Input.Placeholder>
|
||||
);
|
||||
@@ -161,7 +167,7 @@ export const TableActionInputSearchableSelect = ({
|
||||
shouldDisplayClearButton && (
|
||||
<Icon
|
||||
name="close"
|
||||
color="var(--mb-color-text-light)"
|
||||
c="text-disabled"
|
||||
onClick={() => handleOptionSubmit(null)}
|
||||
onMouseDown={(event) => event.stopPropagation()}
|
||||
/>
|
||||
|
||||
@@ -7,12 +7,12 @@
|
||||
.gridWrapper {
|
||||
overflow: hidden;
|
||||
flex-grow: 1;
|
||||
background-color: var(--mb-color-background);
|
||||
background-color: var(--mb-color-background-primary);
|
||||
}
|
||||
|
||||
.gridFooter {
|
||||
border: 1px solid var(--mb-color-border);
|
||||
background-color: var(--mb-color-background);
|
||||
background-color: var(--mb-color-background-primary);
|
||||
color: var(--mb-color-text-secondary);
|
||||
padding: 0.5rem 1.5rem;
|
||||
padding-left: 0.5rem;
|
||||
@@ -22,6 +22,6 @@
|
||||
}
|
||||
|
||||
.filtersSection {
|
||||
background-color: var(--mb-color-background);
|
||||
background-color: var(--mb-color-background-primary);
|
||||
border-top: 1px solid var(--mb-color-border);
|
||||
}
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
color: var(--mb-color-brand);
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--mb-color-bg-white) 75%,
|
||||
var(--mb-color-background-primary) 75%,
|
||||
transparent
|
||||
);
|
||||
transition:
|
||||
|
||||
@@ -16,10 +16,10 @@
|
||||
}
|
||||
|
||||
.tableHeaderContainer {
|
||||
--cell-bg-color: var(--mb-color-background-light);
|
||||
--cell-hover-bg-color: var(--mb-color-background-light);
|
||||
--cell-bg-color: var(--mb-color-background-secondary);
|
||||
--cell-hover-bg-color: var(--mb-color-background-secondary);
|
||||
|
||||
background-color: var(--mb-color-background-light);
|
||||
background-color: var(--mb-color-background-secondary);
|
||||
|
||||
& .tableRow {
|
||||
background-color: transparent;
|
||||
@@ -29,6 +29,7 @@
|
||||
.tableHeaderCell {
|
||||
border-right: 1px solid var(--mb-color-border);
|
||||
font-weight: 700;
|
||||
background-color: var(--cell-bg-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--mb-color-brand);
|
||||
@@ -36,11 +37,11 @@
|
||||
}
|
||||
|
||||
.tableBodyContainer {
|
||||
background-color: var(--mb-color-bg-white);
|
||||
background-color: var(--mb-color-background-primary);
|
||||
}
|
||||
|
||||
.tableBodyCell {
|
||||
background-color: var(--mb-color-bg-white);
|
||||
background-color: var(--mb-color-background-primary);
|
||||
border-right: 1px solid var(--mb-color-border);
|
||||
}
|
||||
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user