Uses UI-lib breadcrumbs

[jvorcak]

Closes https://github.com/redpanda-data/console-enterprise/issues/190

I've consulted this change with @ivpanda, this is the preview:

TODO: Improve UI Lib so that it works better with long names.

[rikimaru0345]

I don't think a computed should be created within an observable component.
Are you sure it won't just always be recreated/recomputed on every render? I think it will...

Instead consider this (outside of a component):

const obj = observable({

    get breadcrumbItems() {
          // compute items here
         return items;
    }
});

const AppPageHeader = observer(() => {
       const items =  obj.breadcrumbItems;
       ...
}

[jvorcak]

I though creating an computed with get() is OK as part of the observable. I think we use the same concept just class-based elsewhere. There is also an example on Mobx site https://mobx.js.org/computeds-with-args.html#2-close-over-the-arguments

But maybe I misunderstand something. I've tried your solution and it seems the number of renders is identical. I'm happpy to chat about this on Slack.

[jvorcak]

Converted to Draft, so that it's not accidentally merged. I'll need to do improvements in the UI lib first.

[jvorcak]

Waiting for https://github.com/redpanda-data/ui/pull/528 to be merged and released.