fix x-rays visible when enabled (#28877)

e2e/test/scenarios/dashboard/x-rays.cy.spec.js

@@ -21,11 +21,10 @@ describe("scenarios > x-rays", () => {
 
   const XRAY_DATASETS = 11; // enough to load most questions
 
-  it.skip("should not display x-rays if the feature is disabled in admin settings (metabase#26571)", () => {
+  it("should not display x-rays if the feature is disabled in admin settings (metabase#26571)", () => {
     cy.request("PUT", "api/setting/enable-xrays", { value: false });
 
     cy.visit("/");
-    cy.findByText("Metabase tips");
 
     cy.findByText(
       "Try out these sample x-rays to see what Metabase can do.",

frontend/src/metabase/home/homepage/components/HomeContent/HomeContent.tsx

@@ -12,6 +12,7 @@ export interface HomeContentProps {
   databases?: Database[];
   recentItems?: RecentItem[];
   popularItems?: PopularItem[];
+  isXrayEnabled: boolean;
 }
 
 const HomeContent = (props: HomeContentProps): JSX.Element | null => {
@@ -69,8 +70,11 @@ const isRecentSection = ({
   return user.has_question_and_dashboard && recentItems.length > 0;
 };
 
-const isXraySection = ({ databases = [] }: HomeContentProps): boolean => {
-  return databases.some(isSyncCompleted);
+const isXraySection = ({
+  databases = [],
+  isXrayEnabled,
+}: HomeContentProps): boolean => {
+  return databases.some(isSyncCompleted) && isXrayEnabled;
 };
 
 export default HomeContent;

frontend/src/metabase/home/homepage/components/HomeContent/HomeContent.unit.spec.tsx

@@ -109,6 +109,23 @@ describe("HomeContent", () => {
     expect(screen.getByText("XraySection")).toBeInTheDocument();
   });
 
+  it("should not render x-rays for the installer when there is no question and dashboard if the x-rays feature is disabled", () => {
+    const props = getProps({
+      user: createMockUser({
+        is_installer: true,
+        has_question_and_dashboard: false,
+        first_login: "2020-01-10T00:00:00Z",
+      }),
+      databases: [createMockDatabase()],
+      recentItems: [createMockRecentItem()],
+      isXrayEnabled: false,
+    });
+
+    render(<HomeContent {...props} />);
+
+    expect(screen.queryByText("XraySection")).not.toBeInTheDocument();
+  });
+
   it("should render nothing if there are no databases", () => {
     const props = getProps({
       user: createMockUser({
@@ -146,5 +163,6 @@ const getProps = (opts?: Partial<HomeContentProps>): HomeContentProps => ({
   databases: [],
   recentItems: [],
   popularItems: [],
+  isXrayEnabled: true,
   ...opts,
 });

frontend/src/metabase/home/homepage/containers/HomeContent/HomeContent.tsx

@@ -5,10 +5,12 @@ import RecentItems from "metabase/entities/recent-items";
 import PopularItems from "metabase/entities/popular-items";
 import { getUser } from "metabase/selectors/user";
 import { State } from "metabase-types/store";
+import { getSetting } from "metabase/selectors/settings";
 import HomeContent from "../../components/HomeContent";
 
 const mapStateToProps = (state: State) => ({
   user: getUser(state),
+  isXrayEnabled: getSetting(state, "enable-xrays"),
 });
 
 export default _.compose(