indicate orphan dashboard parameters (#32711)

frontend/src/metabase/dashboard/components/DashCard/DashCardParameterMapper/DashCardCardParameterMapper.jsx

@@ -160,6 +160,19 @@ export function DashCardCardParameterMapper({
             />
           ),
         };
+      } else if (target != null) {
+        return {
+          buttonVariant: "invalid",
+          buttonText: t`Unknown Field`,
+          buttonIcon: (
+            <CloseIconButton
+              onClick={e => {
+                handleChangeTarget(null);
+                e.stopPropagation();
+              }}
+            />
+          ),
+        };
       } else {
         return {
           buttonVariant: "default",
@@ -172,6 +185,7 @@ export function DashCardCardParameterMapper({
       hasPermissionsToMap,
       isDisabled,
       selectedMappingOption,
+      target,
       handleChangeTarget,
       isVirtual,
     ]);

frontend/src/metabase/dashboard/components/DashCard/DashCardParameterMapper/DashCardCardParameterMapper.styled.tsx

@@ -2,7 +2,7 @@ import styled from "@emotion/styled";
 import { css } from "@emotion/react";
 
 import { space } from "metabase/styled-components/theme";
-import { color, lighten } from "metabase/lib/colors";
+import { alpha, color } from "metabase/lib/colors";
 import { Icon } from "metabase/core/components/Icon";
 import Button from "metabase/core/components/Button";
 import ExternalLink from "metabase/core/components/ExternalLink";
@@ -107,6 +107,14 @@ export const TargetButton = styled.div<{ variant: string }>`
       background-color: ${color("bg-light")};
       color: ${color("text-medium")};
     `}
+
+  ${({ variant }) =>
+    variant === "invalid" &&
+    css`
+      border-color: ${color("error")};
+      background-color: ${color("error")};
+      color: ${color("white")};
+    `}
 `;
 
 TargetButton.defaultProps = {
@@ -128,7 +136,7 @@ export const CloseIconButton = styled(Button)<{ icon: string; size: number }>`
 
   &:hover {
     color: ${color("white")};
-    background-color: ${lighten("brand", 0.2)};
+    background-color: ${alpha("white", 0.2)};
   }
 `;
 

frontend/src/metabase/dashboard/components/DashCard/DashCardParameterMapper/DashCardCardParameterMapper.unit.spec.jsx

@@ -107,6 +107,27 @@ describe("DashCardParameterMapper", () => {
     expect(screen.getByText(/Variable to map to/i)).toBeInTheDocument();
   });
 
+  it("should render an error state when a field is not present in the list of options", () => {
+    const card = createMockCard({
+      dataset_query: createMockStructuredDatasetQuery({
+        query: {
+          "source-table": 1,
+        },
+      }),
+      display: "scalar",
+    });
+    setup({
+      card,
+      dashcard: createMockDashboardOrderedCard({
+        card,
+      }),
+      mappingOptions: [["dimension", ["field", 1]]],
+      target: ["dimension", ["field", 2]],
+      isMobile: true,
+    });
+    expect(screen.getByText(/unknown field/i)).toBeInTheDocument();
+  });
+
   it("should show header content when card is more than 2 units high", () => {
     const numberCard = createMockCard({
       dataset_query: createMockStructuredDatasetQuery({}),