Merge pull request #4083 from Spinnich/fix/v2-hash-copy-and-firmware-hashes

fix(v2): make hashes recoverable without HTTPS and show all firmware hashes

Author: gantoine

frontend/src/v2/components/Gallery/FirmwareTab.test.ts

@@ -0,0 +1,110 @@
+import { shallowMount } from "@vue/test-utils";
+import { describe, expect, it, vi } from "vitest";
+import type { FirmwareSchema } from "@/__generated__";
+import type { Platform } from "@/stores/platforms";
+import HashChip from "@/v2/components/shared/HashChip.vue";
+import FirmwareTab from "./FirmwareTab.vue";
+
+vi.mock("vue-i18n", () => ({
+  useI18n: () => ({ t: (key: string, fallback?: string) => fallback ?? key }),
+}));
+
+vi.mock("@/services/api/firmware", () => ({
+  default: {
+    getFirmware: vi.fn(),
+    uploadFirmware: vi.fn(),
+    deleteFirmware: vi.fn(),
+  },
+}));
+
+vi.mock("@/stores/platforms", () => ({
+  default: () => ({ update: vi.fn() }),
+}));
+
+vi.mock("@/v2/stores/galleryRoms", () => ({
+  default: () => ({ currentPlatform: null, setCurrentPlatform: vi.fn() }),
+}));
+
+vi.mock("@/v2/composables/useCan", () => ({
+  useCan: () => ({ value: true }),
+}));
+
+vi.mock("@/v2/composables/useSnackbar", () => ({
+  useSnackbar: () => ({ error: vi.fn(), success: vi.fn(), warning: vi.fn() }),
+}));
+
+const CRC = "aabbccdd";
+const MD5 = "0123456789abcdef0123456789abcdef";
+const SHA1 = "0123456789abcdef0123456789abcdef01234567";
+
+function firmware(overrides: Partial<FirmwareSchema> = {}): FirmwareSchema {
+  return {
+    id: 1,
+    file_name: "disksys.rom",
+    file_name_no_tags: "disksys",
+    file_name_no_ext: "disksys",
+    file_extension: "rom",
+    file_path: "fds",
+    file_size_bytes: 8192,
+    full_path: "fds/disksys.rom",
+    is_verified: true,
+    crc_hash: CRC,
+    md5_hash: MD5,
+    sha1_hash: SHA1,
+    missing_from_fs: false,
+    platform_id: 1,
+    created_at: "",
+    updated_at: "",
+    ...overrides,
+  } as FirmwareSchema;
+}
+
+function platform(firmwareList: FirmwareSchema[]): Platform {
+  return {
+    id: 1,
+    slug: "fds",
+    fs_slug: "fds",
+    name: "Family Computer Disk System",
+    display_name: "Family Computer Disk System",
+    rom_count: 0,
+    firmware_count: firmwareList.length,
+    firmware: firmwareList,
+  } as Platform;
+}
+
+function mountTab(firmwareList: FirmwareSchema[]) {
+  return shallowMount(FirmwareTab, {
+    props: { platform: platform(firmwareList) },
+    global: {
+      // The whole tab is wrapped in a dropzone whose default slot holds
+      // the list, and a stubbed component does not render its slots.
+      stubs: { RDropzone: { template: "<div><slot /></div>" } },
+    },
+  });
+}
+
+function chipEntries(wrapper: ReturnType<typeof mountTab>) {
+  return wrapper
+    .findAllComponents(HashChip)
+    .map((c) => [c.props("label"), c.props("value")]);
+}
+
+describe("FirmwareTab", () => {
+  // #4082: the MD5 used to render as a plain chip with no copy affordance
+  // and `user-select: none`, and CRC / SHA-1 were never shown at all.
+  it("renders a copyable chip for every stored hash", () => {
+    const wrapper = mountTab([firmware()]);
+
+    expect(chipEntries(wrapper)).toEqual([
+      ["SHA-1", SHA1],
+      ["MD5", MD5],
+      ["CRC", CRC],
+    ]);
+  });
+
+  it("skips hashes the firmware record does not carry", () => {
+    const wrapper = mountTab([firmware({ crc_hash: "", sha1_hash: "" })]);
+
+    expect(chipEntries(wrapper)).toEqual([["MD5", MD5]]);
+  });
+});

frontend/src/v2/components/Gallery/FirmwareTab.vue

@@ -32,6 +32,7 @@ import type { Platform } from "@/stores/platforms";
 import storePlatforms from "@/stores/platforms";
 import { formatBytes } from "@/utils";
 import DeleteFirmwareDialog from "@/v2/components/Gallery/DeleteFirmwareDialog.vue";
+import HashChip from "@/v2/components/shared/HashChip.vue";
 import { useCan } from "@/v2/composables/useCan";
 import { useSnackbar } from "@/v2/composables/useSnackbar";
 import storeGalleryRoms from "@/v2/stores/galleryRoms";
@@ -385,15 +386,24 @@ async function performDelete(
               <RChip size="x-small" variant="translucent">
                 {{ formatBytes(f.file_size_bytes) }}
               </RChip>
-              <RChip
-                size="x-small"
-                variant="translucent"
-                color="info"
-                class="r-v2-fw__row-hash"
-                :title="`MD5: ${f.md5_hash}`"
-              >
-                {{ f.md5_hash }}
-              </RChip>
+              <HashChip
+                v-if="f.sha1_hash"
+                label="SHA-1"
+                :value="f.sha1_hash"
+                compact
+              />
+              <HashChip
+                v-if="f.md5_hash"
+                label="MD5"
+                :value="f.md5_hash"
+                compact
+              />
+              <HashChip
+                v-if="f.crc_hash"
+                label="CRC"
+                :value="f.crc_hash"
+                compact
+              />
               <RChip
                 v-if="f.is_verified"
                 size="x-small"
@@ -615,14 +625,6 @@ async function performDelete(
   flex-wrap: wrap;
   gap: 4px;
 }
-.r-v2-fw__row-hash {
-  max-width: 220px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-family: var(--r-font-family-mono, monospace);
-}
-
 .r-v2-fw__row-actions {
   display: inline-flex;
   align-items: center;

frontend/src/v2/components/GameDetails/MetadataTab.test.ts

@@ -0,0 +1,53 @@
+import { shallowMount } from "@vue/test-utils";
+import { describe, expect, it, vi } from "vitest";
+import type { DetailedRom } from "@/stores/roms";
+import MetadataTab from "./MetadataTab.vue";
+
+vi.mock("vue-i18n", () => ({
+  useI18n: () => ({ t: (key: string) => key }),
+}));
+
+const CRC = "aabbccdd";
+const MD5 = "0123456789abcdef0123456789abcdef";
+const SHA1 = "0123456789abcdef0123456789abcdef01234567";
+const CHD_SHA1 = "89abcdef0123456789abcdef0123456789abcdef";
+const RA = "fedcba9876543210fedcba9876543210";
+
+function rom(overrides: Partial<DetailedRom> = {}): DetailedRom {
+  return {
+    id: 1,
+    fs_name: "game.chd",
+    fs_size_bytes: 1024,
+    crc_hash: CRC,
+    md5_hash: MD5,
+    sha1_hash: SHA1,
+    ra_hash: RA,
+    has_simple_single_file: true,
+    files: [{ chd_sha1_hash: "" }],
+    ...overrides,
+  } as DetailedRom;
+}
+
+function hashLabels(r: DetailedRom) {
+  const wrapper = shallowMount(MetadataTab, { props: { rom: r } });
+  return wrapper
+    .findAllComponents({ name: "HashChip" })
+    .map((c) => c.props("label"));
+}
+
+describe("MetadataTab hash rows", () => {
+  // The files list and the firmware list both read SHA-1, CHD SHA-1, MD5,
+  // CRC, RA. This tab used to lead with CRC, so the two tabs disagreed.
+  it("orders hashes the same way every other surface does", () => {
+    expect(hashLabels(rom())).toEqual(["SHA-1", "MD5", "CRC", "RA"]);
+  });
+
+  // Not reachable in the browser: the mock library holds no CHD.
+  it("slots CHD SHA-1 directly after SHA-1 when the ROM is a CHD", () => {
+    const chd = rom({
+      files: [{ chd_sha1_hash: CHD_SHA1 }],
+    } as Partial<DetailedRom>);
+
+    expect(hashLabels(chd)).toEqual(["SHA-1", "CHD SHA-1", "MD5", "CRC", "RA"]);
+  });
+});

frontend/src/v2/components/GameDetails/MetadataTab.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 // MetadataTab — four sections, top to bottom:
 //   1. File info — name + size only.
-//   2. Hashes — CRC, MD5, SHA1, all mono. RTag with eyebrow label.
+//   2. Hashes — SHA-1, MD5, CRC, RA, all mono. RTag with eyebrow label.
+//      Same order as the files list so the two tabs read alike.
 //   3. Verification — RTag per database; tone="success" for match,
 //      neutral for miss. Same source of truth (Hasheous match flags) as
 //      the "Verified" badge in the header, via `VERIFICATION_DATABASES`.
@@ -47,12 +48,12 @@ const hashRows = computed<{ label: string; value: string | null }[]>(() => {
     ? (r.files[0]?.chd_sha1_hash ?? null)
     : null;
   const rows: { label: string; value: string | null }[] = [
-    { label: "CRC", value: r.crc_hash },
+    { label: "SHA-1", value: r.sha1_hash },
     { label: "MD5", value: r.md5_hash },
-    { label: "SHA1", value: r.sha1_hash },
+    { label: "CRC", value: r.crc_hash },
     { label: "RA", value: r.ra_hash },
   ];
-  if (chdSha1) rows.splice(3, 0, { label: "CHD SHA-1", value: chdSha1 });
+  if (chdSha1) rows.splice(1, 0, { label: "CHD SHA-1", value: chdSha1 });
   return rows;
 });
 

frontend/src/v2/components/shared/HashChip.test.ts

@@ -0,0 +1,138 @@
+import { flushPromises, mount } from "@vue/test-utils";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import HashChip from "./HashChip.vue";
+
+const { copy, clipboard } = vi.hoisted(() => ({
+  copy: vi.fn(),
+  clipboard: { isSupported: true },
+}));
+
+vi.mock("vue-i18n", () => ({
+  useI18n: () => ({
+    t: (key: string, params?: Record<string, unknown>) =>
+      params ? `${key}:${JSON.stringify(params)}` : key,
+  }),
+}));
+
+vi.mock("@/v2/composables/useClipboard", () => ({
+  useClipboard: () => ({ isSupported: clipboard.isSupported, copy }),
+}));
+
+const SHA1 = "0123456789abcdef0123456789abcdef01234567";
+const ABBREVIATED = "012345…234567";
+
+function mountChip(
+  props: Partial<{ label: string; value: string | null }> = {},
+) {
+  return mount(HashChip, { props: { label: "SHA-1", value: SHA1, ...props } });
+}
+
+async function click(wrapper: ReturnType<typeof mountChip>) {
+  await wrapper.find("button").trigger("click");
+  await flushPromises();
+}
+
+beforeEach(() => {
+  copy.mockReset();
+  copy.mockResolvedValue(true);
+  clipboard.isSupported = true;
+  document.body.innerHTML = "";
+});
+
+describe("HashChip", () => {
+  it("abbreviates a long value", () => {
+    const wrapper = mountChip();
+
+    expect(wrapper.text()).toContain(ABBREVIATED);
+    expect(wrapper.text()).not.toContain(SHA1);
+  });
+
+  it("leaves a short value intact", () => {
+    const wrapper = mountChip({ label: "CRC", value: "aabbccdd" });
+
+    expect(wrapper.text()).toContain("aabbccdd");
+  });
+
+  it("keeps the full value in the title so hover still reads it", () => {
+    const wrapper = mountChip();
+
+    expect(wrapper.find("button").attributes("title")).toContain(SHA1);
+  });
+
+  it("copies the full value, not the abbreviation", async () => {
+    const wrapper = mountChip();
+
+    await click(wrapper);
+
+    expect(copy).toHaveBeenCalledWith(SHA1, expect.anything());
+  });
+
+  it("stays abbreviated when the copy succeeds", async () => {
+    const wrapper = mountChip();
+
+    await click(wrapper);
+
+    expect(wrapper.text()).toContain(ABBREVIATED);
+    expect(wrapper.text()).not.toContain(SHA1);
+  });
+
+  // The core of #4082: over plain HTTP the clipboard API does not exist,
+  // so a copy can never succeed. Revealing the value is the only way the
+  // user can get at it.
+  it("reveals the full value instead of copying when the clipboard is unavailable", async () => {
+    clipboard.isSupported = false;
+    const wrapper = mountChip();
+
+    await click(wrapper);
+
+    expect(copy).not.toHaveBeenCalled();
+    expect(wrapper.text()).toContain(SHA1);
+  });
+
+  it("marks a revealed chip so its value can be selected", async () => {
+    clipboard.isSupported = false;
+    const wrapper = mountChip();
+
+    await click(wrapper);
+
+    expect(wrapper.find("button").classes()).toContain(
+      "r-v2-hash-chip--revealed",
+    );
+  });
+
+  it("collapses the value again on a second click", async () => {
+    clipboard.isSupported = false;
+    const wrapper = mountChip();
+
+    await click(wrapper);
+    await click(wrapper);
+
+    expect(wrapper.text()).toContain(ABBREVIATED);
+    expect(wrapper.text()).not.toContain(SHA1);
+  });
+
+  it("still collapses when the page selection is outside the chip", async () => {
+    clipboard.isSupported = false;
+    const wrapper = mountChip();
+    const outside = document.createElement("p");
+    outside.textContent = "selected elsewhere";
+    document.body.appendChild(outside);
+
+    await click(wrapper);
+    window.getSelection()?.selectAllChildren(outside);
+    await click(wrapper);
+
+    expect(wrapper.text()).toContain(ABBREVIATED);
+    expect(wrapper.text()).not.toContain(SHA1);
+  });
+
+  it("reveals the full value when an attempted copy fails", async () => {
+    copy.mockResolvedValue(false);
+    const wrapper = mountChip();
+
+    await click(wrapper);
+
+    expect(copy).toHaveBeenCalled();
+    expect(wrapper.text()).toContain(SHA1);
+  });
+});