diff --git a/frontend/src/metabase-lib/v1/Question.ts b/frontend/src/metabase-lib/v1/Question.ts
index a2b2dfe0b2b78663d7151535384d50c36fb398f6..3799c6365bf09c580be4dc0542bcf8c95da2e16b 100644
--- a/frontend/src/metabase-lib/v1/Question.ts
+++ b/frontend/src/metabase-lib/v1/Question.ts
@@ -47,10 +47,12 @@ import type {
DatasetData,
DatasetQuery,
Field,
+ LastEditInfo,
ParameterId,
Parameter as ParameterObject,
ParameterValues,
TableId,
+ UserInfo,
VisualizationSettings,
} from "metabase-types/api";
@@ -526,7 +528,7 @@ class Question {
return this.setCard(assoc(this.card(), "description", description));
}
- lastEditInfo() {
+ lastEditInfo(): LastEditInfo {
return this._card && this._card["last-edit-info"];
}
@@ -811,7 +813,7 @@ class Question {
return getIn(this, ["_card", "moderation_reviews"]) || [];
}
- getCreator(): string {
+ getCreator(): UserInfo {
return getIn(this, ["_card", "creator"]) || "";
}
diff --git a/frontend/src/metabase-types/api/card.ts b/frontend/src/metabase-types/api/card.ts
index 2087c6bd6ca6681e500727f52a72018970b769d0..dca7425e13fb98ad0d9ac6587ca76095869faccb 100644
--- a/frontend/src/metabase-types/api/card.ts
+++ b/frontend/src/metabase-types/api/card.ts
@@ -1,7 +1,7 @@
import type { EmbeddingParameters } from "metabase/public/lib/types";
import type { PieRow } from "metabase/visualizations/echarts/pie/model/types";
-import type { Collection, CollectionId } from "./collection";
+import type { Collection, CollectionId, LastEditInfo } from "./collection";
import type { DashCardId, DashboardId } from "./dashboard";
import type { Database, DatabaseId } from "./database";
import type { BaseEntityId } from "./entity-id";
@@ -14,9 +14,13 @@ import type { Table } from "./table";
import type { UserInfo } from "./user";
import type { CardDisplayType, VisualizationDisplay } from "./visualization";
import type { SmartScalarComparison } from "./visualization-settings";
-
export type CardType = "model" | "question" | "metric";
+type CreatorInfo = Pick<
+ UserInfo,
+ "first_name" | "last_name" | "email" | "id" | "common_name"
+>;
+
export interface Card<Q extends DatasetQuery = DatasetQuery>
extends UnsavedCard<Q> {
id: CardId;
@@ -53,7 +57,8 @@ export interface Card<Q extends DatasetQuery = DatasetQuery>
archived: boolean;
- creator?: UserInfo;
+ creator?: CreatorInfo;
+ "last-edit-info"?: LastEditInfo;
}
export interface PublicCard {
diff --git a/frontend/src/metabase/components/CopyButton/CopyButton.tsx b/frontend/src/metabase/components/CopyButton/CopyButton.tsx
index 1b09bd5d359391be8260e8fa3d1d058c892fd6c1..ebc6a4c0d136bac57f9b1ecea1821433a07cad66 100644
--- a/frontend/src/metabase/components/CopyButton/CopyButton.tsx
+++ b/frontend/src/metabase/components/CopyButton/CopyButton.tsx
@@ -1,7 +1,9 @@
+import cx from "classnames";
import { useState } from "react";
import CopyToClipboard from "react-copy-to-clipboard";
import { t } from "ttag";
+import Styles from "metabase/css/core/index.css";
import { Icon, Text, Tooltip } from "metabase/ui";
type CopyButtonProps = {
@@ -11,10 +13,11 @@ type CopyButtonProps = {
style?: object;
"aria-label"?: string;
};
+
export const CopyButton = ({
value,
onCopy,
- className,
+ className = cx(Styles.textBrandHover, Styles.cursorPointer),
style,
}: CopyButtonProps) => {
const [copied, setCopied] = useState(false);
diff --git a/frontend/src/metabase/components/DateTime/DateTime.jsx b/frontend/src/metabase/components/DateTime/DateTime.jsx
deleted file mode 100644
index d5ad4516f2eb45b85f6aaa4ec2f3896b6f49e443..0000000000000000000000000000000000000000
--- a/frontend/src/metabase/components/DateTime/DateTime.jsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import PropTypes from "prop-types";
-
-import { formatDateTimeWithUnit } from "metabase/lib/formatting";
-import MetabaseSettings from "metabase/lib/settings";
-
-// Mirrors DatetimeUnit type, as it's used in date formatting utility fn
-// Type: https://github.com/metabase/metabase/blob/8778569c56beb573b0e688d49edba327b8ae62ab/frontend/src/metabase-types/api/query.ts#L31
-export const DATE_TIME_UNITS = [
- "default",
- "minute",
- "minute-of-hour",
- "hour",
- "hour-of-day",
- "day",
- "day-of-week",
- "day-of-month",
- "day-of-year",
- "week",
- "week-of-year",
- "month",
- "month-of-year",
- "quarter",
- "quarter-of-year",
- "year",
-];
-
-const propTypes = {
- value: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.instanceOf(Date),
- PropTypes.number, // UNIX timestamp
- ]).isRequired,
- unit: PropTypes.oneOf(DATE_TIME_UNITS),
-};
-
-function DateTime({ value, unit = "default", ...props }) {
- const options = MetabaseSettings.formattingOptions();
- const formattedTime = formatDateTimeWithUnit(value, unit, options);
-
- return <span {...props}>{formattedTime}</span>;
-}
-
-DateTime.propTypes = propTypes;
-
-export default DateTime;
diff --git a/frontend/src/metabase/components/DateTime/DateTime.tsx b/frontend/src/metabase/components/DateTime/DateTime.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..74167e7a3c5116b362cde9f70eeffcd71b53f21e
--- /dev/null
+++ b/frontend/src/metabase/components/DateTime/DateTime.tsx
@@ -0,0 +1,30 @@
+// eslint-disable-next-line no-restricted-imports -- legacy usage
+import type { Moment } from "moment-timezone";
+
+import { formatDateTimeWithUnit } from "metabase/lib/formatting";
+import MetabaseSettings from "metabase/lib/settings";
+import type { DatetimeUnit } from "metabase-types/api";
+
+type DateTimeProps = {
+ value: string | Date | number | Moment;
+ componentProps?: React.ComponentProps<"span">;
+ unit?: DatetimeUnit;
+};
+
+/**
+ * note: this component intentionally doesn't let you pick a custom date format
+ * because that is an instance setting and should be respected globally
+ */
+function DateTime({ value, unit = "default", ...props }: DateTimeProps) {
+ const options = MetabaseSettings.formattingOptions();
+ const formattedTime = formatDateTimeWithUnit(
+ value,
+ unit ?? "default",
+ options,
+ );
+
+ return <span {...props}>{formattedTime}</span>;
+}
+
+// eslint-disable-next-line import/no-default-export -- legacy usage
+export default DateTime;
diff --git a/frontend/src/metabase/components/DateTime/DateTime.unit.spec.js b/frontend/src/metabase/components/DateTime/DateTime.unit.spec.tsx
similarity index 98%
rename from frontend/src/metabase/components/DateTime/DateTime.unit.spec.js
rename to frontend/src/metabase/components/DateTime/DateTime.unit.spec.tsx
index bf96bf8b25e6ea3a568676e67f2a45008502c750..8c53ff0cd54a36e8fb025b363740aaf57d17efdf 100644
--- a/frontend/src/metabase/components/DateTime/DateTime.unit.spec.js
+++ b/frontend/src/metabase/components/DateTime/DateTime.unit.spec.tsx
@@ -30,7 +30,7 @@ describe("DateTime", () => {
};
}
- function mockFormatting(settings) {
+ function mockFormatting(settings: any) {
jest
.spyOn(MetabaseSettings, "formattingOptions")
.mockImplementation(() => settings);
diff --git a/frontend/src/metabase/components/DateTime/index.jsx b/frontend/src/metabase/components/DateTime/index.jsx
deleted file mode 100644
index 8bed0cd8817fde1d4094b4de2b38edeeb2969150..0000000000000000000000000000000000000000
--- a/frontend/src/metabase/components/DateTime/index.jsx
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default } from "./DateTime";
-export * from "./DateTime";
diff --git a/frontend/src/metabase/components/DateTime/index.tsx b/frontend/src/metabase/components/DateTime/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b5e6d3f184f0c23f19586e9432d79ee0f1f1ae6b
--- /dev/null
+++ b/frontend/src/metabase/components/DateTime/index.tsx
@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/no-default-export -- legacy usage
+export { default } from "./DateTime";
diff --git a/frontend/src/metabase/components/EntityIdCard/EntityIdCard.tsx b/frontend/src/metabase/components/EntityIdCard/EntityIdCard.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2411b29e5c494a63a781b1b02a165cfacaee8b95
--- /dev/null
+++ b/frontend/src/metabase/components/EntityIdCard/EntityIdCard.tsx
@@ -0,0 +1,57 @@
+import { t } from "ttag";
+
+import { SidesheetCard } from "metabase/common/components/Sidesheet";
+import { useDocsUrl } from "metabase/common/hooks";
+import { CopyButton } from "metabase/components/CopyButton";
+import Link from "metabase/core/components/Link";
+import { Flex, Group, Icon, Paper, Popover, Text } from "metabase/ui";
+
+const EntityIdTitle = () => {
+ const { url: docsLink, showMetabaseLinks } = useDocsUrl(
+ "installation-and-operation/serialization",
+ );
+
+ return (
+ <Group spacing="sm">
+ {t`Entity ID`}
+ <Popover position="top-start">
+ <Popover.Target>
+ <Icon
+ name="info"
+ cursor="pointer"
+ style={{ position: "relative", top: "-1px" }}
+ />
+ </Popover.Target>
+ <Popover.Dropdown>
+ <Paper p="md" maw="13rem">
+ <Text size="sm">
+ {t`When using serialization, replace the sequential ID with this global entity ID to have stable URLs across environments. Also useful when troubleshooting serialization.`}{" "}
+ {showMetabaseLinks && (
+ <>
+ <Link
+ target="_new"
+ to={docsLink}
+ style={{ color: "var(--mb-color-brand)" }}
+ >
+ Learn more
+ </Link>
+ </>
+ )}
+ </Text>
+ </Paper>
+ </Popover.Dropdown>
+ </Popover>
+ </Group>
+ );
+};
+
+export function EntityIdCard({ entityId }: { entityId: string }) {
+ return (
+ <SidesheetCard title={<EntityIdTitle />}>
+ <Flex gap="sm" align="end">
+ <Text>{entityId}</Text>
+ <CopyButton value={entityId} />
+ </Flex>
+ </SidesheetCard>
+ );
+}
diff --git a/frontend/src/metabase/components/EntityIdCard/index.ts b/frontend/src/metabase/components/EntityIdCard/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1237a86afde818aee32927a9c4d5f57765cbe1c6
--- /dev/null
+++ b/frontend/src/metabase/components/EntityIdCard/index.ts
@@ -0,0 +1 @@
+export * from "./EntityIdCard";
diff --git a/frontend/src/metabase/components/ItemsTable/Columns.tsx b/frontend/src/metabase/components/ItemsTable/Columns.tsx
index 8c0c15d24baa69e8a347ca92d463aa4dac13a3ed..7dac95f3fe351cb802dce5c6eb3bbb26a00894b0 100644
--- a/frontend/src/metabase/components/ItemsTable/Columns.tsx
+++ b/frontend/src/metabase/components/ItemsTable/Columns.tsx
@@ -5,13 +5,12 @@ import type { ActionMenuProps } from "metabase/collections/components/ActionMenu
import ActionMenu from "metabase/collections/components/ActionMenu";
import DateTime from "metabase/components/DateTime";
import EntityItem from "metabase/components/EntityItem";
-import type { Edit } from "metabase/components/LastEditInfoLabel/LastEditInfoLabel";
import CheckBox from "metabase/core/components/CheckBox";
import { Ellipsified } from "metabase/core/components/Ellipsified";
import Markdown from "metabase/core/components/Markdown";
import Tooltip from "metabase/core/components/Tooltip";
import { useSelector } from "metabase/lib/redux";
-import { getFullName } from "metabase/lib/user";
+import { getUserName } from "metabase/lib/user";
import { PLUGIN_MODERATION } from "metabase/plugins";
import { getIsEmbeddingSdk } from "metabase/selectors/embed";
import type { IconProps } from "metabase/ui";
@@ -219,7 +218,7 @@ export const Columns = {
item: CollectionItem;
}) => {
const lastEditInfo = item["last-edit-info"];
- const lastEditedBy = getLastEditedBy(lastEditInfo) ?? "";
+ const lastEditedBy = getUserName(lastEditInfo) ?? "";
return (
<ItemCell
@@ -326,11 +325,3 @@ export const Columns = {
Cell: () => <ItemCell />,
},
};
-
-const getLastEditedBy = (lastEditInfo?: Edit) => {
- if (!lastEditInfo) {
- return "";
- }
- const name = getFullName(lastEditInfo);
- return name || lastEditInfo.email;
-};
diff --git a/frontend/src/metabase/css/core/colors.module.css b/frontend/src/metabase/css/core/colors.module.css
index e4cb6af767510b0983b623be4fbf6bf57fdbbf7e..66e10c01c1f4bed30baa9ea425b17de9e5b80bab 100644
--- a/frontend/src/metabase/css/core/colors.module.css
+++ b/frontend/src/metabase/css/core/colors.module.css
@@ -154,7 +154,8 @@
color: var(--mb-color-text-dark);
}
-.textBrand {
+.textBrand,
+.textBrandHover:hover {
color: var(--mb-color-brand);
}
diff --git a/frontend/src/metabase/lib/formatting/date.tsx b/frontend/src/metabase/lib/formatting/date.tsx
index e2082c9f7f1b973867bebabe2d55ef1b92da6289..39202834af2a1ed7f2658631213e9e311e8085e6 100644
--- a/frontend/src/metabase/lib/formatting/date.tsx
+++ b/frontend/src/metabase/lib/formatting/date.tsx
@@ -1016,10 +1016,10 @@ function replaceDateFormatNames(format: string, options: OptionsType) {
.replace(/\bdddd\b/g, getDayFormat(options));
}
-function formatDateTimeWithFormats(
- value: number | Moment,
+export function formatDateTimeWithFormats(
+ value: number | string | Date | Moment,
dateFormat: string,
- timeFormat: string,
+ timeFormat: string | null,
options: OptionsType,
) {
const m = moment.isMoment(value)
@@ -1048,7 +1048,7 @@ function formatDateTimeWithFormats(
}
export function formatDateTimeWithUnit(
- value: number | string,
+ value: number | string | Date | Moment,
unit: DatetimeUnit,
options: OptionsType = {},
) {
@@ -1073,7 +1073,7 @@ export function formatDateTimeWithUnit(
!options.noRange
) {
// tooltip show range like "January 1 - 7, 2017"
- return formatDateTimeRangeWithUnit([value], unit, options);
+ return formatDateTimeRangeWithUnit([String(value)], unit, options);
}
}
diff --git a/frontend/src/metabase/lib/user.ts b/frontend/src/metabase/lib/user.ts
index ccfa842f906c5f5e274d1f2a3f220975468ddf74..9a7eb628ca4bb03b7cf4dad866311d1368fb1329 100644
--- a/frontend/src/metabase/lib/user.ts
+++ b/frontend/src/metabase/lib/user.ts
@@ -4,6 +4,14 @@ export function getFullName(user: NamedUser): string | null {
return [firstName, lastName].join(" ").trim() || null;
}
+export const getUserName = (userInfo?: NamedUser) => {
+ if (!userInfo) {
+ return "";
+ }
+ const name = getFullName(userInfo);
+ return name || userInfo.email;
+};
+
export interface NamedUser {
first_name?: string | null;
last_name?: string | null;
diff --git a/frontend/src/metabase/query_builder/components/view/sidebars/QuestionInfoSidebar/QuestionDetails.tsx b/frontend/src/metabase/query_builder/components/view/sidebars/QuestionInfoSidebar/QuestionDetails.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..984a9c9cf9b08ebbefb0c7d3664979b2068dca05
--- /dev/null
+++ b/frontend/src/metabase/query_builder/components/view/sidebars/QuestionInfoSidebar/QuestionDetails.tsx
@@ -0,0 +1,125 @@
+import cx from "classnames";
+import { useState } from "react";
+import { c, t } from "ttag";
+
+import { SidesheetCardSection } from "metabase/common/components/Sidesheet";
+import DateTime from "metabase/components/DateTime";
+import Styles from "metabase/css/core/index.css";
+import { getUserName } from "metabase/lib/user";
+import { QuestionPublicLinkPopover } from "metabase/sharing/components/PublicLinkPopover";
+import { Box, Flex, Icon, Text } from "metabase/ui";
+import type Question from "metabase-lib/v1/Question";
+
+import SidebarStyles from "./QuestionInfoSidebar.module.css";
+
+export const QuestionDetails = ({ question }: { question: Question }) => {
+ const lastEditInfo = question.lastEditInfo();
+ const createdBy = question.getCreator();
+ const createdAt = question.getCreatedAt();
+
+ return (
+ <>
+ <SidesheetCardSection title={t`Creator and last editor`}>
+ {lastEditInfo && (
+ <Flex gap="sm" align="center">
+ <Icon name="ai" />
+ <Text>
+ {c("{0} is a date/time and {1} is a person's name").jt`${(
+ <DateTime
+ unit="day"
+ value={lastEditInfo.timestamp}
+ key="date"
+ />
+ )} by ${getUserName(lastEditInfo)}`}
+ </Text>
+ </Flex>
+ )}
+
+ <Flex gap="sm" align="center">
+ <Icon name="pencil" />
+ <Text>
+ {c("{0} is a date/time and {1} is a person's name").jt`${(
+ <DateTime unit="day" value={createdAt} key="date" />
+ )} by ${getUserName(createdBy)}`}
+ </Text>
+ </Flex>
+ </SidesheetCardSection>
+ <SidesheetCardSection title={t`Saved in`}>
+ <Flex gap="sm" align="center">
+ <Icon name="folder" />
+ <Text>{question.collection()?.name}</Text>
+ </Flex>
+ </SidesheetCardSection>
+ <SharingDisplay question={question} />
+ <SourceDisplay question={question} />
+ </>
+ );
+};
+
+function SourceDisplay({ question }: { question: Question }) {
+ const sourceInfo = question.legacyQueryTable();
+
+ if (!sourceInfo) {
+ return null;
+ }
+
+ return (
+ <SidesheetCardSection title={t`Based on`}>
+ <Flex gap="sm" align="center">
+ {sourceInfo.db && (
+ <>
+ <Text>{sourceInfo.db.name}</Text>
+ {"/"}
+ </>
+ )}
+ <Text>{sourceInfo?.display_name}</Text>
+ </Flex>
+ </SidesheetCardSection>
+ );
+}
+
+function SharingDisplay({ question }: { question: Question }) {
+ const publicUUID = question.publicUUID();
+ const embeddingEnabled = question._card.enable_embedding;
+ const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+ if (!publicUUID && !embeddingEnabled) {
+ return null;
+ }
+
+ return (
+ <SidesheetCardSection title={t`Visibility`}>
+ {publicUUID && (
+ <Flex gap="sm" align="center">
+ <Icon name="globe" color="var(--mb-color-brand)" />
+ <Text>{t`Shared publicly`}</Text>
+
+ <QuestionPublicLinkPopover
+ target={
+ <Icon
+ name="link"
+ onClick={() => setIsPopoverOpen(prev => !prev)}
+ className={cx(
+ Styles.cursorPointer,
+ Styles.textBrandHover,
+ SidebarStyles.LinkIcon,
+ )}
+ />
+ }
+ isOpen={isPopoverOpen}
+ onClose={() => setIsPopoverOpen(false)}
+ question={question}
+ />
+ </Flex>
+ )}
+ {embeddingEnabled && (
+ <Flex gap="sm" align="center">
+ <Box className={SidebarStyles.BrandCircle}>
+ <Icon name="embed" size="14px" />
+ </Box>
+ <Text>{t`Embedded`}</Text>
+ </Flex>
+ )}
+ </SidesheetCardSection>
+ );
+}
diff --git a/frontend/src/metabase/query_builder/components/view/sidebars/QuestionInfoSidebar/QuestionInfoSidebar.module.css b/frontend/src/metabase/query_builder/components/view/sidebars/QuestionInfoSidebar/QuestionInfoSidebar.module.css
index 70613d52e255e14ce983454bafd680171ffefea6..70ef3c3b41e20ee3524272110bad25abca6d12d7 100644
--- a/frontend/src/metabase/query_builder/components/view/sidebars/QuestionInfoSidebar/QuestionInfoSidebar.module.css
+++ b/frontend/src/metabase/query_builder/components/view/sidebars/QuestionInfoSidebar/QuestionInfoSidebar.module.css
@@ -3,3 +3,16 @@
overflow: auto;
line-height: 1.38rem; /* magic number to keep line-height from changing in edit mode */
}
+
+.BrandCircle {
+ background-color: var(--mb-color-brand);
+ color: var(--mb-color-text-white);
+ border-radius: 50%;
+ height: 1rem;
+ width: 1rem;
+ padding: 1px;
+}
+
+.LinkIcon {
+ margin-top: 0.2rem;
+}
diff --git a/frontend/src/metabase/query_builder/components/view/sidebars/QuestionInfoSidebar/QuestionInfoSidebar.tsx b/frontend/src/metabase/query_builder/components/view/sidebars/QuestionInfoSidebar/QuestionInfoSidebar.tsx
index 2cefdcd33730d65098033f81d2ea726f5365ada9..44e9b9673ed5a79b850adad62051ba4973b21d30 100644
--- a/frontend/src/metabase/query_builder/components/view/sidebars/QuestionInfoSidebar/QuestionInfoSidebar.tsx
+++ b/frontend/src/metabase/query_builder/components/view/sidebars/QuestionInfoSidebar/QuestionInfoSidebar.tsx
@@ -8,6 +8,7 @@ import {
SidesheetTabPanelContainer,
} from "metabase/common/components/Sidesheet";
import SidesheetStyles from "metabase/common/components/Sidesheet/sidesheet.module.css";
+import { EntityIdCard } from "metabase/components/EntityIdCard";
import EditableText from "metabase/core/components/EditableText";
import Link from "metabase/core/components/Link";
import { useDispatch } from "metabase/lib/redux";
@@ -18,6 +19,7 @@ import { QuestionActivityTimeline } from "metabase/query_builder/components/Ques
import { Stack, Tabs } from "metabase/ui";
import type Question from "metabase-lib/v1/Question";
+import { QuestionDetails } from "./QuestionDetails";
import Styles from "./QuestionInfoSidebar.module.css";
interface QuestionInfoSidebarProps {
@@ -93,6 +95,10 @@ export const QuestionInfoSidebar = ({
>{t`See more about this model`}</Link>
)}
</SidesheetCard>
+ <SidesheetCard>
+ <QuestionDetails question={question} />
+ </SidesheetCard>
+ <EntityIdCard entityId={question._card.entity_id} />
</Stack>
</Tabs.Panel>
<Tabs.Panel value="history">
diff --git a/frontend/src/metabase/query_builder/components/view/sidebars/QuestionInfoSidebar/tests/common.unit.spec.tsx b/frontend/src/metabase/query_builder/components/view/sidebars/QuestionInfoSidebar/tests/common.unit.spec.tsx
index 2137db5f57a6ebb7ab77ca0cf83034cf0e3a545c..6418fb418e4f72f25b638ca1004dd0c8c978de7d 100644
--- a/frontend/src/metabase/query_builder/components/view/sidebars/QuestionInfoSidebar/tests/common.unit.spec.tsx
+++ b/frontend/src/metabase/query_builder/components/view/sidebars/QuestionInfoSidebar/tests/common.unit.spec.tsx
@@ -2,8 +2,10 @@ import userEvent from "@testing-library/user-event";
import { screen } from "__support__/ui";
import * as Urls from "metabase/lib/urls";
+import type { BaseEntityId } from "metabase-types/api";
import {
createMockCard,
+ createMockCollection,
createMockModerationReview,
} from "metabase-types/api/mocks";
@@ -52,6 +54,96 @@ describe("QuestionInfoSidebar", () => {
});
});
+ describe("question details", () => {
+ it("should show last edited", () => {
+ const card = createMockCard({
+ name: "Question",
+ "last-edit-info": {
+ first_name: "Ash",
+ last_name: "Ketchum",
+ timestamp: "2024-04-11T00:00:00Z",
+ email: "Ashboy@example.com",
+ id: 19,
+ },
+ });
+ setup({ card });
+ expect(screen.getByText("April 11, 2024")).toBeInTheDocument();
+ expect(screen.getByText("by Ash Ketchum")).toBeInTheDocument();
+ });
+
+ it("should show creation information", () => {
+ const card = createMockCard({
+ name: "Question",
+ creator: {
+ first_name: "Ash",
+ last_name: "Ketchum",
+ email: "Ashboy@example.com",
+ common_name: "Ash Ketchum",
+ id: 19,
+ },
+ created_at: "2024-04-13T00:00:00Z",
+ });
+ setup({ card });
+ expect(screen.getByText("April 13, 2024")).toBeInTheDocument();
+ expect(screen.getByText("by Ash Ketchum")).toBeInTheDocument();
+ });
+
+ it("should show save location", () => {
+ const card = createMockCard({
+ name: "Question",
+ collection: createMockCollection({ name: "My Big Collection" }),
+ });
+ setup({ card });
+
+ expect(screen.getByText("My Big Collection")).toBeInTheDocument();
+ });
+
+ it("should show source information", () => {
+ const card = createMockCard({
+ name: "Question",
+ });
+ setup({ card });
+
+ expect(screen.getByText("Sample Database")).toBeInTheDocument();
+ expect(screen.getByText("/")).toBeInTheDocument();
+ expect(screen.getByText("Products")).toBeInTheDocument();
+ });
+
+ it("should show entity id", () => {
+ const card = createMockCard({
+ name: "Question",
+ entity_id: "jenny8675309" as BaseEntityId,
+ });
+ setup({ card });
+
+ expect(screen.getByText("Entity ID")).toBeInTheDocument();
+ expect(screen.getByText("jenny8675309")).toBeInTheDocument();
+ });
+
+ it("should show if a public link is enabled", () => {
+ const card = createMockCard({
+ name: "Question",
+ public_uuid: "watch-me-please",
+ });
+ setup({ card });
+
+ expect(screen.getByLabelText("globe icon")).toBeInTheDocument();
+ expect(screen.getByText("Shared publicly")).toBeInTheDocument();
+ expect(screen.getByLabelText("link icon")).toBeInTheDocument();
+ });
+
+ it("should show if a embedding is enabled", () => {
+ const card = createMockCard({
+ name: "Question",
+ enable_embedding: true,
+ });
+ setup({ card });
+
+ expect(screen.getByLabelText("embed icon")).toBeInTheDocument();
+ expect(screen.getByText("Embedded")).toBeInTheDocument();
+ });
+ });
+
describe("model detail link", () => {
it("is shown for models", async () => {
const card = createMockCard({
diff --git a/frontend/src/metabase/ui/components/icons/Icon/icons/globe.svg b/frontend/src/metabase/ui/components/icons/Icon/icons/globe.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b9f131006c24d19bbff21c23a1d935e70c42fd60
--- /dev/null
+++ b/frontend/src/metabase/ui/components/icons/Icon/icons/globe.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.99795 14.75C4.27097 14.7489 1.25 11.7272 1.25 8C1.25 4.27208 4.27208 1.25 8 1.25C11.7279 1.25 14.75 4.27208 14.75 8C14.75 11.7272 11.7291 14.7488 8.00222 14.75H7.99795ZM2.75 8C2.75 7.74536 2.76813 7.49495 2.80317 7.25H4.76868C4.75641 7.49077 4.75 7.74066 4.75 8C4.75 8.25934 4.75641 8.50923 4.76868 8.75H2.80317C2.76813 8.50505 2.75 8.25464 2.75 8ZM4.93557 10.25H3.25522C3.78092 11.3566 4.68236 12.2502 5.79468 12.7657C5.43705 12.127 5.12357 11.3038 4.93557 10.25ZM10.2053 12.7657C10.5629 12.127 10.8764 11.3038 11.0644 10.25H12.7448C12.2191 11.3566 11.3176 12.2502 10.2053 12.7657ZM9.53666 10.25C9.31808 11.2877 8.96513 11.9835 8.6397 12.4391C8.40242 12.7713 8.17167 12.9874 8 13.1209C7.82833 12.9874 7.59758 12.7713 7.3603 12.4391C7.03488 11.9835 6.68192 11.2877 6.46334 10.25H9.53666ZM9.72918 8.75H6.27082C6.25724 8.51224 6.25 8.26243 6.25 8C6.25 7.73757 6.25724 7.48776 6.27082 7.25H9.72918C9.74276 7.48776 9.75 7.73757 9.75 8C9.75 8.26243 9.74276 8.51224 9.72918 8.75ZM11.2313 8.75H13.1968C13.2319 8.50505 13.25 8.25464 13.25 8C13.25 7.74536 13.2319 7.49495 13.1968 7.25H11.2313C11.2436 7.49077 11.25 7.74066 11.25 8C11.25 8.25934 11.2436 8.50923 11.2313 8.75ZM11.0644 5.75H12.7448C12.2191 4.64338 11.3176 3.74984 10.2053 3.23426C10.5629 3.87298 10.8764 4.69618 11.0644 5.75ZM5.79468 3.23426C5.43705 3.87298 5.12357 4.69618 4.93557 5.75H3.25522C3.78092 4.64338 4.68236 3.74984 5.79468 3.23426ZM6.46334 5.75H9.53666C9.31808 4.71226 8.96512 4.01653 8.6397 3.56093C8.40241 3.22873 8.17167 3.01261 8 2.87914C7.82833 3.01261 7.59758 3.22873 7.3603 3.56093C7.03487 4.01653 6.68192 4.71226 6.46334 5.75Z" />
+</svg>
diff --git a/frontend/src/metabase/ui/components/icons/Icon/icons/index.ts b/frontend/src/metabase/ui/components/icons/Icon/icons/index.ts
index 6776fda97524f923766b8825a73dcdfc81f19934..4e849ae4bb90ac9d939b87f14dc9607184f6f229 100644
--- a/frontend/src/metabase/ui/components/icons/Icon/icons/index.ts
+++ b/frontend/src/metabase/ui/components/icons/Icon/icons/index.ts
@@ -161,6 +161,8 @@ import gear_component from "./gear.svg?component";
import gear_source from "./gear.svg?source";
import gem_component from "./gem.svg?component";
import gem_source from "./gem.svg?source";
+import globe_component from "./globe.svg?component";
+import globe_source from "./globe.svg?source";
import google_component from "./google.svg?component";
import google_source from "./google.svg?source";
import grabber_component from "./grabber.svg?component";
@@ -709,6 +711,10 @@ export const Icons = {
component: gem_component,
source: gem_source,
},
+ globe: {
+ component: globe_component,
+ source: globe_source,
+ },
grabber: {
component: grabber_component,
source: grabber_source,