Remove icons from download menu (#30913)

* remove unused const and import

* update download button helper

---------

Co-authored-by: Ryan Laurie <iethree@gmail.com>

e2e/support/helpers/e2e-downloads-helpers.js

 import { getDashboardCardMenu } from "./e2e-dashboard-helpers";
+import { popover } from "./e2e-ui-elements-helpers";
 
 const xlsx = require("xlsx");
 
@@ -25,7 +26,6 @@ export function downloadAndAssert(
   } = {},
   callback,
 ) {
-  const downloadClassName = `.Icon-${fileType}`;
   const endpoint = getEndpoint(
     fileType,
     questionId,
@@ -67,7 +67,7 @@ export function downloadAndAssert(
     cy.findByTestId("download-button").click();
   }
   // Initiate the file download
-  cy.get(downloadClassName).click();
+  popover().findByText(`.${fileType}`).click();
 
   cy.wait("@fileDownload")
     .its("request")

frontend/src/metabase/icon_paths.ts

@@ -146,9 +146,6 @@ export const ICON_PATHS: Record<string, any> = {
   },
   curved:
     "M3.314 25.007c-.398.852-1.427 1.228-2.298.84a1.68 1.68 0 0 1-.86-2.247c3.754-8.047 7.654-12.229 12.06-12.229 2.93 0 4.406 1.185 6.481 4.098l.098.137c1.413 1.984 2.054 2.507 3.318 2.507 2.293 0 4.562-2.814 6.495-8.918.283-.895 1.254-1.396 2.17-1.119.915.277 1.427 1.227 1.144 2.122-2.337 7.38-5.503 11.307-9.809 11.307-2.765 0-4.15-1.132-6.166-3.961l-.097-.137c-1.479-2.075-2.187-2.644-3.635-2.644-2.58 0-5.667 3.31-8.901 10.244z",
-  csv: "M28 10.105v18.728A3.166 3.166 0 0 1 24.834 32H6.166A3.163 3.163 0 0 1 3 28.844V3.156A3.163 3.163 0 0 1 6.16 0h13.553V10.105H28zm-.215-1.684h-6.4V.311l6.4 8.11zM17 13v2h2v-2h-2zm0 4v2h2v-2h-2zm4-4v2h2v-2h-2zM7 13v2h7v-2H7zm14 4v2h2v-2h-2zM7 17v2h7v-2H7zm10 4v2h2v-2h-2zm4 0v2h2v-2h-2zM7 21v2h7v-2H7z",
-  // FIXME: update PNG icon
-  png: "M28 10.105v18.728A3.166 3.166 0 0 1 24.834 32H6.166A3.163 3.163 0 0 1 3 28.844V3.156A3.163 3.163 0 0 1 6.16 0h13.553V10.105H28zm-.215-1.684h-6.4V.311l6.4 8.11zM17 13v2h2v-2h-2zm0 4v2h2v-2h-2zm4-4v2h2v-2h-2zM7 13v2h7v-2H7zm14 4v2h2v-2h-2zM7 17v2h7v-2H7zm10 4v2h2v-2h-2zm4 0v2h2v-2h-2zM7 21v2h7v-2H7z",
   database:
     "M0 9.32V4.054S1.584 0 15.657 0C29.731 0 31.89 3.669 31.89 4.054v5.24s-1.445 4.125-15.424 4.125S0 10.138 0 9.32zm.305 12.93s2.044 3.692 15.727 3.692 15.63-3.72 15.63-3.72.338.099.338.632v5S30.463 32 15.964 32C1.465 32 .041 27.817.041 27.817V22.9c0-.582.264-.65.264-.65zm0-9.368s2.044 3.692 15.727 3.692 15.63-3.72 15.63-3.72.338.099.338.632v5.001s-1.537 4.145-16.036 4.145C1.465 22.632.041 18.45.041 18.45v-4.918c0-.583.264-.65.264-.65z",
   dash: "M0 13h32v6.61H0z",
@@ -271,7 +268,6 @@ export const ICON_PATHS: Record<string, any> = {
     "M14.923 7.148c-.427.315-.826.66-1.195 1.03a8.865 8.865 0 0 0-3.546-.734C5.35 7.444 1.444 11.28 1.444 16c0 4.72 3.906 8.556 8.738 8.556 1.547 0 2.999-.393 4.258-1.083.26.217.533.423.816.616l.454.31A10.268 10.268 0 0 1 10.182 26C4.559 26 0 21.523 0 16S4.559 6 10.182 6c1.712 0 3.325.415 4.74 1.148zm1.879 0c.434.315.84.66 1.217 1.03a9.172 9.172 0 0 1 3.611-.734c4.921 0 8.9 3.836 8.9 8.556 0 4.72-3.979 8.556-8.9 8.556a9.137 9.137 0 0 1-4.337-1.083c-.265.217-.543.423-.83.616L16 24.4A10.6 10.6 0 0 0 21.63 26C27.357 26 32 21.523 32 16S27.357 6 21.63 6c-1.743 0-3.386.415-4.828 1.148zM16 8c2.418 1.651 4 4.395 4 7.5 0 3.105-1.582 5.849-4 7.5-2.418-1.651-4-4.395-4-7.5 0-3.105 1.582-5.849 4-7.5z",
   join_left_outer:
     "M17.077 7.148A10.285 10.285 0 0 1 21.818 6C27.441 6 32 10.477 32 16s-4.559 10-10.182 10c-2.038 0-3.936-.588-5.528-1.6l.454-.31c.283-.194.555-.4.816-.617a8.842 8.842 0 0 0 4.258 1.083c4.832 0 8.738-3.836 8.738-8.556 0-4.72-3.906-8.556-8.738-8.556a8.865 8.865 0 0 0-3.546.733 10.65 10.65 0 0 0-1.195-1.03zM15.71 24.399A10.268 10.268 0 0 1 10.182 26C4.559 26 0 21.523 0 16S4.559 6 10.182 6c1.712 0 3.325.415 4.74 1.148-2.643 1.957-4.241 5.022-4.241 8.352 0 3.468 1.733 6.649 4.575 8.59l.454.31zM16 8c2.418 1.651 4 4.395 4 7.5 0 3.105-1.582 5.849-4 7.5-2.418-1.651-4-4.395-4-7.5 0-3.105 1.582-5.849 4-7.5z",
-  json: "M28 10.105v18.728A3.166 3.166 0 0 1 24.834 32H6.166A3.163 3.163 0 0 1 3 28.844V3.156A3.163 3.163 0 0 1 6.16 0h13.553V10.105H28zm-.215-1.684h-6.4V.311l6.4 8.11zM10.894 19.233v-.218c1.162-.13 1.79-.718 1.79-1.703v-1.394c0-.964.322-1.333 1.19-1.333h.3v-1.45h-.505c-2.03 0-2.885.766-2.885 2.55v1.094c0 1.005-.451 1.388-1.613 1.395v1.9c1.169.007 1.613.39 1.613 1.395v1.066c0 1.805.862 2.584 2.885 2.584h.506v-1.45h-.301c-.861 0-1.19-.361-1.19-1.332v-1.401c0-.992-.628-1.573-1.79-1.703zm8.184-.212v.22c-1.162.122-1.791.71-1.791 1.701v1.395c0 .964-.321 1.333-1.19 1.333h-.3v1.45h.505c2.03 0 2.892-.766 2.892-2.55v-1.094c0-1.012.444-1.388 1.607-1.395v-1.9c-1.17-.014-1.607-.39-1.607-1.395v-1.073c0-1.798-.861-2.577-2.892-2.577h-.505v1.449h.3c.862 0 1.19.362 1.19 1.326v1.408c0 .985.629 1.573 1.79 1.702z",
   key: {
     path: "M11.5035746,7.9975248 C10.8617389,5.26208051 13.0105798,1.44695394 16.9897081,1.44695394 C20.919315,1.44695394 23.1811258,5.37076315 22.2565255,8.42469226 C21.3223229,7.86427598 20.2283376,7.54198814 19.0589133,7.54198814 C17.3567818,7.54198814 15.8144729,8.22477622 14.6920713,9.33083544 C14.4930673,9.31165867 14.2913185,9.30184676 14.087273,9.30184676 C10.654935,9.30184676 7.87247532,12.0782325 7.87247532,15.5030779 C7.87247532,17.1058665 8.48187104,18.5666337 9.48208198,19.6672763 L8.98356958,20.658345 L9.19925633,22.7713505 L7.5350473,23.4587525 C7.37507672,23.5248284 7.30219953,23.707739 7.37031308,23.8681037 L7.95501877,25.2447188 L6.28291833,25.7863476 C6.10329817,25.8445303 6.01548404,26.0233452 6.06755757,26.1919683 L6.54426059,27.7356153 L5.02460911,28.2609385 C4.86686602,28.3154681 4.7743984,28.501653 4.83652351,28.6704172 L6.04508836,31.95351 C6.10987939,32.1295162 6.29662279,32.2151174 6.46814592,32.160881 L9.48965349,31.2054672 C9.66187554,31.1510098 9.86840241,30.9790422 9.95250524,30.8208731 L14.8228902,21.6613229 C15.8820565,21.5366928 16.8596786,21.1462953 17.6869404,20.558796 C17.5652123,20.567429 17.4424042,20.5718139 17.318643,20.5718139 C14.2753735,20.5718139 11.8083161,17.9204625 11.8083161,14.6498548 C11.8083161,12.518229 12.8562751,10.6496514 14.428709,9.60671162 C13.4433608,10.7041074 12.8441157,12.1538355 12.8441157,13.7432193 C12.8441157,16.9974306 15.3562245,19.6661883 18.5509945,19.9240384 L19.1273026,21.5699573 L20.7971002,22.8826221 L20.1355191,24.5572635 C20.0719252,24.7182369 20.1528753,24.8977207 20.3155476,24.9601226 L21.7119724,25.4957977 L20.9400489,27.0748531 C20.8571275,27.2444782 20.9247553,27.4318616 21.082226,27.5115385 L22.5237784,28.2409344 L21.8460256,29.6990003 C21.7756734,29.8503507 21.8453702,30.0462011 22.0099247,30.1187455 L25.2111237,31.5300046 C25.3827397,31.6056621 25.5740388,31.5307937 25.6541745,31.3697345 L27.0658228,28.5325576 C27.1462849,28.3708422 27.1660474,28.1028205 27.1106928,27.9324485 L23.8023823,17.7500271 C24.7201964,16.6692906 25.273711,15.270754 25.273711,13.7432193 C25.273711,12.0364592 24.582689,10.4907436 23.4645818,9.36943333 C25.0880384,5.38579616 22.187534,0 16.9897081,0 C12.1196563,0 9.42801686,4.46934651 10.0266074,7.9975248 L11.5035746,7.9975248 Z M19.0589133,14.7767578 C20.203026,14.7767578 21.1305126,13.8512959 21.1305126,12.7096808 C21.1305126,11.5680656 20.203026,10.6426037 19.0589133,10.6426037 C17.9148007,10.6426037 16.9873141,11.5680656 16.9873141,12.7096808 C16.9873141,13.8512959 17.9148007,14.7767578 19.0589133,14.7767578 Z",
     attrs: {
@@ -530,7 +526,6 @@ export const ICON_PATHS: Record<string, any> = {
   },
   zoom_in:
     "M12.416 12.454V8.37h3.256v4.083h4.07v3.266h-4.07v4.083h-3.256V15.72h-4.07v-3.266h4.07zm10.389 13.28c-5.582 4.178-13.543 3.718-18.632-1.37-5.58-5.581-5.595-14.615-.031-20.179 5.563-5.563 14.597-5.55 20.178.031 5.068 5.068 5.545 12.985 1.422 18.563l5.661 5.661a2.08 2.08 0 0 1 .003 2.949 2.085 2.085 0 0 1-2.95-.003l-5.651-5.652zm-1.486-4.371c3.895-3.895 3.885-10.218-.021-14.125-3.906-3.906-10.23-3.916-14.125-.021-3.894 3.894-3.885 10.218.022 14.124 3.906 3.907 10.23 3.916 14.124.022z",
-  xlsx: "M28 10.105v18.728A3.166 3.166 0 0 1 24.834 32H6.166A3.163 3.163 0 0 1 3 28.844V3.156A3.163 3.163 0 0 1 6.16 0h13.553V10.105H28zm-.215-1.684h-6.4V.311l6.4 8.11zM9.446 25h2.427l2.796-3.37h.055L16.207 25h2.256l-2.18-4.888 4.32-4.976h-2.468l-2.769 3.343h-.054l-1.477-3.343h-2.256l2.18 4.874L9.447 25z",
   zoom_out:
     "M22.8048272,25.7342559 C17.2227958,29.9120922 9.26170192,29.4524812 4.17264358,24.3634229 C-1.40785877,18.7829205 -1.42162182,9.74890155 4.14190296,4.18537677 C9.70542774,-1.37814801 18.7394467,-1.36438497 24.319949,4.21611739 C29.3880584,9.28422669 29.8647559,17.2007749 25.7421403,22.7792454 L31.4029793,28.4400843 C32.2180024,29.2551074 32.2248604,30.569663 31.4056282,31.3888951 C30.5920681,32.2024552 29.2715215,32.2009502 28.4568175,31.3862462 L22.8048272,25.7342559 Z M21.3193717,21.3628455 C25.213839,17.4683781 25.2042049,11.1445649 21.2978532,7.23821321 C17.3915016,3.33186156 11.0676883,3.32222743 7.17322097,7.21669477 C3.27875362,11.1111621 3.28838776,17.4349754 7.1947394,21.341327 C11.1010911,25.2476787 17.4249043,25.2573128 21.3193717,21.3628455 Z M8.34528717,12.453545 L19.7423242,12.453545 L19.7423242,15.7197782 L8.34528717,15.7197782 L8.34528717,12.453545 Z",
 };

frontend/src/metabase/query_builder/components/QueryDownloadPopover/QueryDownloadPopover.styled.tsx

 import styled from "@emotion/styled";
 import { color } from "metabase/lib/colors";
-import Icon from "metabase/components/Icon";
-
-const FORMAT_COLORS: Record<string, string> = {
-  csv: color("filter"),
-  xlsx: color("summarize"),
-  json: color("bg-dark"),
-  png: color("accent0"),
-};
 
 export interface DownloadPopoverRootProps {
   isExpanded?: boolean;
@@ -41,20 +33,6 @@ export const DownloadButtonRoot = styled.button`
   }
 `;
 
-interface DownloadButtonIconProps {
-  format: string;
-}
-
-export const DownloadButtonIcon = styled(Icon)<DownloadButtonIconProps>`
-  width: 2rem;
-  height: 2rem;
-  color: ${props => FORMAT_COLORS[props.format] ?? color("brand")};
-
-  ${DownloadButtonRoot}:hover & {
-    color: ${color("white")};
-  }
-`;
-
 export const DownloadButtonText = styled.div`
   color: ${color("text-dark")};
   font-weight: bold;

frontend/src/metabase/query_builder/components/QueryDownloadPopover/QueryDownloadPopover.tsx

@@ -8,7 +8,6 @@ import { Dataset } from "metabase-types/api";
 import { State } from "metabase-types/store";
 import Question from "metabase-lib/Question";
 import {
-  DownloadButtonIcon,
   DownloadButtonRoot,
   DownloadButtonText,
   DownloadPopoverHeader,
@@ -82,7 +81,6 @@ const DownloadButton = ({ format, onDownload }: DownloadButtonProps) => {
 
   return (
     <DownloadButtonRoot onClick={handleClick}>
-      <DownloadButtonIcon name={format} format={format} />
       <DownloadButtonText>.{format}</DownloadButtonText>
     </DownloadButtonRoot>
   );