Adding changes to export widgets to be imported as card (#83)

* Adding changes to export widgets to be imported as card Signed-off-by: Balasundaram <[email protected]> * Adding changes to include individual cards * version bump Co-authored-by: Sathish Kumar <[email protected]>
loblaw-sre · Feb 11, 2022 · 34b5b33 · 34b5b33
1 parent 0038ad8
commit 34b5b33
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -36,22 +36,58 @@ yarn add @loblaw/backstage-plugin-gitlab
 ```
 
 
-2. Add the `EntityGitlabContent` extension to the entity page in your app:
+2. Add a new Gitlab tab to the entity page.
 
 ```tsx
-// In packages/app/src/components/catalog/EntityPage.tsx
+// packages/app/src/components/catalog/EntityPage.tsx
 
 import { isGitlabAvailable, EntityGitlabContent } from '@loblaw/backstage-plugin-gitlab';
+
 // Farther down at the serviceEntityPage declaration
 const serviceEntityPage = (
 <EntityLayout>
     {/* Place the following section where you want the tab to appear */}
     <EntityLayout.Route if={isGitlabAvailable} path="/gitlab" title="Gitlab">
        <EntityGitlabContent />
     </EntityLayout.Route>
+</EntityLayout>
+    );
+```
+3. Add the Gitlab cards to the Overview tab on the entity page(Optional).
+
+```tsx
+// packages/app/src/components/catalog/EntityPage.tsx
+
+import { 
+  isGitlabAvailable, 
+  EntityGitlabContent, 
+  EntityGitlabLanguageCard, 
+  EntityGitlabContributorsCard, 
+  EntityGitlabMergeRequestsTable, 
+  EntityGitlabMergeRequestStatsCard, 
+  EntityGitlabPipelinesTable 
+} from '@loblaw/backstage-plugin-gitlab';
+
+//Farther down at the overviewContent declaration
+//Depends on user's need the individual card can be added or removed from the Grid item.
+  const overviewContent = (
+  <Grid container spacing={3} alignItems="stretch">
+    <EntitySwitch>
+      <EntitySwitch.Case if={isGitlabAvailable}>
+        <Grid item md={6}>
+          <EntityGitlabContributorsCard />
+          <EntityGitlabLanguageCard />
+          <EntityGitlabMergeRequestStatsCard />
+          <EntityGitlabPipelinesTable />
+          <EntityGitlabMergeRequestsTable />
+        </Grid> 
+      </EntitySwitch.Case>
+    </EntitySwitch>
+  </Grid>
+);
 ```
 
-3. Add integration:
+4. Add integration:
 In `app-config.yaml` add the integration for gitlab:
 ```
 integrations:
@@ -60,7 +96,7 @@ integrations:
       token: ${GITLAB_TOKEN}
 ```
 
-4. Add proxy config:
+5. Add proxy config:
 
 ```
   '/gitlabci':

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@loblaw/backstage-plugin-gitlab",
-  "version": "0.1.20",
+  "version": "0.1.21",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "license": "Apache-2.0",

diff --git a/src/index.ts b/src/index.ts
@@ -1,2 +1,11 @@
-export { gitlabPlugin, EntityGitlabContent } from './plugin';
-export { isGitlabAvailable } from './Router';
+export { 
+    gitlabPlugin,
+    EntityGitlabContent,
+    EntityGitlabLanguageCard,
+    EntityGitlabContributorsCard,
+    EntityGitlabMergeRequestsTable,
+    EntityGitlabMergeRequestStatsCard,
+    EntityGitlabPipelinesTable,
+} from './plugin';
+
+export { isGitlabAvailable } from './Router';
diff --git a/src/plugin.ts b/src/plugin.ts
@@ -1,4 +1,7 @@
-import { createPlugin, createRoutableExtension } from '@backstage/core-plugin-api';
+import { createPlugin, 
+  createRoutableExtension,
+  createComponentExtension,
+ } from '@backstage/core-plugin-api';
 
 import {
   configApiRef,
@@ -34,3 +37,53 @@ export const EntityGitlabContent = gitlabPlugin.provide(
     mountPoint: rootRouteRef,
   }),
 );
+
+export const EntityGitlabLanguageCard = gitlabPlugin.provide(
+  createComponentExtension({
+    name: 'EntityGitlabLanguageCard',
+    component: {
+      lazy: () =>
+        import('./components/widgets/index').then((m) => m.LanguagesCard),
+    },
+  })
+);
+
+export const EntityGitlabContributorsCard = gitlabPlugin.provide(
+  createComponentExtension({
+    name: 'EntityGitlabContributorsCard',
+    component: {
+      lazy: () =>
+        import('./components/widgets/index').then((m) => m.ContributorsCard),
+    },
+  })
+);
+
+export const EntityGitlabMergeRequestsTable = gitlabPlugin.provide(
+  createComponentExtension({
+    name: 'EntityGitlabMergeRequestsTable',
+    component: {
+      lazy: () =>
+        import('./components/widgets/index').then((m) => m.MergeRequestsTable),
+    },
+  })
+);
+
+export const EntityGitlabMergeRequestStatsCard = gitlabPlugin.provide(
+  createComponentExtension({
+    name: 'EntityGitlabMergeRequestStatsCard',
+    component: {
+      lazy: () =>
+        import('./components/widgets/index').then((m) => m.MergeRequestStats),
+    },
+  })
+);
+
+export const EntityGitlabPipelinesTable = gitlabPlugin.provide(
+  createComponentExtension({
+    name: 'EntityGitlabPipelinesTable',
+    component: {
+      lazy: () =>
+        import('./components/widgets/index').then((m) => m.PipelinesTable),
+    },
+  })
+);