8000 API live share session · coder/backstage-plugins@f2ac079 · GitHub
[go: up one dir, main page]
Skip to content

Commit f2ac079

Browse files
bpmctKira-PilotParkreinercode-asher
committed
API live share session
Co-authored-by: Kira Pilot <Kira-Pilot@users.noreply.github.com> Co-authored-by: Michael Smith <Parkreiner@users.noreply.github.com> Co-authored-by: Asher <ash@coder.com>
1 parent 51e5279 commit f2ac079

File tree

1 file changed

+145
-0
lines changed

1 file changed

+145
-0
lines changed

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

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,151 @@ spec:
131131

132132
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).
133133

134+
## Advanced: Use the Coder API
135+
136+
You can build custom React components and functions that use the Coder API on behalf of the authenticated user.
137+
138+
### Example: List Coder workspaces
139+
140+
```tsx
141+
import { useCoderClient, getErrorMessage } from '@coder/coder-js-sdk'; // https://github.com/coder/coder/tree/main/js-sdk
142+
143+
function CustomWorkspacesComponent () {
144+
const coderClient = useCoderClient();
145+
const workspacesState = useAsync(() => {
146+
return coderClient.api.getWorkspaces({
147+
q: "owner:me",
148+
});
149+
}, []);
150+
151+
return (
152+
<CoderAuthWrapper type="card">
153+
<h1>Your workspaces</h1>
154+
155+
{workspacesState.loading && <Progress />}
156+
{workspacesState.error && <ErrorPanel title="Failed to load workspaces" error={getErrorMessage(err)} />}
157+
{workspaces.length > 0 && (
158+
{workspaces.map((workspace) => (
159+
<ul>{workspace.name}<ul>
160+
))}
161+
)}
162+
</CoderAuthWrapper>
163+
);
164+
}
165+
```
166+
167+
### Example: Custom Auth Component
168+
169+
```tsx
170+
import { useCoderClient, getErrorMessage } from '@backstage/backstage-plugin-coder'; // https://github.com/coder/coder/tree/main/js-sdk
171+
172+
function useCoderClient () {
173+
174+
const api = useApi(coderClientApiRef);
175+
//
176+
177+
return {
178+
...api.methods,
179+
safeRenderState,
180+
}
181+
}
182+
183+
const myRandomFunction = async () => {
184+
185+
// some other Backstage thing
186+
const coderClient = useCoderClient();
187+
188+
if (!coderClient.isAuthenticated) {
189+
throw new Error("not logged in")
190+
} else {
191+
// do stuff
192+
}
193+
}
194+
195+
function CustomWorkspacesComponent () {
196+
const coderClient = useCoderClient();
197+
const workspacesState = useAsync(() => {
198+
return coderClient.api.getWorkspaces({
199+
q: "owner:me",
200+
});
201+
}, []);
202+
203+
// TODO: myComponent, probably looks something like
204+
// <div><input type="password" onClick={??}></div>
205+
206+
return (
207+
<CoderAuthWrapper type="card" logInComponent={myComponent}>
208+
<h1>Your workspaces</h1>
209+
210+
{workspacesState.loading && <Progress />}
211+
{workspacesState.error && (
212+
<ErrorPanel
213+
title="Failed to load workspaces"
214+
error={getErrorMessage(err)}
215+
/>
216+
)}
217+
{workspaces.length > 0 && (
218+
{workspaces.map((workspace) => (
219+
<ul>{workspace.name}</ul>
220+
))}
221+
}
222+
</CoderAuthWrapper>
223+
)
224+
```
225+
226+
### Example: Skaffolder Step (or Backend)
227+
228+
```tsx
229+
// TODO: Figure out how the Skaffolder works
230+
// is it FE or BE?
231+
```
232+
233+
```tsx
234+
import { OauthApps } from "@backstage..."
235+
236+
const api = useApi(oauthsomethingsomething)
237+
oapi.oauthtoken
238+
239+
// using sdk directly:
240+
import { sdkFactory } from "@coder/coder-js-sdk"
241+
const sdk = sdkFactory(url, token)
242+
```
243+
244+
// https://github.com/coder/backstage.cdr.dev/commit/0765dc204fcde0a7c3e7e449802d61e2dc70de01
245+
246+
### Example: Custom authentication flow
247+
248+
```tsx
249+
function CustomWorkspacesFunction () {
250+
const coderClient = useCoderClient();
251+
const workspacesState = useAsync(() => {
252+
return coderClient.api.getWorkspaces({
253+
q: "owner:me",
254+
});
255+
}, []);
256+
257+
const clientSnapshot = useSyncExternalStore(
258+
coderClient.subscribe,
259+
coderClient.getStateSnapshot
260+
);
261+
262+
clientSnapshot.isAuthenticated;
263+
const err = getErrorMessage(workspacesState.error)
264+
265+
266+
const workspaces = coderClient.api.getWorkspaces({
267+
q: "owner:me",
268+
})
269+
270+
if (coderClient.isAuthenticated()) {
271+
272+
} else {
273+
274+
}
275+
276+
}
277+
```
278+
134279
## Roadmap
135280

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

0 commit comments

Comments
 (0)
0