feat: setup dev environment and added proxy path attribute

CONTRIBUTING.md

@@ -6,17 +6,19 @@
 4. Push to the Branch (`git push origin feature/AmazingFeature`)
 5. Open a Pull Request
 
-### npm scripts
+### yarn scripts
 
 ```bash
 # install dependencies
-$ npm i
+$ yarn
 # run tests
-$ npm test
+$ yarn test
 # run the code linter
-$ npm run lint
+$ yarn lint
 # Build the lib
-$ npm run build
+$ yarn build
+# Test UI locally with mocked data
+$ yarn start
 ```
 
 ### Commit Convention
@@ -39,15 +41,15 @@ Contributions should pass existing tests or have test cases for new functionalit
 
 ```bash
 # Should pass
-$ npm test
+$ yarn test
 ```
 
 ### Style
 
 Style and lint errors should be fixed with
 
 ```bash
-$ npm run lint
+$ yarn lint
 ```
 
 ## Contributors

app-config.yaml

@@ -0,0 +1,55 @@
+app:
+ title: Backstage Example App
+ baseUrl: http:https://localhost:3000
+ #datadogRum:
+ # clientToken: '123456789'
+ # applicationId: qwerty
+ # site: # datadoghq.eu default = datadoghq.com
+ # env: # optional
+ support:
+ url: https://github.com/backstage/backstage/issues # Used by common ErrorPage
+ items: # Used by common SupportButton component
+ - title: Issues
+ icon: github
+ links:
+ - url: https://github.com/backstage/backstage/issues
+ title: GitHub Issues
+ - title: Discord Chatroom
+ icon: chat
+ links:
+ - url: https://discord.gg/MUpMjP2
+ title: '#backstage'
+
+backend:
+ # Used for enabling authentication, secret is shared by all backend plugins
+ # See https://backstage.io/docs/tutorials/backend-to-backend-auth for
+ # information on the format
+ # auth:
+ # keys:
+ # - secret: ${BACKEND_SECRET}
+ baseUrl: http:https://localhost:7007
+ listen:
+ port: 7007
+ database:
+ client: better-sqlite3
+ connection: ':memory:'
+ cache:
+ store: memory
+ cors:
+ origin: http:https://localhost:3000
+ methods: [GET, HEAD, PATCH, POST, PUT, DELETE]
+ credentials: true
+ csp:
+ connect-src: ["'self'", 'http:', 'https:']
+ # Content-Security-Policy directives follow the Helmet format: https://helmetjs.github.io/#reference
+ # Default Helmet Content-Security-Policy values can be removed by setting the key to false
+ reading:
+ allow:
+ - host: example.com
+ - host: '*.mozilla.org'
+ - host: gitlab.com
+ # workingDirectory: /tmp # Use this to configure a working directory for the scaffolder, defaults to the OS temp-dir
+
+integrations:
+ gitlab:
+ - host: gitlab.com

dev/index.tsx

@@ -1,12 +1,57 @@
-// @ts-ignore TS1259: Module can only be default-imported using the 'esModuleInterop' flag
 import React from 'react';
 import { createDevApp } from '@backstage/dev-utils';
+import { EntityProvider } from '@backstage/plugin-catalog-react';
 import { gitlabPlugin, EntityGitlabContent } from '../src/plugin';
+import { GitlabCIApiRef, GitlabCIClient } from '../src/api';
+import { mockedGitlabReqToRes, projectId } from './mock-gitlab/api-v4-v15.7.0';
 
 createDevApp()
  .registerPlugin(gitlabPlugin)
+ .registerApi({
+ api: GitlabCIApiRef,
+ deps: {},
+ factory: () => {
+ const cli = new GitlabCIClient({
+ discoveryApi: {
+ getBaseUrl: () => Promise.resolve('https://gitlab.com'),
+ },
+ proxyPath: '',
+ });
+
+ // Here we mock the client requests to GitLab
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ // @ts-ignore
+ cli.callApi = async function (
+ path: string,
+ query: { [key in string]: any }
+ ) {
+ const response =
+ mockedGitlabReqToRes[
+ `${path}?${new URLSearchParams(query).toString()}`
+ ];
+ return response || [];
+ };
+ return cli;
+ },
+ })
  .addPage({
- element: <EntityGitlabContent />,
+ element: (
+ <EntityProvider
+ entity={{
+ metadata: {
+ annotations: {
+ 'gitlab.com/project-id': `${projectId}`,
+ },
+ name: 'backstage',
+ },
+ apiVersion: 'backstage.io/v1alpha1',
+ kind: 'Component',
+ }}
+ >
+ {' '}
+ <EntityGitlabContent />
+ </EntityProvider>
+ ),
  title: 'Root Page',
  path: '/backstage-plugin-gitlab',
  })