Creating a Custom No-Code UI for a Third-Party Integration

import { convertLegacyRouteRefs } from '@backstage/core-compat-api';
import {
  createFrontendPlugin,
  ExtensionDefinition,
} from '@backstage/frontend-plugin-api';
import { rootRouteRef } from './routes';

import { IntegrationPageBlueprint } from '@spotify/backstage-plugin-soundcheck';

// extension reference: integration:soundcheck-integrations/example-pagerduty
export const pagerDutyIntegration: ExtensionDefinition =
  IntegrationPageBlueprint.make({
    name: 'example-pagerduty', // extension name
    params: {
      integrationId: 'example-pagerduty', // IMPORTANT: The value must match the ID of the corresponding fact collector
      loader: async () =>
        import('./components/IntegrationComponent').then(
          (m) => <m.IntegrationComponent collectorId="example-pagerduty" />, // React component created in the previous step
        ),
    },
  });

export default createFrontendPlugin({
  pluginId: 'soundcheck-integrations',
  routes: convertLegacyRouteRefs({
    root: rootRouteRef,
  }),
  extensions: [pagerDutyIntegration],
});

import { Content } from '@backstage/core-components';
import { Button, Grid, TextField, Typography } from '@material-ui/core';
import {
  useGetCollectors,
  useUpdateCollectorConfig,
} from '@spotify/backstage-plugin-soundcheck';
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';

export const IntegrationComponent = ({
  collectorId,
}: {
  collectorId: string;
}) => {
  const navigate = useNavigate();
  const navigateBack = () => navigate('/soundcheck/integrations');

  // fetching integration data from the database and/or YAML
  const { data } = useGetCollectors([collectorId]);
  const { mutateAsync: updateCollectorConfig } = useUpdateCollectorConfig();

  const collector = data?.[0];
  const [config, setConfig] = useState<string>();

  useEffect(() => {
    if (collector?.config) {
      setConfig(JSON.stringify(collector.config, null, '\t'));
    }
  }, [collector]);

  if (!collector)
    return (
      <Typography variant="h1">{collectorId} Integration Not Found</Typography>
    );

  const disabled = !collector.isEditable || !collector.isConfigurable;

  const onSave = async () => {
    // saving integration data to the database
    const result = await updateCollectorConfig({
      collectorId: collectorId,
      config: config ? JSON.parse(config) : {},
    });
    if (result) navigateBack();
  };

  return (
    <Content>
      <Grid container direction="column" spacing={2}>
        <Grid item>
          <Typography variant="h1">
            {collector.name ?? collector.id} Integration
          </Typography>
          <Typography variant="subtitle2">{collector.description}</Typography>
        </Grid>
        <Grid item>
          <TextField
            label="JSON Configuration"
            placeholder="Enter JSON configuration"
            variant="outlined"
            disabled={disabled}
            fullWidth
            multiline
            minRows={5}
            maxRows={25}
            value={config}
            onChange={(event) => setConfig(event.target.value)}
          />
        </Grid>
        <Grid item>
          <Grid container spacing={1}>
            <Grid item>
              <Button
                variant="contained"
                color="primary"
                disabled={disabled}
                onClick={onSave}
              >
                Save
              </Button>
            </Grid>
            <Grid item>
              <Button
                variant="text"
                color="primary"
                disabled={disabled}
                onClick={navigateBack}
              >
                Cancel
              </Button>
            </Grid>
          </Grid>
        </Grid>
      </Grid>
    </Content>
  );
};

app:
  extensions:
    # Disable the pre-shipped PagerDuty integration
    - integration:soundcheck/pagerduty:
        disabled: true
    # Enable the custom PagerDuty integration No-Code UI
    - integration:soundcheck-integrations/example-pagerduty

{
  "dependencies": {
    "@internal/backstage-plugin-soundcheck-integrations": "workspace:^",
    "@spotify/backstage-plugin-soundcheck": "^0.19.8"
  }
}

import soundCheckPlugin from '@spotify/backstage-plugin-soundcheck/alpha';
import examplePagerDutyIntegration from '@internal/backstage-plugin-soundcheck-integrations/alpha';

const app = createApp({
  features: [
    // ... other features
    soundCheckPlugin,
    examplePagerDutyIntegration,
  ],
  // ... other options
});