Add question last cached time info (#23787)

enterprise/frontend/src/metabase-enterprise/caching/components/CacheSection/CacheSection.tsx

@@ -16,10 +16,7 @@ interface CacheSectionProps {
   onSave: (cache_ttl: number | null) => Promise<any>;
 }
 
-export const CacheSection = ({
-  initialCacheTTL,
-  onSave,
-}: CacheSectionProps) => {
+const CacheSection = ({ initialCacheTTL, onSave }: CacheSectionProps) => {
   const [cacheTTL, setCacheTTL] = useState(initialCacheTTL);
 
   const handleChange = useCallback(
@@ -70,3 +67,5 @@ export const CacheSection = ({
     </CacheSectionRoot>
   );
 };
+
+export default CacheSection;

enterprise/frontend/src/metabase-enterprise/caching/components/CacheSection/index.js

-export * from "./CacheSection";

enterprise/frontend/src/metabase-enterprise/caching/components/CacheSection/index.ts

+export { default } from "./CacheSection";

enterprise/frontend/src/metabase-enterprise/caching/components/CacheTTLField/CacheTTLField.jsx

@@ -17,7 +17,7 @@ const propTypes = {
   message: PropTypes.string,
 };
 
-export function CacheTTLField({ field, message, ...props }) {
+function CacheTTLField({ field, message, ...props }) {
   const hasError = !!field.error;
   return (
     <CacheTTLFieldContainer {...props} data-testid="cache-ttl-field">
@@ -40,3 +40,5 @@ export function CacheTTLField({ field, message, ...props }) {
 }
 
 CacheTTLField.propTypes = propTypes;
+
+export default CacheTTLField;

enterprise/frontend/src/metabase-enterprise/caching/components/CacheTTLField/CacheTTLField.unit.spec.js

 import React from "react";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { CacheTTLField } from "./CacheTTLField";
+import CacheTTLField from "./CacheTTLField";
 
 function setup({ name = "cache_ttl", message, value }) {
   const onChange = jest.fn();

enterprise/frontend/src/metabase-enterprise/caching/components/CacheTTLField/index.js

-export * from "./CacheTTLField";
+export { default } from "./CacheTTLField";

enterprise/frontend/src/metabase-enterprise/caching/components/DashboardCacheSection/DashboardCacheSection.tsx

 import React from "react";
 import { Dashboard } from "metabase-types/api";
-import { CacheSection } from "../CacheSection";
+import CacheSection from "../CacheSection";
 
 interface DashboardCacheSectionProps {
   dashboard: Dashboard;
   onSave: (cache_ttl: number | null) => Promise<Dashboard>;
 }
 
-export const DashboardCacheSection = ({
+const DashboardCacheSection = ({
   dashboard,
   onSave,
 }: DashboardCacheSectionProps) => {
   return <CacheSection initialCacheTTL={dashboard.cache_ttl} onSave={onSave} />;
 };
+
+export default DashboardCacheSection;

enterprise/frontend/src/metabase-enterprise/caching/components/DashboardCacheSection/index.ts

-export * from "./DashboardCacheSection";
+export { default } from "./DashboardCacheSection";

enterprise/frontend/src/metabase-enterprise/caching/components/DatabaseCacheTTLField/DatabaseCacheTTLField.jsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { t } from "ttag";
 import Select, { Option } from "metabase/core/components/Select";
-import { CacheTTLField } from "../CacheTTLField";
+import CacheTTLField from "../CacheTTLField";
 import {
   CacheFieldContainer,
   FieldContainer,
@@ -20,7 +20,7 @@ const propTypes = {
   field: PropTypes.object.isRequired,
 };
 
-export function DatabaseCacheTTLField({ field }) {
+function DatabaseCacheTTLField({ field }) {
   const [mode, setMode] = useState(
     field.value > 0 ? MODE.CUSTOM : MODE.INSTANCE_DEFAULT,
   );
@@ -55,3 +55,5 @@ export function DatabaseCacheTTLField({ field }) {
 }
 
 DatabaseCacheTTLField.propTypes = propTypes;
+
+export default DatabaseCacheTTLField;

enterprise/frontend/src/metabase-enterprise/caching/components/DatabaseCacheTTLField/DatabaseCacheTTLField.unit.spec.js

 import React from "react";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { DatabaseCacheTTLField } from "./DatabaseCacheTTLField";
+import DatabaseCacheTTLField from "./DatabaseCacheTTLField";
 
 function setup({ value = null } = {}) {
   const onChange = jest.fn();

enterprise/frontend/src/metabase-enterprise/caching/components/DatabaseCacheTTLField/index.js

-export * from "./DatabaseCacheTTLField";
+export { default } from "./DatabaseCacheTTLField";

enterprise/frontend/src/metabase-enterprise/caching/components/QuestionCacheSection/QuestionCacheSection.styled.tsx

+import styled from "@emotion/styled";
+import { color } from "metabase/lib/colors";
+
+export const QueryStartLabel = styled.div`
+  color: ${color("text-dark")};
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+`;

enterprise/frontend/src/metabase-enterprise/caching/components/QuestionCacheSection/QuestionCacheSection.tsx

 import React from "react";
+import { t } from "ttag";
+import { getRelativeTime } from "metabase/lib/time";
 import Question from "metabase-lib/lib/Question";
-import { CacheSection } from "../CacheSection";
+import CacheSection from "../CacheSection";
+import { QueryStartLabel } from "./QuestionCacheSection.styled";
 
-interface QuestionCacheSectionProps {
+export interface QuestionCacheSectionProps {
   question: Question;
   onSave: (cache_ttl: number | null) => Promise<Question>;
 }
 
-export const QuestionCacheSection = ({
+const QuestionCacheSection = ({
   question,
   onSave,
 }: QuestionCacheSectionProps) => {
-  return <CacheSection initialCacheTTL={question.cacheTTL()} onSave={onSave} />;
+  const cacheTimestamp = question.lastQueryStart();
+  const cacheRelativeTime = cacheTimestamp && getRelativeTime(cacheTimestamp);
+
+  return (
+    <div>
+      {cacheTimestamp && (
+        <QueryStartLabel>
+          {t`Question last cached ${cacheRelativeTime}`}
+        </QueryStartLabel>
+      )}
+      <CacheSection initialCacheTTL={question.cacheTTL()} onSave={onSave} />
+    </div>
+  );
 };
+
+export default QuestionCacheSection;

enterprise/frontend/src/metabase-enterprise/caching/components/QuestionCacheSection/QuestionCacheSection.unit.spec.tsx

+import React from "react";
+import { render, screen } from "@testing-library/react";
+import Question from "metabase-lib/lib/Question";
+import { createMockCard } from "metabase-types/api/mocks";
+import QuestionCacheSection, {
+  QuestionCacheSectionProps,
+} from "./QuestionCacheSection";
+
+describe("QuestionCacheSection", () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+    jest.setSystemTime(new Date(2020, 0, 10));
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it("should show the time of the last cached query", () => {
+    const props = getProps({
+      question: new Question(
+        createMockCard({
+          last_query_start: "2020-01-05T00:00:00Z",
+        }),
+      ),
+    });
+
+    render(<QuestionCacheSection {...props} />);
+
+    const cacheLabel = screen.getByText("Question last cached 5 days ago");
+    expect(cacheLabel).toBeInTheDocument();
+  });
+});
+
+const getProps = (
+  opts?: Partial<QuestionCacheSectionProps>,
+): QuestionCacheSectionProps => ({
+  question: new Question(createMockCard()),
+  onSave: jest.fn(),
+  ...opts,
+});

enterprise/frontend/src/metabase-enterprise/caching/components/QuestionCacheSection/index.js

-export * from "./QuestionCacheSection";

enterprise/frontend/src/metabase-enterprise/caching/components/QuestionCacheSection/index.ts

+export { default } from "./QuestionCacheSection";

enterprise/frontend/src/metabase-enterprise/caching/components/QuestionCacheTTLField/QuestionCacheTTLField.jsx

@@ -31,7 +31,7 @@ function getInitialMode(question, implicitCacheTTL) {
   return MODE.DEFAULT;
 }
 
-export function QuestionCacheTTLField({ field, question, ...props }) {
+function QuestionCacheTTLField({ field, question, ...props }) {
   const implicitCacheTTL = useMemo(
     () => getQuestionsImplicitCacheTTL(question),
     [question],
@@ -73,3 +73,5 @@ export function QuestionCacheTTLField({ field, question, ...props }) {
 }
 
 QuestionCacheTTLField.propTypes = propTypes;
+
+export default QuestionCacheTTLField;

enterprise/frontend/src/metabase-enterprise/caching/components/QuestionCacheTTLField/QuestionCacheTTLField.styled.jsx

@@ -3,7 +3,7 @@ import { t } from "ttag";
 import styled from "@emotion/styled";
 import { space } from "metabase/styled-components/theme";
 import Radio from "metabase/core/components/Radio";
-import { CacheTTLField } from "../CacheTTLField";
+import CacheTTLField from "../CacheTTLField";
 
 export function CacheTTLInput(props) {
   return <CacheTTLField {...props} message={t`Cache results for`} />;

enterprise/frontend/src/metabase-enterprise/caching/components/QuestionCacheTTLField/QuestionCacheTTLField.unit.spec.js

@@ -3,7 +3,7 @@ import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { msToMinutes, msToHours } from "metabase/lib/time";
 import MetabaseSettings from "metabase/lib/settings";
-import { QuestionCacheTTLField } from "./QuestionCacheTTLField";
+import QuestionCacheTTLField from "./QuestionCacheTTLField";
 
 const TEN_MINUTES = 10 * 60 * 1000;
 

enterprise/frontend/src/metabase-enterprise/caching/components/QuestionCacheTTLField/index.js

-export * from "./QuestionCacheTTLField";
+export { default } from "./QuestionCacheTTLField";