Add widget to show recent git workflow runs

[iain-b]

Adds a widget to show recent git workflow runs to the github actions plugin. The default setting is the last 5 runs across all branches but both branch and the number of runs are configurable.

https://www.loom.com/share/db09c13f059843ceac09494a7b72199d

Hey, I just made a Pull Request!

✔️ Checklist

• All tests are passing yarn test
• Screenshots attached (for UI changes)
• Relevant documentation updated
• Prettier run on changed files
• Tests added for new functionality
• Regression tests added for bug fixes

[iain-b]

This link assumes that the Entity page in the user's application is configured like the sample app. It could be made more configurable down the line.

[shmidt-i]

This is exactly one of the cases we are in the process of discussing how to solve moving forward! cc @Rugvip

[Rugvip]

Yep! More info about the plan going forward in #2565

[freben]

should this entire item be surrounded with essentially if (isJenkinsAvailable(entity) || isGitHubActionsAvailable(entity))? :)

[freben]

it should most likely not be before the about card in the flow, by the way

[iain-b]

I've reverted to the way it was before where each widget definition is separate.

[freben]

should remove this mocking, and instead inject it in the component tree when rendering - see this example https://github.com/spotify/backstage/blob/8b53edb47489cb9e60cfc25f9981e4bb066852a1/plugins/register-component/src/components/RegisterComponentPage/RegisterComponentPage.test.tsx#L49

[iain-b]

done

[stefanalund]

Minor nitpick, otherwise

[stefanalund]

I feel like this should be dense to make it look more like our mockups:

[iain-b]

Is that dense ? data-wise it's dense but the padding looks "default" (dense is below, looks a little compressed to me)
That said I'd be happy to add fields inline with that mock up in another PR.

[stefanalund]

@iain-b that does not look better. Let's stick with dense=false.

[shmidt-i]

Thanks, looks good, let's nail those small comments and 🚢 it 😄

[shmidt-i]

Wouldn't you want to do something similar to the https://github.com/spotify/backstage/blob/309bd1750f06d01953da1b5ae6d845e97b85eb0c/packages/app/src/components/catalog/EntityPage.tsx#L43 ?

[iain-b]

@shmidt-i I could write something like:

const RecentCICDRunsSwitcher = ({ entity }: { entity: Entity }) => {
  let content: ReactNode;
  switch (true) {
    case isJenkinsAvailable(entity):
      content = <JenkinsLatestRunCard branch="master" />;
      break;
    case isGitHubActionsAvailable(entity):
      content = <RecentWorkflowRunsCard entity={entity} />;
      break;
    default:
      content = null;
  }
  if (!content) {
    // Don't want to render the grid if there's no matching plugin
    return null;
  }
  return (
    <Grid item sm={6}>
      {content}
    </Grid>
  );
};

What do you think? Seems a little overly specific to me but anything more generic is a bit beyond the scope of this pull request

[iain-b]

^^ done

[shmidt-i]

This is exactly one of the cases we are in the process of discussing how to solve moving forward! cc @Rugvip

[benjdlambert]

@shmidt-i can you take another look at this?

[shmidt-i]

All good, thanks!