Add the `s-modal` component for admin UI extensions

Extensions
1

Hey team,

The way admin UI extensions and the existing modal API work is a little bit clunky.

Within the current design, you will need to fetch data twice to make the modal API work. First, you’ll need to render an index view (see attached screenshot) and if you want to dip into the details, you will need to render a “show” modal next.

It works, but it requires two network calls while a single one would be sufficient in most cases. I would love to see the s-modal component, that’s already working really well in other areas, to be available for admin ui extensions too.

That way, we can fetch once, and just render the details of the modal in the index view. I hope I’ve explained myself properly. Just to paint the picture, this is what it might look like:

    <s-box borderWidth="base" borderRadius="base" overflow="hidden">
      {productionOrders.map((productionOrder) => (
        <s-modal id={`modal-${productionOrder.id}`} heading="Details">
          <s-paragraph>Displaying more details here.</s-paragraph>

          <s-button slot="secondary-actions" commandFor="modal" command="--hide">
            Close
          </s-button>
          <s-button
            slot="primary-action"
            variant="primary"
            commandFor="modal"
            command="--hide"
          >
            Save
          </s-button>
        </s-modal>
      ))}

      <s-table paginate={productionOrders.length > 5}>
        <s-table-header-row>
          <s-table-header listSlot="primary">
            {i18n.translate("components.salesOrder.table.item")}
          </s-table-header>
          <s-table-header listSlot="secondary">
            {i18n.translate("components.salesOrder.table.productionOrder")}
          </s-table-header>
          <s-table-header listSlot="kicker">
            {i18n.translate("components.salesOrder.table.status")}
          </s-table-header>
          <s-table-header listSlot="labeled">
            {i18n.translate("components.salesOrder.table.supplier")}
          </s-table-header>
          <s-table-header listSlot="labeled">
            {i18n.translate("components.salesOrder.table.dates")}
          </s-table-header>
        </s-table-header-row>
        <s-table-body>
          {productionOrders.map((productionOrder) => (
            <ProductionOrder key={productionOrder.id} data={productionOrder} />
          ))}
        </s-table-body>
      </s-table>
    </s-box>
1 Like