chore: setup initial repo #2

Parkreiner · 2024-02-15T00:48:07Z

This commit lays the groundwork for moving all our Backstage plugin logic into a separate repo that will (eventually) become public and fully open-sourced.

Notes

The vast majority of the code comes straight from the official scaffolder, or was copied directly from the previous repo. If I didn't leave a comment on the file, it should be safe to ignore it.
In theory, the Coder Backstage plugin can be launched in isolated dev mode. As in, you will get a dev page with the plugin rendered inside it. However, I couldn't figure out how to get the Proxy available in dev mode (since it technically is a backend plugin), and there aren't any docs for this specific use case. So our code is right, but every query that gets sent out will just hang until the 20-second timeout. I have a thread opened in the Backstage Discord, and am hoping to hear back soon

Changes to watch out for

There was a bug with the auth code that wasn't obvious until the proxy broke
- I accidentally had the boolean for checking whether the component was mounting flipped the wrong way
- Only reason it wasn't obvious is that we were getting back a response from the Coder API too quickly

Co-authored-by: Asher <ash@coder.com>

Parkreiner · 2024-02-15T00:49:54Z

packages/app/src/App.tsx

+/**
+ * 2024-02-13 - The version of TechDocsAddons that Backstage ships with makes
+ * the TypeScript compiler complain when you try to render it as JSX. This seems
+ * like it's just a type mismatch issue, and things still work at runtime
+ */
+const FixedTechDocsAddons = TechDocsAddons as React.FC<unknown>;


I have no idea what changed between the last time we set up a Backstage repo from early last year and now, but this was complaining at me, and likely would've caused compiler issues

Parkreiner · 2024-02-15T00:51:10Z

packages/backend/src/index.test.ts

+import { PluginEnvironment } from './types';
+
+describe('test', () => {
+  it('unbreaks the test runner', () => {
+    const unbreaker = {} as PluginEnvironment;
+    expect(unbreaker).toBeTruthy();
+  });
+});


This is the first time I've seen this code. I don't understand why this is here

Parkreiner · 2024-02-15T00:51:53Z

plugins/backstage-plugin-coder/dev/DevPage.tsx

@@ -0,0 +1,69 @@
+/**


New component

Parkreiner · 2024-02-15T00:52:25Z

plugins/backstage-plugin-coder/dev/index.tsx

@@ -0,0 +1,34 @@
+import React from 'react';


Not a new file, but this is the first time it's really being filled out

Parkreiner · 2024-02-15T00:54:27Z

plugins/backstage-plugin-coder/src/components/CoderProvider/CoderAuthProvider.tsx

+  const isInitializing =
+    authValidityQuery.isLoading &&
+    authValidityQuery.isFetching &&
+    !authValidityQuery.isFetchedAfterMount;


The one bug fix – authValidityQuery.isFetchedAfterMount originally wasn't negated. Originally, I thought the name meant "is this query being run immediately after the mounting render?", but it's actually "is this query being run after a re-render?"

Nice catch!

Parkreiner · 2024-02-15T00:57:45Z

plugins/backstage-plugin-coder/src/plugin.ts

@@ -0,0 +1,70 @@
+import {


Another file that isn't new, but got filled out with more stuff, and has exports defined more properly this time

code-asher

I couldn't figure out how to get the Proxy available in dev mode

I was looking at Roadie's pull request plugin and I wonder if we drop the proxy stuff and use this API factory thing they are doing. From what I gather it could look something like:

import * as coder from "coder/site/src/api/api" // with "coder": "https://github.com/coder/coder#main" in the package.json as a dependency
export const coderApiRef = createApiRef<typeof coder>({
  id: 'coder.api',
})
export const coderPlugin = createPlugin({
  id: 'coder',
  apis: [
    createApiFactory(coderApiRef, coder),
  ],
  routes: {
    root: rootRouteRef,
  },
})

Then in components:

import useApi ...
import coderApiRef ...
const coderApi = useApi(coderApiRef);
coderApi.getWorkspaces()

I have not tried it but it seems promising! In this example I imported from coder/coder but we could do it with the existing API stuff.

examples/entities.yaml

code-asher · 2024-02-15T22:12:30Z

plugins/backstage-plugin-coder/src/api.ts

@@ -0,0 +1,320 @@
+import { parse } from 'valibot';


Just a note for the future, we should think about pulling from coder/coder in the way the VS Code plugin does so we can get the sdk and types from there.

If we do this, as a reference the way the VS Code plugin sets the token and URL is:

import axios from "axios" // ... axios.defaults.baseURL = url axios.defaults.headers.common["Coder-Session-Token"] = token

Admittedly kind of janky. At some point maybe we export a proper client factory from coder/coder.

Yeah, that seems like a much better approach, especially since we have control of the API. Especially as we move towards exposing the whole Coder API (like Ben has planned), adding the types directly is going to be much more maintainable long-term

plugins/backstage-plugin-coder/src/components/ExampleComponent/ExampleComponent.tsx

plugins/backstage-plugin-coder/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx

Parkreiner · 2024-02-16T16:50:23Z

@code-asher Yeah, I've been wondering about the API factory stuff, too. It just feels weird that the main documentation for proxying makes no mention of them, and they just say to use the native fetch

There is this example page, though, which makes use of the discoveryApi. Hopefully this would do the trick, but I've got two big questions (just thinking out loud):

I'm guessing that the plugin would inherit all the config options from the root directory, but we would need to make sure that holds up, and that the proxy properties are being passed down
The DiscoveryApi looks pretty straightforward (it only has one function), but I don't know if there are any limits on when it can be called. Like, does it break if it's not set up with the right providers, and would those be available in isolated mode?

Still, once I get the auth PR done, I'll fiddle around with things, and see if I can't get them working

code-asher · 2024-02-16T19:46:52Z

Awesome, yeah I think we can punt on the API thing since running from the root works perfectly fine, but curious to see what you turn up!

Parkreiner added 15 commits February 13, 2024 19:15

chore: add scaffolding for base Backstage plugin

e612134

chore: add starter scaffolding for Coder plugin

43ae557

chore: rename plugin package

dbc9bb3

chore: add Card component

c6a0d0a

chore: port over components from Backstage deployment

da9b8dc

docs: update plugin readme with working draft

c04137e

chore: add proxy options for app-config.yaml

5b9ac26

refactor: clean up markup for CoderWorkspacesCard

4271aa3

chore: disable eslint rules for scoping

ae85ee8

fix: update typo in auth initialization logic

d9daa15

chore: add all public exports for plugin

67fa4cd

fix: update imports for api.ts file

f6acba4

chore: add support metadata for dev mode

2a1c036

chore: add code for isolated plugin development

3dd9b1b

fix: add missing init files and GitHub auth logic

7c1134f

Co-authored-by: Asher <ash@coder.com>

Parkreiner self-assigned this Feb 15, 2024

Parkreiner commented Feb 15, 2024

View reviewed changes

plugins/backstage-plugin-coder/dev/DevPage.tsx

@@ -0,0 +1,69 @@

/**

Copy link

Member Author

Parkreiner Feb 15, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

New component

Parkreiner commented Feb 15, 2024

View reviewed changes

fix: delete unused example components

a4720b5

Parkreiner commented Feb 15, 2024

View reviewed changes

Parkreiner requested review from Kira-Pilot and code-asher February 15, 2024 01:00

code-asher approved these changes Feb 15, 2024

View reviewed changes

Kira-Pilot approved these changes Feb 16, 2024

View reviewed changes

fix: remove auto-generated example files

4695468

Parkreiner merged commit 23795ae into main Feb 16, 2024

Parkreiner deleted the mes/repo-setup-v2 branch February 16, 2024 16:50

Parkreiner mentioned this pull request Feb 21, 2024

Update Coder plugin to work in isolated dev mode #7

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

chore: setup initial repo #2

chore: setup initial repo #2

Uh oh!

Parkreiner commented Feb 15, 2024 •

edited

Loading

Uh oh!

Parkreiner Feb 15, 2024

Uh oh!

Parkreiner Feb 15, 2024 •

edited

Loading

Uh oh!

Parkreiner Feb 15, 2024

Uh oh!

Parkreiner Feb 15, 2024

Uh oh!

Parkreiner Feb 15, 2024 •

edited

Loading

Uh oh!

code-asher Feb 15, 2024

Uh oh!

Parkreiner Feb 15, 2024

Uh oh!

code-asher left a comment •

edited by Parkreiner

Loading

Uh oh!

Uh oh!

code-asher Feb 15, 2024 •

edited

Loading

Uh oh!

Parkreiner Feb 16, 2024

Uh oh!

Uh oh!

Uh oh!

Parkreiner commented Feb 16, 2024 •

edited

Loading

Uh oh!

code-asher commented Feb 16, 2024

Uh oh!

Uh oh!

chore: setup initial repo #2

chore: setup initial repo #2

Uh oh!

Conversation

Parkreiner commented Feb 15, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Notes

Changes to watch out for

Uh oh!

Parkreiner Feb 15, 2024

Choose a reason for hiding this comment

Uh oh!

Parkreiner Feb 15, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Parkreiner Feb 15, 2024

Choose a reason for hiding this comment

Uh oh!

Parkreiner Feb 15, 2024

Choose a reason for hiding this comment

Uh oh!

Parkreiner Feb 15, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

code-asher Feb 15, 2024

Choose a reason for hiding this comment

Uh oh!

Parkreiner Feb 15, 2024

Choose a reason for hiding this comment

Uh oh!

code-asher left a comment • edited by Parkreiner Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

code-asher Feb 15, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Parkreiner Feb 16, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Parkreiner commented Feb 16, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

code-asher commented Feb 16, 2024

Uh oh!

Uh oh!

Parkreiner commented Feb 15, 2024 •

edited

Loading

Parkreiner Feb 15, 2024 •

edited

Loading

Parkreiner Feb 15, 2024 •

edited

Loading

code-asher left a comment •

edited by Parkreiner

Loading

code-asher Feb 15, 2024 •

edited

Loading

Parkreiner commented Feb 16, 2024 •

edited

Loading