diff --git a/.changeset/warm-singers-relate.md b/.changeset/warm-singers-relate.md
new file mode 100644
index 00000000..7afec39e
--- /dev/null
+++ b/.changeset/warm-singers-relate.md
@@ -0,0 +1,7 @@
+---
+'@axis-backstage/plugin-vacation-calendar': minor
+'backend': minor
+'app': minor
+---
+
+Added new plugin for displaying out-of-office events in a react-calendar-timeline. Also added support for microsoft autentication.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 346f7153..24a41565 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,6 +1,13 @@
# Contributing to Axis Backstage plugins
-Contributions are welcome, and they are greatly appreciated! We really want to improve our plugins ✨
+Contributions are welcome and greatly appreciated! We are committed to improving our plugins ✨
+
+These contributing guidelines explain:
+
+- How to contribute effectively for optimal communication
+- The conventions we would like you to follow
+
+If you have any questions, please let us know!
## Code of Conduct
@@ -10,27 +17,43 @@ This project adheres to the [CNCF Code of Conduct][code-of-conduct]. By particip
## How can I contribute?
-We welcome anything from bugs fixes or new, implemented features. You can create your own Pull request. Once you've submitted a Pull Request (PR), tests will be run and we will have a look at your PR as soon as we can. If we have any comments or questions, we will do so in the PR.
+### 1. Create Issue
-You need approval from one of the core maintainers (in this case, the Backstage team at Axis). Once you have one approval it's ready to be merged, this task is also done by one of us.
+We welcome anything from bug fixes to new features. **Please start by creating an [issue in our repository](https://github.com/backstage/backstage/issues/new/choose)**. The Axis Backstage team will respond as soon as possible regarding:
-As a contributor, here are the guidelines we would like you to follow:
+- Whether this is an implementation we want in our main repository
+- If there are any points to discuss before implementing the feature
+- Who should implement the feature
+
+### 2. Create Pull Request
+
+#### Pull Request Best Practises
+
+Once the discussion in the issue is complete, you are welcome to create a Pull Request (PR). We follow [GitHub's best practices for creating pull Requests](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/getting-started/best-practices-for-pull-requests). Please review these guidelines if you are not familiar with them.
-- [Api-reports](#api-reports)
-- [Changesets](#changesets)
-- [Styling conventions](#styling-conventions)
+In addition, provide a clear title for your PR that explains the change.
+
+#### Pull Request Approval
+
+After submitting a PR, tests will run and the team will review it as soon as possible. If there are any comments or questions, we will communicate through the PR.
+
+You need approval from one of the core maintainers (the Axis Backstage team). Once you have approval, the PR is ready to be merged. **This task will also be done by one of us**.
+
+## Other contributing guidelines
+
+As a contributor, here are the guidelines we would like you to follow:
-## Api reports
+### Api reports
Similar to Backstage upstream, we use api reports generated by [API Extractor](https://api-extractor.com/) to help us build better TypeScript library packages. To learn more about api-reports and how to generate them, we refer to the [upstream documentation](https://github.com/backstage/backstage/blob/master/CONTRIBUTING.md#api-reports).
-## Changesets
+### Changesets
Just like Backstage upstream, we use [changesets](https://github.com/changesets/changesets) to help us prepare releases. By using changsets we can make sure that the process generating releases is easy, and that every change gets a proper version number.
If you wish to know more about the use of **changesets** in Backstage, please read the [official Backstage documentation about changesets](https://github.com/backstage/backstage/blob/master/CONTRIBUTING.md#creating-changesets).
-### How to create a changeset
+#### How to create a changeset
1. Run `yarn changeset` from the root of the repo
2. Select which packages you want to include a changeset for
diff --git a/app-config.yaml b/app-config.yaml
index e581e8f0..913cd1ee 100644
--- a/app-config.yaml
+++ b/app-config.yaml
@@ -72,7 +72,15 @@ techdocs:
auth:
# see https://backstage.io/docs/auth/ to learn about auth providers
- providers: {}
+ providers:
+ microsoft:
+ development:
+ clientId: ${AUTH_MICROSOFT_CLIENT_ID}
+ clientSecret: ${AUTH_MICROSOFT_CLIENT_SECRET}
+ tenantId: ${AUTH_MICROSOFT_TENANT_ID}
+ signIn:
+ resolvers:
+ - resolver: emailMatchingUserEntityProfileEmail
scaffolder:
# see https://backstage.io/docs/features/software-templates/configuration for software template options
diff --git a/examples/org.yaml b/examples/org.yaml
index a10e81fc..4f9b1bf6 100644
--- a/examples/org.yaml
+++ b/examples/org.yaml
@@ -7,6 +7,18 @@ metadata:
spec:
memberOf: [guests]
---
+apiVersion: backstage.io/v1alpha1
+kind: User
+metadata:
+ name: Sophie
+ description: Software Developer
+spec:
+ profile:
+ displayName: Sophie
+ email: sophie@mail.com
+ picture: https://api.dicebear.com/7.x/avataaars/svg?seed=Sophie
+ memberOf: [guests]
+---
# https://backstage.io/docs/features/software-catalog/descriptor-format#kind-group
apiVersion: backstage.io/v1alpha1
kind: Group
diff --git a/packages/app/package.json b/packages/app/package.json
index 57a45ee3..b61f8485 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -19,6 +19,7 @@
"@axis-backstage/plugin-jira-dashboard-common": "workspace:^",
"@axis-backstage/plugin-readme": "workspace:^",
"@axis-backstage/plugin-statuspage": "workspace:^",
+ "@axis-backstage/plugin-vacation-calendar": "^0.1.0",
"@backstage-community/plugin-github-actions": "^0.6.16",
"@backstage/app-defaults": "^1.5.5",
"@backstage/catalog-model": "^1.5.0",
diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx
index 776e1b49..f9756dcb 100644
--- a/packages/app/src/App.tsx
+++ b/packages/app/src/App.tsx
@@ -26,15 +26,37 @@ import { entityPage } from './components/catalog/EntityPage';
import { searchPage } from './components/search/SearchPage';
import { Root } from './components/Root';
-import { AlertDisplay, OAuthRequestDialog } from '@backstage/core-components';
+import {
+ AlertDisplay,
+ OAuthRequestDialog,
+ SignInPage,
+} from '@backstage/core-components';
import { createApp } from '@backstage/app-defaults';
import { AppRouter, FlatRoutes } from '@backstage/core-app-api';
import { CatalogGraphPage } from '@backstage/plugin-catalog-graph';
import { RequirePermission } from '@backstage/plugin-permission-react';
import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common/alpha';
import { StatuspagePage } from '@axis-backstage/plugin-statuspage';
+import { VacationCalendarPage } from '@axis-backstage/plugin-vacation-calendar';
+import { microsoftAuthApiRef } from '@backstage/core-plugin-api';
const app = createApp({
+ components: {
+ SignInPage: props => (
+
+ ),
+ },
apis,
bindRoutes({ bind }) {
bind(catalogPlugin.externalRoutes, {
@@ -90,6 +112,7 @@ const routes = (
} />
} />
} />
+ } />
);
diff --git a/packages/app/src/apis.ts b/packages/app/src/apis.ts
index 96847f1f..c8a966de 100644
--- a/packages/app/src/apis.ts
+++ b/packages/app/src/apis.ts
@@ -10,12 +10,17 @@ import {
createApiFactory,
discoveryApiRef,
fetchApiRef,
+ microsoftAuthApiRef,
} from '@backstage/core-plugin-api';
import { UmamiAnalytics } from '@axis-backstage/plugin-analytics-module-umami';
import {
StatuspageClient,
statuspageApiRef,
} from '@axis-backstage/plugin-statuspage';
+import {
+ vacationCalendarApiRef,
+ VacationCalendarApiClient,
+} from '@axis-backstage/plugin-vacation-calendar';
export const apis: AnyApiFactory[] = [
createApiFactory({
@@ -41,5 +46,14 @@ export const apis: AnyApiFactory[] = [
factory: ({ discoveryApi, fetchApi }) =>
new StatuspageClient({ discoveryApi, fetchApi }),
}),
+ createApiFactory({
+ api: vacationCalendarApiRef,
+ deps: {
+ authApi: microsoftAuthApiRef,
+ fetchApi: fetchApiRef,
+ },
+ factory: ({ authApi, fetchApi }) =>
+ new VacationCalendarApiClient({ authApi, fetchApi }),
+ }),
ScmAuth.createDefaultApiFactory(),
];
diff --git a/packages/app/src/components/catalog/EntityPage.tsx b/packages/app/src/components/catalog/EntityPage.tsx
index 57657e81..b84f6b7d 100644
--- a/packages/app/src/components/catalog/EntityPage.tsx
+++ b/packages/app/src/components/catalog/EntityPage.tsx
@@ -61,6 +61,7 @@ import {
isStatuspageAvailable,
StatuspageEntityCard,
} from '@axis-backstage/plugin-statuspage';
+import { VacationCalendarPage } from '@axis-backstage/plugin-vacation-calendar';
const techdocsContent = (
@@ -280,6 +281,11 @@ const userPage = (
+
+
+
+
+
);
@@ -299,6 +305,11 @@ const groupPage = (
+
+
+
+
+
);
diff --git a/packages/backend/package.json b/packages/backend/package.json
index 1287eade..9c2ca0ec 100644
--- a/packages/backend/package.json
+++ b/packages/backend/package.json
@@ -28,6 +28,7 @@
"@backstage/config": "^1.2.0",
"@backstage/plugin-app-backend": "^0.3.67",
"@backstage/plugin-auth-backend": "^0.22.5",
+ "@backstage/plugin-auth-backend-module-microsoft-provider": "^0.1.13",
"@backstage/plugin-auth-node": "^0.4.13",
"@backstage/plugin-catalog-backend": "^1.22.0",
"@backstage/plugin-permission-common": "^0.7.13",
diff --git a/packages/backend/src/index.ts b/packages/backend/src/index.ts
index 3191e815..75dcb747 100644
--- a/packages/backend/src/index.ts
+++ b/packages/backend/src/index.ts
@@ -4,6 +4,7 @@ const backend = createBackend();
backend.add(import('@backstage/plugin-catalog-backend/alpha'));
backend.add(import('@backstage/plugin-scaffolder-backend/alpha'));
backend.add(import('@backstage/plugin-auth-backend'));
+backend.add(import('@backstage/plugin-auth-backend-module-microsoft-provider'));
backend.add(import('@backstage/plugin-proxy-backend/alpha'));
backend.add(import('@backstage/plugin-techdocs-backend/alpha'));
backend.add(import('@backstage/plugin-search-backend/alpha'));
diff --git a/packages/backend/src/plugins/auth.ts b/packages/backend/src/plugins/auth.ts
index 77eb6aae..47f5c501 100644
--- a/packages/backend/src/plugins/auth.ts
+++ b/packages/backend/src/plugins/auth.ts
@@ -49,6 +49,19 @@ export default async function createPlugin(
// resolver: providers.github.resolvers.usernameMatchingUserEntityName(),
},
}),
+ microsoft: providers.microsoft.create({
+ signIn: {
+ resolver(_, ctx) {
+ const userRef = 'user:default/guest'; // Must be a full entity reference
+ return ctx.issueToken({
+ claims: {
+ sub: userRef, // The user's own identity
+ ent: [userRef], // A list of identities that the user claims ownership through
+ },
+ });
+ },
+ },
+ }),
},
});
}
diff --git a/plugins/vacation-calendar/.eslintrc.js b/plugins/vacation-calendar/.eslintrc.js
new file mode 100644
index 00000000..e2a53a6a
--- /dev/null
+++ b/plugins/vacation-calendar/.eslintrc.js
@@ -0,0 +1 @@
+module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);
diff --git a/plugins/vacation-calendar/README.md b/plugins/vacation-calendar/README.md
new file mode 100644
index 00000000..26580aea
--- /dev/null
+++ b/plugins/vacation-calendar/README.md
@@ -0,0 +1,110 @@
+# Vacation Calendar plugin
+
+Welcome to the Vacation Calendar plugin!
+
+
+
+
+## Introduction
+
+The Vacation Calendar plugin allows you to get a comprehensive overview of your colleagues' vacations and out-of-office events. Clearly see when your vacations overlap or which team members will be present on specific occasions, making your life and teamwork easier and more efficient.
+
+Our plugin is based on [Microsoft-Calendar Plugin](https://github.com/backstage/community-plugins/tree/main/workspaces/microsoft-calendar/plugins/microsoft-calendar) with modifications for focusing on multiple users' calendars. Full credit to them for their great plugin!
+
+## How it works
+
+The plugin interacts with the Microsoft Graph API to fetch users' calendars and schedule items. Mark your events as Out of Office in either the Outlook client or the Teams client. By marking your events as "Out of Office," they will be correctly reflected in the Vacation Calendar plugin, providing an accurate overview of your availability.
+
+## Autentication
+
+The Vacation Calendar plugin requires Microsoft authentication. If you have not set this up, please follow the upstream guide on Microsoft authentication: [Backstage.io Microsoft Authentication Guide](https://backstage.io/docs/auth/microsoft/provider/).
+
+At present, the plugin supports only Microsoft authentication and does not integrate with other Backstage authentication methods. If you need the plugin to support a different authentication method, please create an issue so we can discuss your requirements.
+
+## Getting started
+
+1. First, install the plugin into your app:
+
+```bash
+# From your Backstage root directory
+yarn --cwd packages/app add @axis-backstage/plugin-vacation-calendar
+```
+
+2. Setup the API-factory.
+
+```ts
+// packages/app/src/apis.ts:
+
+createApiFactory({
+ api: vacationCalendarApiRef,
+ deps: {
+ authApi: microsoftAuthApiRef,
+ fetchApi: fetchApiRef,
+ },
+ factory: ({ authApi, fetchApi }) =>
+ new VacationCalendarApiClient({ authApi, fetchApi }),
+ }),
+
+```
+
+3. Modify your entity page to include the `VacationCalendarPage` component:
+
+```tsx
+// In packages/app/src/components/catalog/EntityPage.tsx
+import { VacationCalendarPage } from '@axis-backstage/plugin-vacation-calendar';
+
+const groupPage = (
+
+
+
+
+
+
+
+);
+```
+
+By doing this, all Backstage users who are part of that group will be displayed in the `Out of Office` tab on the group's entity page.
+
+## Integration with the Catalog
+
+To fetch all colleagues with the same manager for a user entity, add the manager annotation to the entity's **catalog-info.yaml** file:
+
+```yaml
+apiVersion: backstage.io/v1alpha1
+kind: User
+metadata:
+ # ...
+ annotations:
+ manager: value # The Backstage username of the mananger
+```
+
+If the manager annotation is set, you can display all users with the same manager for a user entity. To do this, add the `VacationCalendarPage` component to the entity page for users:
+
+```tsx
+// In packages/app/src/components/catalog/EntityPage.tsx
+import { VacationCalendarPage } from '@axis-backstage/plugin-vacation-calendar';
+
+const userPage = (
+
+
+
+
+
+
+
+);
+```
+
+## Development
+
+The plugin has been added to the example app in this repository, meaning you'll be able to access it by running `yarn start` in the root directory, and then navigating to [/vacation-calendar](http://localhost:3000/vacation-calendar).
+
+You can also serve the plugin in isolation by running `yarn start` in the plugin directory.
+This method of serving the plugin provides quicker iteration speed and a faster startup and hot reloads.
+It is only meant for local development, and the setup for it can be found inside the [/dev](./dev) directory.
+
+## Screenshots
+
+
+
diff --git a/plugins/vacation-calendar/api-report.md b/plugins/vacation-calendar/api-report.md
new file mode 100644
index 00000000..22c586b1
--- /dev/null
+++ b/plugins/vacation-calendar/api-report.md
@@ -0,0 +1,62 @@
+## API Report File for "@axis-backstage/plugin-vacation-calendar"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+///
+
+import { ApiRef } from '@backstage/core-plugin-api';
+import { BackstagePlugin } from '@backstage/core-plugin-api';
+import { Calendar } from '@microsoft/microsoft-graph-types';
+import { FetchApi } from '@backstage/core-plugin-api';
+import { JSX as JSX_2 } from 'react';
+import { OAuthApi } from '@backstage/core-plugin-api';
+import { RouteRef } from '@backstage/core-plugin-api';
+import { ScheduleInformation } from '@microsoft/microsoft-graph-types';
+
+// @public
+export interface VacationCalendarApi {
+ getAvailability(
+ params: {
+ users: string[];
+ startDateTime: string;
+ endDateTime: string;
+ },
+ headers: {
+ [x: string]: any;
+ },
+ ): Promise;
+ getCalendars(): Promise;
+}
+
+// @public
+export class VacationCalendarApiClient {
+ constructor(options: { authApi: OAuthApi; fetchApi: FetchApi });
+ getAvailability(
+ params: {
+ users: string[];
+ startDateTime: string;
+ endDateTime: string;
+ },
+ headers: {
+ [key in string]: any;
+ },
+ ): Promise;
+ getCalendars(): Promise;
+}
+
+// @public
+export const vacationCalendarApiRef: ApiRef;
+
+// @public
+export const VacationCalendarPage: () => JSX_2.Element;
+
+// @public
+export const vacationCalendarPlugin: BackstagePlugin<
+ {
+ root: RouteRef;
+ },
+ {},
+ {}
+>;
+```
diff --git a/plugins/vacation-calendar/dev/__fixtures__/availability.json b/plugins/vacation-calendar/dev/__fixtures__/availability.json
new file mode 100644
index 00000000..e4bedfdb
--- /dev/null
+++ b/plugins/vacation-calendar/dev/__fixtures__/availability.json
@@ -0,0 +1,278 @@
+[
+ {
+ "availabilityView": "String",
+ "error": { "@odata.type": "microsoft.graph.freeBusyError" },
+ "scheduleId": "sophie",
+ "scheduleItems": [
+ {
+ "isPrivate": false,
+ "status": "oof",
+ "subject": "Vacation",
+ "location": "Proj: Mini",
+ "isMeeting": true,
+ "isRecurring": true,
+ "isException": false,
+ "isReminderSet": true,
+ "start": {
+ "dateTime": "2024-02-05T13:00:00.0000000",
+ "timeZone": "W. Europe Standard Time"
+ },
+ "end": {
+ "dateTime": "2024-02-08T13:15:00.0000000",
+ "timeZone": "W. Europe Standard Time"
+ }
+ },
+ {
+ "isPrivate": false,
+ "status": "oof",
+ "subject": "Vacation",
+ "location": "Proj: Mini (4 pers, NE) (Lund, SE)",
+ "isMeeting": true,
+ "isRecurring": true,
+ "isException": false,
+ "isReminderSet": true,
+ "start": {
+ "dateTime": "2024-09-05T13:00:00.0000000",
+ "timeZone": "W. Europe Standard Time"
+ },
+ "end": {
+ "dateTime": "2024-09-10T13:15:00.0000000",
+ "timeZone": "W. Europe Standard Time"
+ }
+ },
+ {
+ "isPrivate": true,
+ "status": "oof",
+ "subject": "Vacation",
+ "location": "",
+ "isMeeting": false,
+ "isRecurring": true,
+ "isException": false,
+ "isReminderSet": true,
+ "start": {
+ "dateTime": "2024-11-12T08:30:00.0000000",
+ "timeZone": "W. Europe Standard Time"
+ },
+ "end": {
+ "dateTime": "2024-11-30T09:00:00.0000000",
+ "timeZone": "W. Europe Standard Time"
+ }
+ },
+ {
+ "isPrivate": true,
+ "status": "oof",
+ "subject": "Vacation",
+ "location": "",
+ "isMeeting": false,
+ "isRecurring": true,
+ "isException": false,
+ "isReminderSet": true,
+ "start": {
+ "dateTime": "2024-04-10T08:30:00.0000000",
+ "timeZone": "W. Europe Standard Time"
+ },
+ "end": {
+ "dateTime": "2024-04-20T09:00:00.0000000",
+ "timeZone": "W. Europe Standard Time"
+ }
+ }
+ ],
+ "workingHours": {
+ "daysOfWeek": ["monday", "tuesday", "wednesday", "thursday", "friday"],
+ "startTime": "08:00:00.0000000",
+ "endTime": "17:00:00.0000000",
+ "timeZone": {
+ "name": "W. Europe Standard Time"
+ }
+ }
+ },
+ {
+ "availabilityView": "String",
+ "error": { "@odata.type": "microsoft.graph.freeBusyError" },
+ "scheduleId": "rascal",
+ "scheduleItems": [
+ {
+ "isPrivate": false,
+ "status": "oof",
+ "subject": "Vacation",
+ "location": "Proj: Mini (4 pers, NE) (Lund, SE)",
+ "isMeeting": true,
+ "isRecurring": true,
+ "isException": false,
+ "isReminderSet": true,
+ "start": {
+ "dateTime": "2024-03-05T13:00:00.0000000",
+ "timeZone": "W. Europe Standard Time"
+ },
+ "end": {
+ "dateTime": "2024-03-10T13:15:00.0000000",
+ "timeZone": "W. Europe Standard Time"
+ }
+ },
+ {
+ "isPrivate": true,
+ "status": "oof",
+ "subject": "Vacation",
+ "location": "",
+ "isMeeting": false,
+ "isRecurring": true,
+ "isException": false,
+ "isReminderSet": true,
+ "start": {
+ "dateTime": "2024-05-12T08:30:00.0000000",
+ "timeZone": "W. Europe Standard Time"
+ },
+ "end": {
+ "dateTime": "2024-05-30T09:00:00.0000000",
+ "timeZone": "W. Europe Standard Time"
+ }
+ },
+ {
+ "isPrivate": true,
+ "status": "oof",
+ "subject": "Vacation",
+ "location": "",
+ "isMeeting": false,
+ "isRecurring": true,
+ "isException": false,
+ "isReminderSet": true,
+ "start": {
+ "dateTime": "2024-11-05T08:30:00.0000000",
+ "timeZone": "W. Europe Standard Time"
+ },
+ "end": {
+ "dateTime": "2024-11-10T09:00:00.0000000",
+ "timeZone": "W. Europe Standard Time"
+ }
+ }
+ ],
+ "workingHours": {
+ "daysOfWeek": ["monday", "tuesday", "wednesday", "thursday", "friday"],
+ "startTime": "08:00:00.0000000",
+ "endTime": "17:00:00.0000000",
+ "timeZone": {
+ "name": "W. Europe Standard Time"
+ }
+ }
+ },
+ {
+ "availabilityView": "String",
+ "error": { "@odata.type": "microsoft.graph.freeBusyError" },
+ "scheduleId": "buster",
+ "scheduleItems": [
+ {
+ "isPrivate": false,
+ "status": "oof",
+ "subject": "Vacation",
+ "location": "Proj: Mini (4 pers, NE) (Lund, SE)",
+ "isMeeting": true,
+ "isRecurring": true,
+ "isException": false,
+ "isReminderSet": true,
+ "start": {
+ "dateTime": "2024-06-05T13:00:00.0000000",
+ "timeZone": "W. Europe Standard Time"
+ },
+ "end": {
+ "dateTime": "2024-06-10T13:15:00.0000000",
+ "timeZone": "W. Europe Standard Time"
+ }
+ },
+ {
+ "isPrivate": true,
+ "status": "oof",
+ "subject": "Vacation",
+ "location": "",
+ "isMeeting": false,
+ "isRecurring": true,
+ "isException": false,
+ "isReminderSet": true,
+ "start": {
+ "dateTime": "2024-08-12T08:30:00.0000000",
+ "timeZone": "W. Europe Standard Time"
+ },
+ "end": {
+ "dateTime": "2024-08-30T09:00:00.0000000",
+ "timeZone": "W. Europe Standard Time"
+ }
+ }
+ ],
+ "workingHours": {
+ "daysOfWeek": ["monday", "tuesday", "wednesday", "thursday", "friday"],
+ "startTime": "08:00:00.0000000",
+ "endTime": "17:00:00.0000000",
+ "timeZone": {
+ "name": "W. Europe Standard Time"
+ }
+ }
+ },
+ {
+ "availabilityView": "String",
+ "error": { "@odata.type": "microsoft.graph.freeBusyError" },
+ "scheduleId": "jasmine",
+ "scheduleItems": [
+ {
+ "isPrivate": false,
+ "status": "oof",
+ "subject": "Vacation",
+ "location": "Proj: Mini (4 pers, NE) (Lund, SE)",
+ "isMeeting": true,
+ "isRecurring": true,
+ "isException": false,
+ "isReminderSet": true,
+ "start": {
+ "dateTime": "2024-09-05T13:00:00.0000000",
+ "timeZone": "W. Europe Standard Time"
+ },
+ "end": {
+ "dateTime": "2024-09-10T13:15:00.0000000",
+ "timeZone": "W. Europe Standard Time"
+ }
+ },
+ {
+ "isPrivate": true,
+ "status": "oof",
+ "subject": "Vacation",
+ "location": "",
+ "isMeeting": false,
+ "isRecurring": true,
+ "isException": false,
+ "isReminderSet": true,
+ "start": {
+ "dateTime": "2024-04-12T08:30:00.0000000",
+ "timeZone": "W. Europe Standard Time"
+ },
+ "end": {
+ "dateTime": "2024-04-16T09:00:00.0000000",
+ "timeZone": "W. Europe Standard Time"
+ }
+ },
+ {
+ "isPrivate": true,
+ "status": "oof",
+ "subject": "Vacation",
+ "location": "",
+ "isMeeting": false,
+ "isRecurring": true,
+ "isException": false,
+ "isReminderSet": true,
+ "start": {
+ "dateTime": "2024-11-12T08:30:00.0000000",
+ "timeZone": "W. Europe Standard Time"
+ },
+ "end": {
+ "dateTime": "2024-11-25T09:00:00.0000000",
+ "timeZone": "W. Europe Standard Time"
+ }
+ }
+ ],
+ "workingHours": {
+ "daysOfWeek": ["monday", "tuesday", "wednesday", "thursday", "friday"],
+ "startTime": "08:00:00.0000000",
+ "endTime": "17:00:00.0000000",
+ "timeZone": {
+ "name": "W. Europe Standard Time"
+ }
+ }
+ }
+]
diff --git a/plugins/vacation-calendar/dev/__fixtures__/mockEntities.json b/plugins/vacation-calendar/dev/__fixtures__/mockEntities.json
new file mode 100644
index 00000000..22007e14
--- /dev/null
+++ b/plugins/vacation-calendar/dev/__fixtures__/mockEntities.json
@@ -0,0 +1,82 @@
+[
+ {
+ "apiVersion": "backstage.io/v1beta1",
+ "kind": "User",
+ "metadata": {
+ "namespace": "default",
+ "annotations": {
+ "manager": "bossman"
+ },
+ "name": "sophie",
+ "description": "Software developer"
+ },
+ "spec": {
+ "profile": {
+ "displayName": "Sophie",
+ "email": "sophie@mail.com",
+ "picture": "https://api.dicebear.com/7.x/avataaars/svg?seed=Sophie"
+ },
+ "memberOf": ["group:default/backstage"]
+ }
+ },
+ {
+ "apiVersion": "backstage.io/v1beta1",
+ "kind": "User",
+ "metadata": {
+ "namespace": "default",
+ "annotations": {
+ "manager": "bossman"
+ },
+ "name": "rascal",
+ "description": "Expert Engineer"
+ },
+ "spec": {
+ "profile": {
+ "displayName": "Rascal",
+ "email": "rascal@mail.com",
+ "picture": "https://api.dicebear.com/7.x/avataaars/svg?seed=Rascal"
+ },
+ "memberOf": ["group:default/backstage"]
+ }
+ },
+ {
+ "apiVersion": "backstage.io/v1beta1",
+ "kind": "User",
+ "metadata": {
+ "namespace": "default",
+ "annotations": {
+ "manager": "bossman"
+ },
+ "name": "buster",
+ "description": "Expert Engineer"
+ },
+ "spec": {
+ "profile": {
+ "displayName": "Buster",
+ "email": "buster@mail.com",
+ "picture": "https://api.dicebear.com/7.x/avataaars/svg?seed=Buster"
+ },
+ "memberOf": ["group:default/backstage"]
+ }
+ },
+ {
+ "apiVersion": "backstage.io/v1beta1",
+ "kind": "User",
+ "metadata": {
+ "namespace": "default",
+ "annotations": {
+ "manager": "bossman"
+ },
+ "name": "jasmine",
+ "description": "Expert Engineer"
+ },
+ "spec": {
+ "profile": {
+ "displayName": "Jasmine",
+ "email": "jasmine@mail.com",
+ "picture": "https://api.dicebear.com/7.x/avataaars/svg?seed=Jasmine"
+ },
+ "memberOf": ["group:default/backstage"]
+ }
+ }
+]
diff --git a/plugins/vacation-calendar/dev/__fixtures__/mockEntity.json b/plugins/vacation-calendar/dev/__fixtures__/mockEntity.json
new file mode 100644
index 00000000..4b262dfe
--- /dev/null
+++ b/plugins/vacation-calendar/dev/__fixtures__/mockEntity.json
@@ -0,0 +1,20 @@
+{
+ "apiVersion": "backstage.io/v1beta1",
+ "kind": "User",
+ "metadata": {
+ "namespace": "default",
+ "annotations": {
+ "manager": "bossman"
+ },
+ "name": "sophie",
+ "description": "Software developer"
+ },
+ "spec": {
+ "profile": {
+ "displayName": "Sophie",
+ "email": "sophie@mail.com",
+ "picture": "https://api.dicebear.com/7.x/avataaars/svg?seed=Sophie"
+ },
+ "memberOf": ["group:default/backstage"]
+ }
+}
diff --git a/plugins/vacation-calendar/dev/__fixtures__/mockVacationCalendarApi.ts b/plugins/vacation-calendar/dev/__fixtures__/mockVacationCalendarApi.ts
new file mode 100644
index 00000000..e1e1d3bd
--- /dev/null
+++ b/plugins/vacation-calendar/dev/__fixtures__/mockVacationCalendarApi.ts
@@ -0,0 +1,13 @@
+import schedule from './schedule.json';
+import availability from './availability.json';
+import { ScheduleInformation, MicrosoftCalendar } from '../../src/api/types';
+import { VacationCalendarApi } from '../../src/api';
+
+export const mockVacationCalendarApi: VacationCalendarApi = {
+ async getCalendars() {
+ return Promise.resolve(schedule as MicrosoftCalendar[]);
+ },
+ async getAvailability() {
+ return Promise.resolve(availability as ScheduleInformation[]);
+ },
+};
diff --git a/plugins/vacation-calendar/dev/__fixtures__/schedule.json b/plugins/vacation-calendar/dev/__fixtures__/schedule.json
new file mode 100644
index 00000000..895bced8
--- /dev/null
+++ b/plugins/vacation-calendar/dev/__fixtures__/schedule.json
@@ -0,0 +1,23 @@
+[
+ {
+ "@odata.context": "https://graph.microsoft.com/v1.0/$metadata#me/calendars/$entity",
+ "@odata.id": "https://graph.microsoft.com/v1.0/users('ddfcd489-628b-40d7-b48b-57002df800e5@1717622f-1d94-4d0c-9d74-709fad664b77')/calendars('AAMkAGI2TGuLAAA=')",
+ "id": "AAMkAGI2TGuLAAA=",
+ "name": "Calendar",
+ "color": "auto",
+ "isDefaultCalendar": false,
+ "changeKey": "nfZyf7VcrEKLNoU37KWlkQAAA0x0+w==",
+ "canShare": true,
+ "canViewPrivateItems": true,
+ "hexColor": "",
+ "canEdit": true,
+ "allowedOnlineMeetingProviders": ["teamsForBusiness"],
+ "defaultOnlineMeetingProvider": "teamsForBusiness",
+ "isTallyingResponses": true,
+ "isRemovable": false,
+ "owner": {
+ "name": "Sophie",
+ "address": "sophie@adatum.onmicrosoft.com"
+ }
+ }
+]
diff --git a/plugins/vacation-calendar/dev/index.tsx b/plugins/vacation-calendar/dev/index.tsx
new file mode 100644
index 00000000..5d26dfa9
--- /dev/null
+++ b/plugins/vacation-calendar/dev/index.tsx
@@ -0,0 +1,55 @@
+import { createDevApp } from '@backstage/dev-utils';
+import {
+ CatalogApi,
+ catalogApiRef,
+ EntityProvider,
+} from '@backstage/plugin-catalog-react';
+import React from 'react';
+import { vacationCalendarPlugin } from '../src/plugin';
+import { fetchApiRef, microsoftAuthApiRef } from '@backstage/core-plugin-api';
+import { GetEntitiesResponse } from '@backstage/catalog-client';
+import { UserEntity } from '@backstage/catalog-model';
+import { VacationCalendarPage } from '@axis-backstage/plugin-vacation-calendar';
+import mockEntity from './__fixtures__/mockEntity.json';
+import mockEntities from './__fixtures__/mockEntities.json';
+import { vacationCalendarApiRef } from '../src/api';
+import { mockVacationCalendarApi } from './__fixtures__/mockVacationCalendarApi';
+
+const catalogApi: Partial = {
+ async getEntities(): Promise {
+ return { items: mockEntities as UserEntity[] };
+ },
+};
+
+createDevApp()
+ .registerPlugin(vacationCalendarPlugin)
+ .registerApi({
+ api: vacationCalendarApiRef,
+ deps: { fetchApi: fetchApiRef },
+ factory: () => mockVacationCalendarApi,
+ })
+ .registerApi({
+ api: microsoftAuthApiRef,
+ deps: {},
+ factory: () =>
+ ({
+ async getAccessToken() {
+ return Promise.resolve('token');
+ },
+ } as unknown as typeof microsoftAuthApiRef.T),
+ })
+ .registerApi({
+ api: catalogApiRef,
+ deps: {},
+ factory: () => catalogApi as CatalogApi,
+ })
+ .addPage({
+ element: (
+
+
+
+ ),
+ title: 'Root Page',
+ path: '/vacation-calender',
+ })
+ .render();
diff --git a/plugins/vacation-calendar/media/month-dark.png b/plugins/vacation-calendar/media/month-dark.png
new file mode 100644
index 00000000..cbf5c78f
Binary files /dev/null and b/plugins/vacation-calendar/media/month-dark.png differ
diff --git a/plugins/vacation-calendar/media/month-light.png b/plugins/vacation-calendar/media/month-light.png
new file mode 100644
index 00000000..0d209fe3
Binary files /dev/null and b/plugins/vacation-calendar/media/month-light.png differ
diff --git a/plugins/vacation-calendar/media/year-dark.png b/plugins/vacation-calendar/media/year-dark.png
new file mode 100644
index 00000000..fb03afb3
Binary files /dev/null and b/plugins/vacation-calendar/media/year-dark.png differ
diff --git a/plugins/vacation-calendar/media/year-light.png b/plugins/vacation-calendar/media/year-light.png
new file mode 100644
index 00000000..7e94dd18
Binary files /dev/null and b/plugins/vacation-calendar/media/year-light.png differ
diff --git a/plugins/vacation-calendar/package.json b/plugins/vacation-calendar/package.json
new file mode 100644
index 00000000..9598f2c4
--- /dev/null
+++ b/plugins/vacation-calendar/package.json
@@ -0,0 +1,65 @@
+{
+ "name": "@axis-backstage/plugin-vacation-calendar",
+ "version": "0.1.0",
+ "main": "src/index.ts",
+ "types": "src/index.ts",
+ "license": "Apache-2.0",
+ "private": true,
+ "publishConfig": {
+ "access": "public",
+ "main": "dist/index.esm.js",
+ "types": "dist/index.d.ts"
+ },
+ "backstage": {
+ "role": "frontend-plugin"
+ },
+ "sideEffects": false,
+ "scripts": {
+ "start": "backstage-cli package start",
+ "build": "backstage-cli package build",
+ "lint": "backstage-cli package lint",
+ "test": "backstage-cli package test",
+ "clean": "backstage-cli package clean",
+ "prepack": "backstage-cli package prepack",
+ "postpack": "backstage-cli package postpack"
+ },
+ "dependencies": {
+ "@backstage/catalog-model": "^1.5.0",
+ "@backstage/core-components": "^0.14.8",
+ "@backstage/core-plugin-api": "^1.9.3",
+ "@backstage/errors": "^1.2.4",
+ "@backstage/plugin-catalog-react": "^1.12.1",
+ "@backstage/theme": "^0.5.6",
+ "@date-io/luxon": "3.0.0",
+ "@material-ui/pickers": "^3.3.11",
+ "@microsoft/microsoft-graph-types": "^2.40.0",
+ "@mui/lab": "^5.0.0-alpha.170",
+ "@mui/material": "^5.15.20",
+ "@mui/x-date-pickers": "^7.7.0",
+ "@tanstack/react-query": "4.29.1",
+ "interactjs": "^1.10.27",
+ "lodash": "^4.17.21",
+ "luxon": "^3.4.4",
+ "react-calendar-timeline": "^0.28.0",
+ "react-use": "^17.5.0"
+ },
+ "peerDependencies": {
+ "react": "^16.13.1 || ^17.0.0 || ^18.0.0"
+ },
+ "devDependencies": {
+ "@backstage/catalog-client": "^1.6.5",
+ "@backstage/cli": "^0.26.7",
+ "@backstage/core-app-api": "^1.12.6",
+ "@backstage/dev-utils": "^1.0.33",
+ "@backstage/test-utils": "^1.5.6",
+ "@testing-library/jest-dom": "^5.10.1",
+ "@testing-library/react": "^16.0.0",
+ "@testing-library/user-event": "^14.5.2",
+ "@types/lodash": "^4.17.5",
+ "@types/luxon": "^3.4.2",
+ "@types/react-calendar-timeline": "^0.28.6"
+ },
+ "files": [
+ "dist"
+ ]
+}
diff --git a/plugins/vacation-calendar/src/api/VacationCalendarApi.ts b/plugins/vacation-calendar/src/api/VacationCalendarApi.ts
new file mode 100644
index 00000000..ed61bed8
--- /dev/null
+++ b/plugins/vacation-calendar/src/api/VacationCalendarApi.ts
@@ -0,0 +1,36 @@
+import { createApiRef } from '@backstage/core-plugin-api';
+import type { MicrosoftCalendar, ScheduleInformation } from './types';
+
+/**
+ * The apiref for the VacationCalendar plugin.
+ *
+ * @public
+ */
+export const vacationCalendarApiRef = createApiRef({
+ id: 'plugin.vacation-calendar.service',
+});
+
+/**
+ * The definition for the VacationCalendar api.
+ *
+ * @public
+ */
+export interface VacationCalendarApi {
+ /**
+ * Fetches schedule items for users
+ */
+ getCalendars(): Promise;
+ /**
+ * Fetches Microsoft calendars
+ */
+ getAvailability(
+ params: {
+ users: string[];
+ startDateTime: string;
+ endDateTime: string;
+ },
+ headers: {
+ [x: string]: any;
+ },
+ ): Promise;
+}
diff --git a/plugins/vacation-calendar/src/api/VacationCalendarClient.ts b/plugins/vacation-calendar/src/api/VacationCalendarClient.ts
new file mode 100644
index 00000000..7932bb9b
--- /dev/null
+++ b/plugins/vacation-calendar/src/api/VacationCalendarClient.ts
@@ -0,0 +1,142 @@
+import { OAuthApi, FetchApi } from '@backstage/core-plugin-api';
+import { ResponseError } from '@backstage/errors';
+import type { ScheduleInformation, MicrosoftCalendar } from './types';
+
+const getAvailabilityBody = ({
+ users,
+ startDateTime,
+ endDateTime,
+}: {
+ users: string[];
+ startDateTime: string;
+ endDateTime: string;
+}) => ({
+ Schedules: users,
+ StartTime: {
+ dateTime: startDateTime,
+ timeZone: 'Europe/Paris',
+ },
+ EndTime: {
+ dateTime: endDateTime,
+ timeZone: 'Europe/Paris',
+ },
+ availabilityViewInterval: '1440',
+});
+
+/**
+ * The client implementation for the frontend api.
+ *
+ * @public
+ */
+export class VacationCalendarApiClient {
+ private readonly authApi: OAuthApi;
+ private readonly fetchApi: FetchApi;
+
+ constructor(options: { authApi: OAuthApi; fetchApi: FetchApi }) {
+ this.authApi = options.authApi;
+ this.fetchApi = options.fetchApi;
+ }
+
+ private async get(
+ path: string,
+ params: { [key in string]: any } = {},
+ headers?: any,
+ ): Promise {
+ const query = new URLSearchParams(params);
+ const url = new URL(
+ `${path}?${query.toString()}`,
+ 'https://graph.microsoft.com',
+ );
+ const token = await this.authApi.getAccessToken();
+ let temp: any = {};
+
+ if (headers && typeof headers === 'object') {
+ temp = {
+ ...headers,
+ };
+ }
+
+ if (token) {
+ temp.Authorization = `Bearer ${token}`;
+ }
+
+ const response = await this.fetchApi.fetch(url.toString(), {
+ headers: temp,
+ });
+
+ if (!response.ok) {
+ throw await ResponseError.fromResponse(response);
+ }
+
+ return response.json() as Promise;
+ }
+
+ private async post(path: string, body: any, headers?: any): Promise {
+ const url = new URL(path, 'https://graph.microsoft.com');
+ const token = await this.authApi.getAccessToken();
+ let temp: any = {};
+
+ if (headers && typeof headers === 'object') {
+ temp = {
+ ...headers,
+ };
+ }
+
+ if (token) {
+ temp.Authorization = `Bearer ${token}`;
+ }
+ temp['Content-type'] = 'application/json';
+
+ const response = await this.fetchApi.fetch(url.toString(), {
+ method: 'POST',
+ headers: temp,
+ body: JSON.stringify(body),
+ });
+
+ if (!response.ok) {
+ throw await ResponseError.fromResponse(response);
+ }
+
+ return response.json() as Promise;
+ }
+
+ /**
+ * Fetches Microsoft calendars
+ *
+ * @returns the MicrosoftValendar objects
+ */
+ async getCalendars(): Promise {
+ const data = await this.get<{
+ id: string;
+ value: MicrosoftCalendar[];
+ }>('v1.0/me/calendars');
+ return data.value;
+ }
+
+ /**
+ * Fetches schedule items for users
+ *
+ * @param users - list of users
+ * @param startDateTime - string with start date
+ * @param endDateTime - string with end date
+ * @returns Microsoft ScheduleInformation items
+ */
+ async getAvailability(
+ params: {
+ users: string[];
+ startDateTime: string;
+ endDateTime: string;
+ },
+ headers: { [key in string]: any },
+ ): Promise {
+ const data = await this.post<{
+ id: string;
+ value: ScheduleInformation[];
+ }>(
+ `v1.0/me/calendar/getschedule`,
+ getAvailabilityBody({ ...params }),
+ headers,
+ );
+ return data.value;
+ }
+}
diff --git a/plugins/vacation-calendar/src/api/index.ts b/plugins/vacation-calendar/src/api/index.ts
new file mode 100644
index 00000000..78e947a6
--- /dev/null
+++ b/plugins/vacation-calendar/src/api/index.ts
@@ -0,0 +1,3 @@
+export type { VacationCalendarApi } from './VacationCalendarApi';
+export { vacationCalendarApiRef } from './VacationCalendarApi';
+export { VacationCalendarApiClient } from './VacationCalendarClient';
diff --git a/plugins/vacation-calendar/src/api/types.ts b/plugins/vacation-calendar/src/api/types.ts
new file mode 100644
index 00000000..23bac7ed
--- /dev/null
+++ b/plugins/vacation-calendar/src/api/types.ts
@@ -0,0 +1,6 @@
+import {
+ Calendar as MicrosoftCalendar,
+ ScheduleInformation,
+} from '@microsoft/microsoft-graph-types';
+
+export type { MicrosoftCalendar, ScheduleInformation };
diff --git a/plugins/vacation-calendar/src/components/CalendarCard/CalendarCard.tsx b/plugins/vacation-calendar/src/components/CalendarCard/CalendarCard.tsx
new file mode 100644
index 00000000..f414f2dc
--- /dev/null
+++ b/plugins/vacation-calendar/src/components/CalendarCard/CalendarCard.tsx
@@ -0,0 +1,269 @@
+import React, { ReactNode, useState } from 'react';
+import useAsync from 'react-use/lib/useAsync';
+import Timeline, {
+ TimelineHeaders,
+ SidebarHeader,
+ DateHeader,
+ IntervalRenderer,
+} from 'react-calendar-timeline';
+import { DateTime } from 'luxon';
+import { useApi } from '@backstage/core-plugin-api';
+import { useEntity, catalogApiRef } from '@backstage/plugin-catalog-react';
+import {
+ Content,
+ ContentHeader,
+ SupportButton,
+ Link,
+ ErrorPanel,
+ Progress,
+ Avatar,
+} from '@backstage/core-components';
+import { DateSelector } from '../DateSelector';
+import { getGroups, getScheduleItems } from './lib';
+import { fetchGroupEntities, fetchUserEntities } from './fetch';
+import { useAvailability } from '../../hooks/useAvailibility';
+import { useSignIn } from '../../hooks';
+import { SignInContent } from '../SignInContent';
+import MuiLink from '@mui/material/Link';
+import Button from '@mui/material/Button';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Stack from '@mui/material/Stack';
+
+import { Theme } from '@mui/material/styles';
+
+const DEFAULT_NUM_DAYS = 60;
+
+const IntervalDateHeader = (props?: IntervalRenderer