How to create sidebar plugin that opens a link to another page

[sarg3nt]

I'm using the sidebar demo plugin and am stuck trying to figure out how to make a link open a new tab to an absolute URL.

I started by getting the plugin to work, then making minor changes.

I've cleaned it up so I have one new sidebar menu item called "Apps" which opens a sub menu that has my new link but I can't get that menu item to open a new tab to an absolute URL.

I haven't done front end dev work in years, so I'm super rusty and know nothing about tsx files.

Here's my current plugin code. Currently I'm loading what I want in an iFrame but I'd rather just have the 'Longhorn' link open a new tab.

import {
  registerRoute,
  //registerRouteFilter,
  registerSidebarEntry,
  //registerSidebarEntryFilter,
} from '@kinvolk/headlamp-plugin/lib';
import { SectionBox } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
import Typography from '@mui/material/Typography';
import React from 'react';

// https://icon-sets.iconify.design/mdi/ for icons.

// The sidebar link URL is: /c/mycluster/apps
registerSidebarEntry({
  parent: null,
  name: 'apps',
  label: 'Applications',
  url: '/apps',
  icon: 'mdi:apps',
});

// Apps sub menus
// The sidebar link URL is: /c/mycluster/longhorn
registerSidebarEntry({
  parent: 'apps',
  name: 'longhorn',
  label: 'Longhorn',
  url: '/longhorn',
  // url: 'https:/longhorn.io', does not work.
});

// This component rendered at URL: /c/mycluster/apps
registerRoute({
  path: '/apps',
  sidebar: 'apps',
  name: 'apps',
  exact: true,
  component: () => {
    return (
      <SectionBox title="Applications" textAlign="center" paddingTop={2}>
        <Typography>See the sidebar for a list of applications.</Typography>
      </SectionBox>
    );
  },
});

//This component rendered at URL: /c/mycluster/longhorn
registerRoute({
  path: '/longhorn',
  sidebar: 'longhorn',
  name: 'longhorn',
  exact: true,
  component: () => (
    <SectionBox title="Longhorn" textAlign="center" paddingTop={2}>
      <iframe src="https://longhorn.k8s.vault.ad.selinc.com" title="Longhorn" width="100%" height="800px"></iframe>
    </SectionBox>
  ),
});

[joaquimrocha]

Hi @sarg3nt . Very cool that you're using the sidebar for such a use case.
It's true the sidebar is not supporting URLs that are not in the app. I think it should.

I am not sure if the iframe is a work around for this or intended. If it's a work around, you could instead add the links to the view that the /apps route renders. Regular HTML should work, or you can import Link from mui.

[sarg3nt]

@joaquimrocha yeah, it would be ideal directly opening a link was supported but I figured out a workaround for now.

registerRoute({
  path: '/longhorn',
  sidebar: 'longhorn',
  name: 'longhorn',
  exact: true,
  component: () => {
    window.open("https://longhorn.k8s.vault.ad.selinc.com", "_blank");
    return (
      <SectionBox title="Longhorn" textAlign="center" paddingTop={2}>
        <Typography>Opening Longhorn in a new tab...</Typography>
      </SectionBox>
    );
  },
});

It's ugly, but better than an iFrame

[sarg3nt]

If you want to close this ticket you can, if you'd like to keep it open to track supporting links to external sites that works for me too.