Pre release fixes (#6821)

* Drop changeset skill

* Drop the last-row border on in-card assignable lists

Pagination already draws the footer separator; the extra line was the last table row stacking a second border on top of it.

* Restore dashed empty placeholders on product availability

* Keep Home tab apps mounted so switching Pulse and Onboarding does not reboot them

* Open invite staff in place instead of navigating to the staff list

* Keep Home iframes mounted when /home redirects to the leftmost tab

Sidebar Home always goes to /home; returning Redirect alone unmounted keep-alive panels and rebooted Pulse and Onboarding.

Author: mirekm

.changeset/home-tab-keep-alive.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Switching Home tabs (Pulse, Onboarding, Widgets) no longer reloads the embedded app. The last tab you opened stays ready in the background.

.claude/skills/saleor-dashboard-changesets/SKILL.md

@@ -266,17 +266,17 @@ Path: `src/components/AssignableListTable/`. Canonical references: collection pr
 </AssignableListCard>
 ```
 
-| Piece           | Contract (owned by the primitive)                                                                                            |
-| --------------- | ---------------------------------------------------------------------------------------------------------------------------- |
-| Card header     | `DetailSettingsCard` tinted band; title `size={5}` bold; `headerEnd` coerced to `small`; with-action right inset `spacing-4` |
-| Search band     | Y `spacing-3`, X `spacing-6`, bottom border                                                                                  |
-| Table heading   | 40px; `Text size={2}`; selected count + bulk action **in the heading**, not the card header                                  |
-| Drag column     | 40px, grip centered, first-cell padding 0                                                                                    |
-| Checkbox column | 20px control + leading inset (`card` = 6, `nested` = 4)                                                                      |
-| Body rows       | `compact` (text) or `media` (50px thumbnails); cell padding `spacing-2`                                                      |
-| Row delete      | Hover or delete-control `:focus-within` (not the row — checkbox focus would pin the icon); always visible on `hover: none`   |
-| Pagination      | Top border; Y `spacing-2`; small select + chevrons; `inset` aligns to first content column                                   |
-| Empty           | `padding={4}` + `Placeholder`                                                                                                |
+| Piece           | Contract (owned by the primitive)                                                                                                                                     |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Card header     | `DetailSettingsCard` tinted band; title `size={5}` bold; `headerEnd` coerced to `small`; with-action right inset `spacing-4`                                          |
+| Search band     | Y `spacing-3`, X `spacing-6`, bottom border                                                                                                                           |
+| Table heading   | 40px; `Text size={2}`; selected count + bulk action **in the heading**, not the card header                                                                           |
+| Drag column     | 40px, grip centered, first-cell padding 0                                                                                                                             |
+| Checkbox column | 20px control + leading inset (`card` = 6, `nested` = 4)                                                                                                               |
+| Body rows       | `compact` (text) or `media` (50px thumbnails); cell padding `spacing-2`                                                                                               |
+| Row delete      | Hover or delete-control `:focus-within` (not the row — checkbox focus would pin the icon); always visible on `hover: none`                                            |
+| Pagination      | Top border (the only separator above the footer); last table row has no bottom border; Y `spacing-2`; small select + chevrons; `inset` aligns to first content column |
+| Empty           | `padding={4}` + `Placeholder`                                                                                                                                         |
 
 Tokens live in `assignableListTableLayout.ts`. MUI tables that still need dnd-kit (`SortableTable`) use `tableStyles.assignableTable` so heading height and density match GridTable.
 

.claude/skills/saleor-dashboard-entity-detail/SKILL.md

@@ -354,7 +354,7 @@ Flush lists inside `DetailSettingsCard` (products in a collection, attribute val
 | Heading row     | 40px, `Text size={2}`                                                                                            |
 | Rows            | `density="compact"` (text) or `"media"` (50px thumbnails)                                                        |
 | Hover           | Row delete opacity 0 → 1 on hover or delete-control focus (not row `:focus-within`)                              |
-| Pagination      | Component draws the top border. `inset="card" \| "nested" \| "drag"`                                             |
+| Pagination      | Component draws the top border. Last table row has no bottom border. `inset="card" \| "nested" \| "drag"`        |
 
 Layout numbers: `src/components/AssignableListTable/assignableListTableLayout.ts`. Full composition and anti-patterns: [`saleor-dashboard-entity-detail`](./saleor-dashboard-entity-detail/SKILL.md) → In-card assignable lists.
 

.claude/skills/saleor-dashboard-styles/SKILL.md

@@ -30,3 +30,8 @@
 .headerRow + tr > td {
   border-top-width: 0 !important;
 }
+
+/* Pagination (or the card edge) owns the separator — last row must not add a second line. */
+.table tr:last-child > td {
+  border-bottom-width: 0 !important;
+}

src/collections/components/CollectionProducts/ProductsTable.module.css

@@ -45,6 +45,11 @@
   border-top-width: 0 !important;
 }
 
+/* Pagination (or the card edge) owns the separator — last row must not add a second line. */
+.table tr:last-child > td {
+  border-bottom-width: 0 !important;
+}
+
 .truncateCell {
   overflow: hidden;
   max-width: 0;

src/components/AssignableListTable/AssignableListTable.module.css

@@ -1,4 +1,5 @@
 import { iconSize, iconStrokeWidth } from "@dashboard/components/icons";
+import { Placeholder } from "@dashboard/components/Placeholder";
 import RequirePermissions from "@dashboard/components/RequirePermissions";
 import { Skeleton } from "@dashboard/components/Skeleton/Skeleton";
 import { type PermissionEnum } from "@dashboard/graphql";
@@ -185,9 +186,9 @@ export function ChannelAvailabilityCard<T extends ChannelAvailabilitySummary>({
 
           {filteredChannels.length === 0 ? (
             <Box className={styles.body}>
-              <Text size={2} color="default2">
+              <Placeholder>
                 {intl.formatMessage(channelAvailabilityMessages.noChannelsMatchSearch)}
-              </Text>
+              </Placeholder>
             </Box>
           ) : (
             <>

src/components/ChannelAvailability/ChannelAvailabilityCard.tsx

@@ -12,6 +12,7 @@ import { orderListUrl } from "@dashboard/orders/urls";
 import { productListUrl } from "@dashboard/products/urls";
 import { productTypeAddUrl, productTypeListUrl } from "@dashboard/productTypes/urls";
 import { shippingZoneAddUrl, shippingZonesListUrl } from "@dashboard/shipping/urls";
+import { useStaffInviteDialog } from "@dashboard/staff/components/StaffInviteProvider/StaffInviteProvider";
 import { staffListUrl } from "@dashboard/staff/urls";
 import { warehouseAddUrl, warehouseListUrl } from "@dashboard/warehouses/urls";
 import { Box, Text } from "@saleor/macaw-ui-next";
@@ -40,6 +41,26 @@ const ActionLinkItem = ({ href, children }: { href: string; children: React.Reac
   );
 };
 
+const ActionButtonItem = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <Box className="command-menu-item" cursor="pointer" role="option" tabIndex={-1}>
+      <Box
+        className="command-menu-item-content"
+        display="flex"
+        alignItems="center"
+        color="default1"
+        gap={2}
+        paddingX={6}
+        paddingY={1.5}
+      >
+        <Text size={2} fontWeight="medium" color="default1">
+          {children}
+        </Text>
+      </Box>
+    </Box>
+  );
+};
+
 interface TriggerDescriptor {
   section: MessageDescriptor;
   name: MessageDescriptor;
@@ -115,6 +136,27 @@ const allMessages = defineMessages({
   },
 });
 
+const InviteStaffNavigatorItem = ({
+  onClick,
+}: {
+  onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+}) => {
+  const { openInvite } = useStaffInviteDialog();
+
+  return (
+    <Box
+      onClick={event => {
+        onClick?.(event as React.MouseEvent<HTMLAnchorElement>);
+        openInvite();
+      }}
+    >
+      <ActionButtonItem>
+        <FormattedMessage {...allMessages.inviteUser} />
+      </ActionButtonItem>
+    </Box>
+  );
+};
+
 const allActions: TriggerDescriptor[] = [
   {
     section: {
@@ -532,13 +574,7 @@ const allActions: TriggerDescriptor[] = [
       defaultMessage: "Configuration",
     },
     name: allMessages.inviteUser,
-    Component: ({ onClick }) => (
-      <Box onClick={onClick}>
-        <ActionLinkItem href={staffListUrl({ action: "add" })}>
-          <FormattedMessage {...allMessages.inviteUser} />
-        </ActionLinkItem>
-      </Box>
-    ),
+    Component: InviteStaffNavigatorItem,
   },
   {
     section: allMessages.discountsSection,

src/components/NavigatorSearch/useActionTriggers.tsx

@@ -103,6 +103,7 @@ export const AppWidgetExtensionItem = ({
           extensionId={extension.id}
           extensionUrl={extensionUrl}
           params={params}
+          refetch={extension.refetch}
         />
       ) : (
         <AppFrame

src/extensions/components/AppWidgets/AppWidgetExtensionItem.tsx

@@ -5,9 +5,12 @@ import {
   WIDGET_DEFAULT_HEIGHT,
 } from "@dashboard/extensions/hooks/useWidgetIframeAutoHeight";
 import { type AppDetailsUrlMountQueryParams } from "@dashboard/extensions/urls";
+import { usePostToExtension } from "@dashboard/extensions/views/ViewManifestExtension/components/AppFrame/usePostToExtension";
+import { useTokenRefresh } from "@dashboard/extensions/views/ViewManifestExtension/components/AppFrame/useTokenRefresh";
+import { useUpdateAppToken } from "@dashboard/extensions/views/ViewManifestExtension/components/AppFrame/useUpdateAppToken";
 import { useNodeRef } from "@dashboard/hooks/useNodeRef";
 import { Box, Skeleton } from "@saleor/macaw-ui-next";
-import { type CSSProperties, useEffect, useRef } from "react";
+import { type CSSProperties, useEffect, useRef, useState } from "react";
 
 const hiddenStyle: CSSProperties = { visibility: "hidden" };
 
@@ -25,6 +28,11 @@ interface IframePostProps {
    */
   autoHeight?: boolean;
   loaderType?: "skeleton" | "throbber";
+  /**
+   * Refetches the extension list so a long-lived iframe can receive a fresh JWT
+   * via App Bridge `tokenRefresh` instead of being remounted.
+   */
+  refetch?: () => void;
 }
 
 /**
@@ -40,37 +48,50 @@ export const IframePost = ({
   height = WIDGET_DEFAULT_HEIGHT,
   autoHeight = false,
   loaderType = "skeleton",
+  refetch,
 }: IframePostProps) => {
   const formRef = useRef<HTMLFormElement | null>(null);
   const loadingRef = useRef<HTMLDivElement | null>(null);
   const { ref: iframeRef, node: iframeEl, setRef: setIframeRef } = useNodeRef<HTMLIFrameElement>();
   const appOrigin = new URL(extensionUrl).origin;
+  const [iframeReady, setIframeReady] = useState(false);
+  const postToExtension = usePostToExtension(iframeEl, appOrigin);
 
   useWidgetIframeAutoHeight(iframeEl, autoHeight, { appOrigin });
+  useTokenRefresh(accessToken, refetch);
+  useUpdateAppToken({
+    enabled: iframeReady,
+    appToken: accessToken,
+    postToExtension,
+  });
 
-  useEffect(() => {
-    if (formRef.current) {
-      formRef.current.submit();
-    }
+  useEffect(
+    function submitPostFormAndRevealIframe() {
+      if (formRef.current) {
+        formRef.current.submit();
+      }
 
-    const iframe = iframeRef.current;
-    const loading = loadingRef.current;
+      const iframe = iframeRef.current;
+      const loading = loadingRef.current;
 
-    if (!iframe || !loading) {
-      return;
-    }
+      if (!iframe || !loading) {
+        return;
+      }
 
-    const onload = () => {
-      loading.style.display = "none";
-      iframe.style.visibility = "visible";
-    };
+      const onload = () => {
+        loading.style.display = "none";
+        iframe.style.visibility = "visible";
+        setIframeReady(true);
+      };
 
-    iframe.addEventListener("load", onload);
+      iframe.addEventListener("load", onload);
 
-    return () => {
-      iframe.removeEventListener("load", onload);
-    };
-  }, [iframeRef]);
+      return () => {
+        iframe.removeEventListener("load", onload);
+      };
+    },
+    [iframeRef],
+  );
 
   const boxHeight = autoHeight ? undefined : height;
   const loaderHeight = autoHeight ? WIDGET_DEFAULT_HEIGHT : height;