Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit ece362a

Browse files
ParkreinerParkreiner
authored
chore(coder plugin): make template names optional (#103)
* wip: update type definitions and parsing logic for config values * refactor: update some code for clarity * fix: update property names in top-level config * wip: commit progress on link update * chore: finish updates for CreateWorkspaceLink * chore: add new test case for disabled state * fix: cleanup markup and text for EntityDataReminder * chore: add readEntityData as context value * refactor: rename DataEntityReminder to ReminderAcoordionItem * chore: extract core accordion item logic to parent * chore: finish initial version of ReminderAccordion * wip: commit test stubs for ReminderAccordion * chore: rename isReadingEntityData prop * chore: update mock context values in tests * wip: commit test stub for hiding cta button when there is no repo URL * chore: hide CTA button when there is no repo URL * chore: rename AccordionItem to Disclosure * chore: update tests for Disclosure * chore: remove needless hasAssertions calls * fix: update conditional logic for ReminderAccordion * fix: more accordion bug fixes * chore: finish another test case * chore: add another accordion test case * refactor: rename props for clarity * refactor: simplify condition for entity reminder * refactor: update prop for Disclosure * chore: finish all tests for accordion * refactor: update type definition for mock config * refactor: polish up accordion tests * chore: finish up all tests * fix: add missing property to mock setup to help compiler pass * refactor: move isReadingEntityData property to workspaces config * fix: add overflow-y and max height behavior to accordion * chore: polish styling for accordion * fix: add reminder accordion as exported plugin component * refactor: rename imported component to reduce visual noise when reading * fix: make no-link message more clear for button * fix: update text to account for new tooltip * docs: add page about catalog-info * docs: finish all docs updates for coder plugin * docs: add docs section for ReminderAccordion * fix: update link for documentation in UI
1 parent 6c050f1 commit ece362a

30 files changed

+989
-314
lines changed

‎packages/app/src/components/catalog/EntityPage.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -137,8 +137,8 @@ const coderAppConfig: CoderAppConfig = {
137137
},
138138

139139
workspaces: {
140-
templateName: 'devcontainers',
141-
mode: 'manual',
140+
defaultTemplateName: 'devcontainers',
141+
defaultMode: 'manual',
142142
repoUrlParamKeys: ['custom_repo', 'repo_url'],
143143
params: {
144144
repo: 'custom',

‎plugins/backstage-plugin-coder/README.md

+41-11
Original file line numberDiff line numberDiff line change
@@ -28,22 +28,23 @@ the Dev Container.
2828
yarn --cwd packages/app add @coder/backstage-plugin-coder
2929
```
3030

31-
1. Add the proxy key to your `app-config.yaml`:
31+
2. Add the proxy key to your `app-config.yaml`:
3232

3333
```yaml
3434
proxy:
3535
endpoints:
3636
'/coder':
37-
# Replace with your Coder deployment access URL and a trailing /
37+
# Replace with your Coder deployment access URL (add a trailing slash)
3838
target: 'https://coder.example.com/'
39+
3940
changeOrigin: true
40-
allowedMethods: ['GET']
41+
allowedMethods: ['GET'] # Additional methods will be supported soon!
4142
allowedHeaders: ['Authorization', 'Coder-Session-Token']
4243
headers:
4344
X-Custom-Source: backstage
4445
```
4546
46-
1. Add the `CoderProvider` to the application:
47+
3. Add the `CoderProvider` to the application:
4748

4849
```tsx
4950
// In packages/app/src/App.tsx
@@ -58,14 +59,16 @@ the Dev Container.
5859
},
5960
6061
// Set the default template (and parameters) for
61-
// catalog items. This can be overridden in the
62-
// catalog-info.yaml for specific items.
62+
// catalog items. Individual properties can be overridden
63+
// by a repo's catalog-info.yaml file
6364
workspaces: {
64-
templateName: 'devcontainers',
65-
mode: 'manual',
66-
// This parameter is used to filter Coder workspaces
67-
// by a repo URL parameter.
65+
defaultTemplateName: 'devcontainers',
66+
defaultMode: 'manual',
67+
68+
// This property defines which parameters in your Coder
69+
// workspace templates are used to store repository links
6870
repoUrlParamKeys: ['custom_repo', 'repo_url'],
71+
6972
params: {
7073
repo: 'custom',
7174
region: 'eu-helsinki',
@@ -88,7 +91,7 @@ the Dev Container.
8891

8992
**Note:** You can also wrap a single page or component with `CoderProvider` if you only need Coder in a specific part of your app. See our [API reference](./docs/README.md) (particularly the section on [the `CoderProvider` component](./docs/components.md#coderprovider)) for more details.
9093

91-
1. Add the `CoderWorkspacesCard` card to the entity page in your app:
94+
4. Add the `CoderWorkspacesCard` card to the entity page in your app:
9295

9396
```tsx
9497
// In packages/app/src/components/catalog/EntityPage.tsx
@@ -101,6 +104,33 @@ the Dev Container.
101104
</Grid>;
102105
```
103106

107+
### `app-config.yaml` files
108+
109+
In addition to the above, you can define additional properties on your specific repo's `catalog-info.yaml` file.
110+
111+
Example:
112+
113+
```yaml
114+
apiVersion: backstage.io/v1alpha1
115+
kind: Component
116+
metadata:
117+
name: python-project
118+
spec:
119+
type: other
120+
lifecycle: unknown
121+
owner: pms
122+
123+
# Properties for the Coder plugin are placed here
124+
coder:
125+
templateName: 'devcontainers'
126+
mode: 'auto'
127+
params:
128+
repo: 'custom'
129+
region: 'us-pittsburgh'
130+
```
131+
132+
You can find more information about what properties are available (and how they're applied) in our [`catalog-info.yaml` file documentation](./docs/catalog-info.md).
133+
104134
## Roadmap
105135

106136
This plugin is in active development. The following features are planned:

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@ const appConfig: CoderAppConfig = {
2424
},
2525

2626
workspaces: {
27-
templateName: 'devcontainers',
28-
mode: 'manual',
27+
defaultTemplateName: 'devcontainers',
28+
defaultMode: 'manual',
2929
repoUrlParamKeys: ['custom_repo', 'repo_url'],
3030
params: {
3131
repo: 'custom',

‎plugins/backstage-plugin-coder/docs/catalog-info.md

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
# `catalog-info.yaml` files
2+
3+
This file provides documentation for all properties that the Coder plugin recognizes from Backstage's [`catalog-info.yaml` files](https://backstage.io/docs/features/software-catalog/descriptor-format/).
4+
5+
## Example file
6+
7+
```yaml
8+
apiVersion: backstage.io/v1alpha1
9+
kind: Component
10+
metadata:
11+
name: python-project
12+
spec:
13+
type: other
14+
lifecycle: unknown
15+
owner: pms
16+
17+
# Properties for the Coder plugin are placed here
18+
coder:
19+
templateName: 'devcontainers'
20+
mode: 'auto'
21+
params:
22+
repo: 'custom'
23+
region: 'us-pittsburgh'
24+
```
25+
26+
All config properties are placed under the `spec.coder` property.
27+
28+
## Where these properties are used
29+
30+
At present, there are two main areas where these values are used:
31+
32+
- [`CoderWorkspacesCard`](./components.md#coderworkspacescard) (and all sub-components)
33+
- [`useCoderWorkspacesConfig`](./hooks.md#usecoderworkspacesconfig)
34+
35+
## Property listing
36+
37+
### `templateName`
38+
39+
**Type:** Optional `string`
40+
41+
This defines the name of the Coder template you would like to use when creating new workspaces from Backstage.
42+
43+
**Note:** This value has overlap with the `defaultTemplateName` property defined in [`CoderAppConfig`](types.md#coderappconfig). In the event that both values are present, the YAML file's `templateName` property will always be used instead.
44+
45+
### `templateName`
46+
47+
**Type:** Optional union of `manual` or `auto`
48+
49+
This defines the workspace creation mode that will be embedded as a URL parameter in any outgoing links to make new workspaces in your Coder deployment. (e.g.,`useCoderWorkspacesConfig`'s `creationUrl` property)
50+
51+
**Note:** This value has overlap with the `defaultMode` property defined in [`CoderAppConfig`](types.md#coderappconfig). In the event that both values are present, the YAML file's `mode` property will always be used instead.
52+
53+
### `params`
54+
55+
**Type:** Optional JSON object of string values (equivalent to TypeScript's `Record<string, string | undefined>`)
56+
57+
This allows you to define additional Coder workspace parameter values that should be passed along to any outgoing URLs for making new workspaces in your Coder deployment. These values are fully dynamic, and unfortunately, cannot have much type safety.
58+
59+
**Note:** The properties from the `params` property are automatically merged with the properties defined via `CoderAppConfig`'s `params` property. In the event of any key conflicts, the params from `catalog-info.yaml` will always win.

0 commit comments

Comments
 (0)