How to connect Polaris page actions to App bridge title bar?

vitohuang
Shopify Partner
6 0 0

Hi,

I'm developing an app that use Polaris page, and there are action buttons (primary and secondary) for the page, I'm just wondering if its possible to connect Polaris' page actions buttons and App bridge title bar, so all the page's action buttons are showing as app bridge title bar button?

I want this because Polaris page actions are not fixed when scroll, but app bridge title bar is fixed, so when you scroll in the admin it still visible

Thanks

Replies 4 (4)
olavoasantos
Shopify Staff
8 2 6

Hi @vitohuang. How are you?

I'm Olavo from Shopify. Thank you for reaching out.

If I understood correctly, you wish to use the AppBridge's `TitleBar` to define the primary and secondary actions from a page instead of Polaris' Page component's actions, right?

You could achieve that by adding the `TitleBar` component as a child of `Page` and  pass primaryAction and secondaryActions props the `TitleBar`:

import React from "react";
import { Page } from "@shopify/polaris";
import { TitleBar } from "@shopify/app-bridge-react";

export const Index = () => {
  return (
    <Page>
      <TitleBar
        primaryAction={{
          content: "Primary action",
          onAction: () => console.log("Primary action was triggered"),
        }}
        secondaryActions={[
          {
            content: "Secondary action",
            onAction: () => console.log("Secondary action was triggered"),
          },
        ]}
      />
      {/* YOUR CONTENT */}
    </Page>
  );
};

export default Index;

I'd only avoid setting the actions on both `Page` and `TitleBar` at the same time to avoid duplicated buttons on the screen.

I hope this helps. Please let me know if you have any more questions.

vitohuang
Shopify Partner
6 0 0

@olavoasantosThanks for the direction

I tried to follow it but I ran into a problem

The app-bridge-react doesn't support the latest version of react - it only support up to react@"^16.0.0"

npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: admin@0.1.0
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   react@"^17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.0.0" from @shopify/app-bridge-react@2.0.4
npm ERR! node_modules/@shopify/app-bridge-react
npm ERR!   @shopify/app-bridge-react@"^2.0.4" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/vito/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:

I did --force install and everything worked after I connected Polaris and app bridge.

However I can't find the github repo for app-bridge-react, do you know when it will support the latest version of react?

olavoasantos
Shopify Staff
8 2 6

Unfortunately, `app-bridge-react` isn't open source. But I've added this to our backlog and we'll get to it as soon as we can.

vitohuang
Shopify Partner
6 0 0

@olavoasantosit will be good if it can simply bump up the version number and everything just works

Thanks for the help