From 5e7293f93e008bd8a37567ac285f85eb32cbfd36 Mon Sep 17 00:00:00 2001 From: Abhay-soni-developer Date: Tue, 7 Feb 2023 03:30:11 +0530 Subject: [PATCH] feedback changes incorporated Signed-off-by: Abhay-soni-developer --- .changeset/rotten-birds-build.md | 6 ++-- packages/app/src/components/home/HomePage.tsx | 4 +-- plugins/microsoft-calendar/api-report.md | 6 ++-- plugins/microsoft-calendar/dev/index.tsx | 4 +-- .../src/components/CalendarCard.tsx | 6 +--- .../src/components/CalendarEvent.tsx | 6 ++-- .../CalendarEventPopoverContent.tsx | 28 +++++++++---------- plugins/microsoft-calendar/src/index.ts | 2 +- plugins/microsoft-calendar/src/plugin.ts | 8 ++---- plugins/microsoft-calendar/src/routes.ts | 20 ------------- 10 files changed, 30 insertions(+), 60 deletions(-) delete mode 100644 plugins/microsoft-calendar/src/routes.ts diff --git a/.changeset/rotten-birds-build.md b/.changeset/rotten-birds-build.md index dba7504450..3a1de3768a 100644 --- a/.changeset/rotten-birds-build.md +++ b/.changeset/rotten-birds-build.md @@ -1,6 +1,6 @@ --- -'@backstage/plugin-microsoft-calendar': patch +'@backstage/plugin-microsoft-calendar': minor --- -created new plugin @backstage/plugin-microsoft-calendar and added it to plugins directory -updated example-app homepage to show microsoft-calendar widget. +Created a new Frontend plugin @backstage/plugin-microsoft-calendar and added it to plugins directory. +please refer to readme (readme.md)[./../plugins/microsoft-calendar/README.md] for step wise instruction to setup the plugin in your backstage frontend app. diff --git a/packages/app/src/components/home/HomePage.tsx b/packages/app/src/components/home/HomePage.tsx index b0491df93f..29023738af 100644 --- a/packages/app/src/components/home/HomePage.tsx +++ b/packages/app/src/components/home/HomePage.tsx @@ -27,7 +27,7 @@ import { import { Content, Header, Page } from '@backstage/core-components'; import { HomePageSearchBar } from '@backstage/plugin-search'; import { HomePageCalendar } from '@backstage/plugin-gcalendar'; -import { MicrosoftCalendar } from '@backstage/plugin-microsoft-calendar'; +import { MicrosoftCalendarCard } from '@backstage/plugin-microsoft-calendar'; import Grid from '@material-ui/core/Grid'; import React from 'react'; @@ -116,7 +116,7 @@ export const homePage = ( - + diff --git a/plugins/microsoft-calendar/api-report.md b/plugins/microsoft-calendar/api-report.md index 38187b39b2..a68b070c32 100644 --- a/plugins/microsoft-calendar/api-report.md +++ b/plugins/microsoft-calendar/api-report.md @@ -11,9 +11,6 @@ import { Event as Event_2 } from '@microsoft/microsoft-graph-types'; import { FetchApi } from '@backstage/core-plugin-api'; import { OAuthApi } from '@backstage/core-plugin-api'; -// @public (undocumented) -export const MicrosoftCalendar: () => JSX.Element; - // @public (undocumented) export class MicrosoftCalendarApiClient { constructor(options: { authApi: OAuthApi; fetchApi: FetchApi }); @@ -35,5 +32,8 @@ export class MicrosoftCalendarApiClient { // @public (undocumented) export const microsoftCalendarApiRef: ApiRef; +// @public (undocumented) +export const MicrosoftCalendarCard: () => JSX.Element; + // (No @packageDocumentation comment for this package) ``` diff --git a/plugins/microsoft-calendar/dev/index.tsx b/plugins/microsoft-calendar/dev/index.tsx index f2189ba3bc..d611bca20c 100644 --- a/plugins/microsoft-calendar/dev/index.tsx +++ b/plugins/microsoft-calendar/dev/index.tsx @@ -15,7 +15,7 @@ */ import React from 'react'; import { createDevApp } from '@backstage/dev-utils'; -import { microsoftCalendarPlugin, MicrosoftCalendar } from '../src/plugin'; +import { microsoftCalendarPlugin, MicrosoftCalendarCard } from '../src/plugin'; import { microsoftCalendarApiRef } from '../src'; import responseMock from './mock.json'; import { microsoftAuthApiRef } from '@backstage/core-plugin-api'; @@ -52,7 +52,7 @@ createDevApp() - + diff --git a/plugins/microsoft-calendar/src/components/CalendarCard.tsx b/plugins/microsoft-calendar/src/components/CalendarCard.tsx index dba12bdea5..dd94bad148 100644 --- a/plugins/microsoft-calendar/src/components/CalendarCard.tsx +++ b/plugins/microsoft-calendar/src/components/CalendarCard.tsx @@ -131,11 +131,7 @@ export const CalendarCard = () => { )} {sortBy(events, [getStartDate]).map(event => ( - + ))} )} diff --git a/plugins/microsoft-calendar/src/components/CalendarEvent.tsx b/plugins/microsoft-calendar/src/components/CalendarEvent.tsx index e6e5bf03fa..e56e25a09b 100644 --- a/plugins/microsoft-calendar/src/components/CalendarEvent.tsx +++ b/plugins/microsoft-calendar/src/components/CalendarEvent.tsx @@ -71,11 +71,11 @@ const useStyles = makeStyles( backgroundColor: theme.palette.grey[100], }, }, - calendarColor: () => ({ + calendarColor: { width: 8, borderTopLeftRadius: 4, borderBottomLeftRadius: 4, - }), + }, }), { name: 'MicrosoftCalendarEvent', @@ -83,7 +83,7 @@ const useStyles = makeStyles( ); export const CalendarEvent = ({ event }: { event: MicrosoftCalendarEvent }) => { - const classes = useStyles({ event }); + const classes = useStyles(); const popoverState = usePopupState({ variant: 'popover', popupId: event.id, diff --git a/plugins/microsoft-calendar/src/components/CalendarEventPopoverContent.tsx b/plugins/microsoft-calendar/src/components/CalendarEventPopoverContent.tsx index 60def9b6e3..601474aaa3 100644 --- a/plugins/microsoft-calendar/src/components/CalendarEventPopoverContent.tsx +++ b/plugins/microsoft-calendar/src/components/CalendarEventPopoverContent.tsx @@ -33,21 +33,19 @@ import { MicrosoftCalendarEvent } from '../api'; import { getTimePeriod, getOnlineMeetingLink } from './util'; const useStyles = makeStyles( - theme => { - return { - description: { - wordBreak: 'break-word', - '& a': { - color: theme.palette.primary.main, - fontWeight: 500, - }, + theme => ({ + description: { + wordBreak: 'break-word', + '& a': { + color: theme.palette.primary.main, + fontWeight: 500, }, - divider: { - marginTop: theme.spacing(2), - marginBottom: theme.spacing(2), - }, - }; - }, + }, + divider: { + marginTop: theme.spacing(2), + marginBottom: theme.spacing(2), + }, + }), { name: 'GCalendarEventPopoverContent', }, @@ -60,7 +58,7 @@ type CalendarEventPopoverProps = { export const CalendarEventPopoverContent = ({ event, }: CalendarEventPopoverProps) => { - const classes = useStyles({ event }); + const classes = useStyles(); const onlineMeetingLink = getOnlineMeetingLink(event); return ( diff --git a/plugins/microsoft-calendar/src/index.ts b/plugins/microsoft-calendar/src/index.ts index 5d37eb048d..6867ca31ac 100644 --- a/plugins/microsoft-calendar/src/index.ts +++ b/plugins/microsoft-calendar/src/index.ts @@ -13,5 +13,5 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -export { MicrosoftCalendar } from './plugin'; +export { MicrosoftCalendarCard } from './plugin'; export { MicrosoftCalendarApiClient, microsoftCalendarApiRef } from './api'; diff --git a/plugins/microsoft-calendar/src/plugin.ts b/plugins/microsoft-calendar/src/plugin.ts index 6c67ef33b4..644d368d97 100644 --- a/plugins/microsoft-calendar/src/plugin.ts +++ b/plugins/microsoft-calendar/src/plugin.ts @@ -24,13 +24,9 @@ import { microsoftCalendarApiRef, MicrosoftCalendarApiClient, } from './api/index'; -import { rootRouteRef } from './routes'; export const microsoftCalendarPlugin = createPlugin({ id: 'microsoft-calendar', - routes: { - root: rootRouteRef, - }, apis: [ createApiFactory({ api: microsoftCalendarApiRef, @@ -43,9 +39,9 @@ export const microsoftCalendarPlugin = createPlugin({ }); /** @public */ -export const MicrosoftCalendar = microsoftCalendarPlugin.provide( +export const MicrosoftCalendarCard = microsoftCalendarPlugin.provide( createComponentExtension({ - name: 'MicrosoftCalendar', + name: 'MicrosoftCalendarCard', component: { lazy: () => import('./components').then(m => m.MicrosoftCalendar), }, diff --git a/plugins/microsoft-calendar/src/routes.ts b/plugins/microsoft-calendar/src/routes.ts deleted file mode 100644 index c257690e24..0000000000 --- a/plugins/microsoft-calendar/src/routes.ts +++ /dev/null @@ -1,20 +0,0 @@ -/* - * Copyright 2023 The Backstage Authors - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -import { createRouteRef } from '@backstage/core-plugin-api'; - -export const rootRouteRef = createRouteRef({ - id: 'microsoft-calendar', -});