Backstage iFrame Plugin

yarn --cwd packages/app add @roadiehq/backstage-plugin-iframe

// app-config.yaml
iframe:
  allowList: ["some-domain.com"]

// packages/app/src/components/home/HomePage.tsx
import { HomePageIFrameCard } from '@roadiehq/backstage-plugin-iframe';

export const HomePage = () => {
  return (
    ...
    <Grid item xs={12} md={6}>
        <HomePageIFrameCard
          title="Super cool title"
          src="https://example.com"
        />
      </Grid>
    ...
  );
};

// packages/app/src/components/catalog/EntityPage.tsx
import {
  iframePlugin,
  EntityIFrameCard,
  EntityIFrameContent,
} from '@roadiehq/backstage-plugin-iframe';
...

const contentProps = {
  frames: [
    {
      src: "https://example.com"
    }
  ],
  title: "super cool title"
}

const serviceEntityPage = (
  <EntityLayoutWrapper>
    ...
    <EntityLayout.Route
      path="/mycustom-iframes"
      title="Iframes">
        <EntityIFrameContent {...iframeProps} />
    </EntityLayout.Route>
    ...
  </EntityLayoutWrapper>
);

const iframeProps = {
  src: "https://example.com"
}

const overviewContent = (
  <Grid container spacing={3}>
    ...
    <Grid item md={8}>
      <EntityIFrameCard {...iframeProps}/>
    </Grid>
    ...
  </Grid>
);