1853037 - Consider reworking how we add Fluent strings in Storybook shopping components

Status: NEW

(Firefox :: Shopping, task, P3)

Description

[kpatenio]

At the moment, we manually add strings in .stories. for our shopping components.
Ex. https://searchfox.org/mozilla-central/rev/1cae9ca7cc7d17cfc92088dfc68e5ff391128caa/browser/components/storybook/stories/shopping-message-bar.stories.mjs#37-56

We got feedback about how we could move forward with this.
See https://phabricator.services.mozilla.com/D187949#inline-1042228 and https://phabricator.services.mozilla.com/D187949#inline-1042473 for full context.

Some possible approaches:
Importing FTL file
You can import the strings and assign them to the fluent property. Ideally this happens automatically from MozXULElement.insertFTLIfNeeded("myBundle.ftl") in the component itself but MozXULElement isn't available in the shopping sidebar (bug 1845737 on file to fix that)

// eslint-disable-next-line import/no-unresolved
import { html, ifDefined } from "lit.all.mjs";
// eslint-disable-next-line import/no-unassigned-import
import "browser/components/shopping/content/shopping-message-bar.mjs";

//  Bug 1845737: This should get imported by ShoppingMessageBar
import fluentStrings from "browser/locales/en-US/browser/shopping.ftl";

insertFTLIfNeeded
Another option rather than directly importing the .ftl file and piping it into the parameters.fluent property is to do the MozXULElement.insertFTLIfNeeded() call in the .stories.mjs file. It currently won't add support for the Fluent panel unfortunately if you plan on quickly editing the strings in Storybook but it's a smaller change

window.MozXULElement.insertFTLIfNeeded("browser/shopping.ftl");

export default {
  title: "Domain-specific UI Widgets/Shopping/Shopping Message Bar",
  // ...

Comment 1

[Jared Hirsch [:jhirsch] (he/him) (Needinfo please)]

Moving "fast follow" items to top-level in the shopping backlog. Apologies for bug spam