GitHub 编码空间插件

直接从后台平台与您的 GitHub 代码空间交互 .

GitHub Codespaces 允许您从您的 GitHub 寄存器创建 Devcontainer 并立即进入开发模式 。 更多文件,请访问文件下方。 您也可以在登录到 GitHub 后, 通过下面的网站链接查看您的代码空间 .

联合国 https://docs.github.com/en/codespaces (中文(简体) )

网站: https://github.com/ 编码空间

特征

• 以 Github( 有“ repo” 和“ 代码空间” 权限) 认证用户
• 列出所有认证用户的代码空间
• 为认证的用户在项目仓库中列出代码空间
• 列出以显示名称作为认证用户实体名称的代码空间
• 创建/ 启动一个实体的新代码空间( 显示名称为实体名称)
• 密码空间的插座

截图

1. GitHub 代码空间菜单

2. 开始代码空间部件

3. 开始和列出代码空间卡

4. 列表代码空间内容( 为实体过滤)

5. 列表代码空间内容( 为项目仓库过滤)

设置

一般要求

1. 提供 OAuth 证书 :

   1. 创建 OAuth 应用程序 在 GitHub 组织中,调用 URL 设置为 http://localhost:7007/api/auth/github/handler/frame。 。 。 .
   2. 从新创建的应用程序设置页面中取取客户端ID和客户端机密并将其放入 AUTH_GITHUB_CLIENT_ID 财务报告和审定财务报表 AUTH_GITHUB_CLIENT_SECRET 环境变量.

2. 用正确的 GitHub 动作存储器和所有者注释您的组件 :

   注释键是 github.com/project-slug。 。 。 .

   示例

   apiVersion: backstage.io/v1alpha1
   kind: Component
   metadata:
     name: backstage
     description: backstage.io
     annotations:
       github.com/project-slug: 'backstage/backstage'
       # Add below annotation for a custom devcontainer configuration with
       # relative path of devcontainer.json file from root of the repository
       github.com/devcontainer-path: .devcontainer/devcontainer.json 
   spec:
     type: website
     lifecycle: production
     owner: user:guest
   

独立应用程序要求

1. 在您的后台应用程序包中安装插件依赖性 :

# From your Backstage root directory
yarn add --cwd packages/app @adityasinghal26/plugin-github-codespaces

2. 添加到应用程序 EntityPage 组件 :

// In packages/app/src/components/catalog/EntityPage.tsx
import {
  EntityGithubCodespacesWidget,
  EntityGithubCodespacesCard,
  EntityGithubCodespacesContent,
  EntityGithubCodespacesRepoContent
  isGithubCodespacesAvailable,
} from '@adityasinghal26/plugin-github-codespaces';

// Create the codespaces tab content for Github Codespaces
const codespacesContent = (
  <>
    {/* Add this entity switch to view the list 
    of codespaces filtered with entity name */}
    <EntitySwitch>
      <EntitySwitch.Case if={isGithubCodespacesAvailable}>
        <Grid item xs={12}>
          <EntityGithubCodespacesContent />
        </Grid>
      </EntitySwitch.Case>
    </EntitySwitch>
    {/* Add this entity switch to view the list 
    of codespaces filtered with repository */}
    <EntitySwitch>
      <EntitySwitch.Case if={isGithubCodespacesAvailable}>
        <Grid item xs={12}>
          <EntityGithubCodespacesRepoContent />
        </Grid>
      </EntitySwitch.Case>
    </EntitySwitch>
  </>
);

// You can add the overview widget and card to overviewContent as below
// this overview content can be used any number of pages
const overviewContent = (
  <Grid container spacing={3} alignItems="stretch">
    {/* other grids... */}
    {/* Add this entity switch to add the Start Codespace widget  */}
    <EntitySwitch>
      <EntitySwitch.Case if={e => Boolean(isGithubCodespacesAvailable(e))}>
        <Grid item md={6} xs={12}>
          <EntityGithubCodespacesWidget />
        </Grid>
      </EntitySwitch.Case>
    </EntitySwitch>
    {/* Add this entity switch to add the Start and List Codespace card.
    You can set enableStart as 'true' to show the Start Codespace button.
    If left unset or set as 'false', the Start Codespace button will be unavailable.   */}
    <EntitySwitch>
      <EntitySwitch.Case if={e => Boolean(isGithubCodespacesAvailable(e))}>
        <Grid item md={6} xs={12}>
          <EntityGithubCodespacesCard enableStart={true} />
        </Grid>
      </EntitySwitch.Case>
    </EntitySwitch>
  </Grid>
);

// You can add the tab to any number of pages, the service page is shown as an
// example here
const serviceEntityPage = (
  <EntityLayout>
    {/* other tabs... */}
    <EntityLayout.Route 
        if={isGithubCodespacesAvailable} 
        path="/github-codespaces" 
        title="GitHub Codespaces">
      {codespacesContent}
    </EntityLayout.Route>

3. 运行应用程序 yarn start 后端为 yarn start-backend。 。 。 . 然后导航到 /github-codespaces/ 在任何实体之下.

应用程序菜单要求

确保所需软件包如上第1个步骤所安装.

1. 添加到应用程序 App.tsx 组件 :

// In packages/app/src/App.tsx
import { GithubCodespacesPage } from '@adityasinghal26/plugin-github-codespaces';

// Add the route to the App path routes
const routes = (
  <FlatRoutes>
  {/* other routes here */}
      <Route path="/github-codespaces" element={<GithubCodespacesPage />} />
  </FlatRoutes>
);

2. 添加到应用程序 Root.tsx 组件 :

// In packages/app/src/components/Root/App.tsx
import { GitHubIcon } from '@backstage/core-components';
import { GithubCodespacesPage } from '@adityasinghal26/plugin-github-codespaces';

// Add the menu to the Root menu sidebar
export const Root = ({ children }: PropsWithChildren<{}>) => (
  <SidebarPage>
    <Sidebar>
    {/* other sidebar items here */}
    {/* add inside "Menu" SidebarGroup */}
      <SidebarItem icon={GitHubIcon} to="github-codespaces" text="Codespaces" />
    {/* other sidebar items here */}
    </Sidebar>
    {children}
  </SidebarPage>
);

限制

• 任何开始使用实体GithubCodespacesWidget或实体GithubCodespacesCard动作的代码空间都会创建一个与实体名称完全相同的显示名称的新代码空间.
• 一旦创建了代码空间,只能从部件/卡片动作开始代码空间.
• 该插件尚未支持 GitHub Entertainment 。 该功能将在下一期中被扩展.