feat: add schedule name to on call list card

.github/workflows/ci.yml

@@ -12,8 +12,8 @@ jobs:
       - name: Use Node.js 14.x
         uses: actions/setup-node@v3
         with:
-          node-version: '14'
-          cache: 'yarn'
+          node-version: "14"
+          cache: "yarn"
 
       - run: yarn install
       - run: yarn clean
@@ -30,8 +30,8 @@ jobs:
       - name: Use Node.js 14.x
         uses: actions/setup-node@v3
         with:
-          node-version: '14'
-          cache: 'yarn'
+          node-version: "14"
+          cache: "yarn"
 
       - run: yarn install
       - run: yarn run tsc

catalog-info.yaml

@@ -5,11 +5,11 @@ metadata:
   description: |
     Backstage plugin to integrate Opsgenie.
   annotations:
-    github.com/project-slug: K-Phoen/backstage-plugin-opsgenie
+    github.com/project-slug: Essent/backstage-plugin-opsgenie
   tags:
     - plugin
     - oss
 spec:
   type: library
-  owner: user:K-Phoen
+  owner: user:Essent
   lifecycle: experimental

docs/alerts-on-component-page.md

@@ -8,7 +8,7 @@ Adding the `EntityOpsgenieAlertsCard` component to an entity's page will display
 import {
   EntityOpsgenieAlertsCard,
   isOpsgenieAvailable
-} from '@k-phoen/backstage-plugin-opsgenie';
+} from '@essent/backstage-plugin-opsgenie';
 
 // ...
 

docs/setup.md

@@ -3,7 +3,7 @@
 Add the plugin to your frontend app:
 
 ```bash
-cd packages/app && yarn add @k-phoen/backstage-plugin-opsgenie
+cd packages/app && yarn add @essent/backstage-plugin-opsgenie
 ```
 
 Configure the plugin in `app-config.yaml`. The proxy endpoint described below will allow the frontend
@@ -28,7 +28,7 @@ Expose the Opsgenie page:
 
 ```ts
 // packages/app/src/App.tsx
-import { OpsgeniePage } from '@k-phoen/backstage-plugin-opsgenie';
+import { OpsgeniePage } from '@essent/backstage-plugin-opsgenie';
 
 // ...
 

docs/who-is-on-call-on-component-page.md

@@ -8,7 +8,7 @@ Adding the `EntityOpsgenieOnCallListCard` component to an entity's page will dis
 import {
   EntityOpsgenieOnCallListCard,
   isOpsgenieOnCallListAvailable
-} from '@k-phoen/backstage-plugin-opsgenie';
+} from '@essent/backstage-plugin-opsgenie';
 
 // ...
 

package.json

@@ -1,16 +1,16 @@
 {
-  "name": "@k-phoen/backstage-plugin-opsgenie",
+  "name": "@essent/backstage-plugin-opsgenie",
   "version": "0.6.6",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "license": "MIT",
-  "homepage": "https://github.com/K-Phoen/backstage-plugin-opsgenie",
+  "homepage": "https://github.com/Essent/backstage-plugin-opsgenie",
   "bugs": {
-    "url": "https://github.com/K-Phoen/backstage-plugin-opsgenie/issues"
+    "url": "https://github.com/Essent/backstage-plugin-opsgenie/issues"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/K-Phoen/backstage-plugin-opsgenie.git"
+    "url": "https://github.com/Essent/backstage-plugin-opsgenie.git"
   },
   "publishConfig": {
     "access": "public",

src/components/OnCallList/OnCallList.tsx

@@ -81,23 +81,40 @@ export const OnCallForScheduleList = ({ schedule, responderFormatter }: OnCallFo
           <ListItemIcon>
             <PersonIcon />
           </ListItemIcon>
-
+          
           <ListItemText primary={titleFormatter(responder, schedule)} />
         </ListItem>
       ))}
 
-      {value!.length === 0 && <ListItem><ListItemText primary={`⚠️ No one on-call for schedule "${schedule.name}".`} /></ListItem>}
+      {value!.length === 0 && (
+        <ListItem>
+          <ListItemText primary="⚠️ No one on-call for this schedule." />
+        </ListItem>
+      )}
     </List>
   );
 };
 
 export const OnCallForScheduleCard = ({ schedule, responderFormatter }: { schedule: Schedule, responderFormatter?: ResponderTitleFormatter }) => {
   const title = (
-    <div style={{ display: "flex" }}>
+    <div style={{ display: 'flex', flexDirection: 'column' }}>
+      <div style={{ display: 'flex', flexDirection: 'row' }}>
       <Tooltip title={schedule.enabled ? 'Enabled' : 'Disabled'}>
         <div>{schedule.enabled ? <StatusOK /> : <StatusAborted />}</div>
       </Tooltip>
       {schedule.ownerTeam.name}
+      </div>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          fontSize: '70%',
+          marginLeft: '1.25rem',
+        }}
+      >
+        {schedule.name}
+      </div>
     </div>
   );