feat(playlists): implement playlist plugin

Signed-off-by: Phil Kuang <pkuang@factset.com>

packages/app/package.json

@@ -45,6 +45,7 @@
     "@backstage/plugin-org": "^0.5.9-next.3",
     "@backstage/plugin-pagerduty": "0.5.2-next.3",
     "@backstage/plugin-permission-react": "^0.4.5-next.2",
+    "@backstage/plugin-playlist": "^0.0.0",
     "@backstage/plugin-rollbar": "^0.4.9-next.3",
     "@backstage/plugin-scaffolder": "^1.6.0-next.3",
     "@backstage/plugin-search": "^1.0.2-next.3",

packages/app/src/App.tsx

@@ -103,6 +103,7 @@ import { techDocsPage } from './components/techdocs/TechDocsPage';
 import { ApacheAirflowPage } from '@backstage/plugin-apache-airflow';
 import { RequirePermission } from '@backstage/plugin-permission-react';
 import { catalogEntityCreatePermission } from '@backstage/plugin-catalog-common';
+import { PlaylistIndexPage } from '@backstage/plugin-playlist';
 
 const app = createApp({
   apis,
@@ -265,6 +266,7 @@ const routes = (
     </Route>
     <Route path="/azure-pull-requests" element={<AzurePullRequestsPage />} />
     <Route path="/apache-airflow" element={<ApacheAirflowPage />} />
+    <Route path="/playlist" element={<PlaylistIndexPage />} />
   </FlatRoutes>
 );
 

packages/app/src/components/Root/Root.tsx

@@ -22,6 +22,7 @@ import RuleIcon from '@material-ui/icons/AssignmentTurnedIn';
 import MapIcon from '@material-ui/icons/MyLocation';
 import LayersIcon from '@material-ui/icons/Layers';
 import LibraryBooks from '@material-ui/icons/LibraryBooks';
+import PlaylistPlayIcon from '@material-ui/icons/PlaylistPlay';
 import CreateComponentIcon from '@material-ui/icons/AddCircleOutline';
 import SearchIcon from '@material-ui/icons/Search';
 import MenuIcon from '@material-ui/icons/Menu';
@@ -105,6 +106,7 @@ export const Root = ({ children }: PropsWithChildren<{}>) => (
         />
         <SidebarItem icon={ExtensionIcon} to="api-docs" text="APIs" />
         <SidebarItem icon={LibraryBooks} to="docs" text="Docs" />
+        <SidebarItem icon={PlaylistPlayIcon} to="playlist" text="Playlists" />
         <SidebarItem icon={LayersIcon} to="explore" text="Explore" />
         <SidebarItem icon={CreateComponentIcon} to="create" text="Create..." />
         {/* End global nav */}

packages/app/src/components/catalog/EntityPage.tsx

@@ -104,6 +104,7 @@ import {
   EntityPagerDutyCard,
   isPagerDutyAvailable,
 } from '@backstage/plugin-pagerduty';
+import { EntityPlaylistDialog } from '@backstage/plugin-playlist';
 import {
   EntityRollbarContent,
   isRollbarAvailable,
@@ -114,6 +115,7 @@ import { EntityTechInsightsScorecardCard } from '@backstage/plugin-tech-insights
 import { EntityTodoContent } from '@backstage/plugin-todo';
 import { Button, Grid } from '@material-ui/core';
 import BadgeIcon from '@material-ui/icons/CallToAction';
+import PlaylistAddIcon from '@material-ui/icons/PlaylistAdd';
 
 import {
   EntityGithubInsightsContent,
@@ -155,6 +157,7 @@ const customEntityFilterKind = ['Component', 'API', 'System'];
 
 const EntityLayoutWrapper = (props: { children?: ReactNode }) => {
   const [badgesDialogOpen, setBadgesDialogOpen] = useState(false);
+  const [playlistDialogOpen, setPlaylistDialogOpen] = useState(false);
 
   const extraMenuItems = useMemo(() => {
     return [
@@ -163,6 +166,11 @@ const EntityLayoutWrapper = (props: { children?: ReactNode }) => {
         Icon: BadgeIcon,
         onClick: () => setBadgesDialogOpen(true),
       },
+      {
+        title: 'Add to playlist',
+        Icon: PlaylistAddIcon,
+        onClick: () => setPlaylistDialogOpen(true),
+      },
     ];
   }, []);
 
@@ -180,6 +188,10 @@ const EntityLayoutWrapper = (props: { children?: ReactNode }) => {
         open={badgesDialogOpen}
         onClose={() => setBadgesDialogOpen(false)}
       />
+      <EntityPlaylistDialog
+        open={playlistDialogOpen}
+        onClose={() => setPlaylistDialogOpen(false)}
+      />
     </>
   );
 };

packages/backend/package.json

@@ -46,6 +46,7 @@
     "@backstage/plugin-permission-backend": "^0.5.11-next.2",
     "@backstage/plugin-permission-common": "^0.6.4-next.2",
     "@backstage/plugin-permission-node": "^0.6.5-next.3",
+    "@backstage/plugin-playlist-backend": "^0.0.0",
     "@backstage/plugin-proxy-backend": "^0.2.30-next.2",
     "@backstage/plugin-rollbar-backend": "^0.1.33-next.3",
     "@backstage/plugin-scaffolder-backend": "^1.6.0-next.3",

packages/backend/src/index.ts

@@ -57,6 +57,7 @@ import app from './plugins/app';
 import badges from './plugins/badges';
 import jenkins from './plugins/jenkins';
 import permission from './plugins/permission';
+import playlist from './plugins/playlist';
 import { PluginEnvironment } from './types';
 import { ServerPermissionClient } from '@backstage/plugin-permission-node';
 import { DefaultIdentityClient } from '@backstage/plugin-auth-node';
@@ -139,6 +140,7 @@ async function main() {
     createEnv('tech-insights'),
   );
   const permissionEnv = useHotMemoize(module, () => createEnv('permission'));
+  const playlistEnv = useHotMemoize(module, () => createEnv('playlist'));
 
   const apiRouter = Router();
   apiRouter.use('/catalog', await catalog(catalogEnv));
@@ -158,6 +160,7 @@ async function main() {
   apiRouter.use('/badges', await badges(badgesEnv));
   apiRouter.use('/jenkins', await jenkins(jenkinsEnv));
   apiRouter.use('/permission', await permission(permissionEnv));
+  apiRouter.use('/playlist', await playlist(playlistEnv));
   apiRouter.use(notFoundHandler());
 
   const service = createServiceBuilder(module)

packages/backend/src/plugins/permission.ts

@@ -14,17 +14,34 @@
  * limitations under the License.
  */
 
+import { BackstageIdentityResponse } from '@backstage/plugin-auth-node';
 import { createRouter } from '@backstage/plugin-permission-backend';
 import {
   AuthorizeResult,
   PolicyDecision,
 } from '@backstage/plugin-permission-common';
-import { PermissionPolicy } from '@backstage/plugin-permission-node';
+import {
+  PermissionPolicy,
+  PolicyQuery,
+} from '@backstage/plugin-permission-node';
+import {
+  DefaultPlaylistPermissionPolicy,
+  isPlaylistPermission,
+} from '@backstage/plugin-playlist-backend';
 import { Router } from 'express';
 import { PluginEnvironment } from '../types';
 
-class AllowAllPermissionPolicy implements PermissionPolicy {
-  async handle(): Promise<PolicyDecision> {
+class ExamplePermissionPolicy implements PermissionPolicy {
+  private playlistPermissionPolicy = new DefaultPlaylistPermissionPolicy();
+
+  async handle(
+    request: PolicyQuery,
+    user?: BackstageIdentityResponse,
+  ): Promise<PolicyDecision> {
+    if (isPlaylistPermission(request.permission)) {
+      return this.playlistPermissionPolicy.handle(request, user);
+    }
+
     return {
       result: AuthorizeResult.ALLOW,
     };
@@ -38,7 +55,7 @@ export default async function createPlugin(
     config: env.config,
     logger: env.logger,
     discovery: env.discovery,
-    policy: new AllowAllPermissionPolicy(),
+    policy: new ExamplePermissionPolicy(),
     identity: env.identity,
   });
 }

packages/backend/src/plugins/playlist.ts

@@ -0,0 +1,37 @@
+/*
+ * Copyright 2022 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 { IdentityClient } from '@backstage/plugin-auth-node';
+import { createRouter } from '@backstage/plugin-playlist-backend';
+import { Router } from 'express';
+import { PluginEnvironment } from '../types';
+
+export default async function createPlugin({
+  database,
+  discovery,
+  logger,
+  permissions,
+}: PluginEnvironment): Promise<Router> {
+  return await createRouter({
+    database,
+    identity: IdentityClient.create({
+      discovery,
+      issuer: await discovery.getExternalBaseUrl('auth'),
+    }),
+    logger,
+    permissions,
+  });
+}

packages/backend/src/types.ts

@@ -24,11 +24,8 @@ import {
   UrlReader,
 } from '@backstage/backend-common';
 import { PluginTaskScheduler } from '@backstage/backend-tasks';
-import {
-  PermissionAuthorizer,
-  PermissionEvaluator,
-} from '@backstage/plugin-permission-common';
 import { IdentityApi } from '@backstage/plugin-auth-node';
+import { PermissionEvaluator } from '@backstage/plugin-permission-common';
 
 export type PluginEnvironment = {
   logger: Logger;
@@ -38,7 +35,7 @@ export type PluginEnvironment = {
   reader: UrlReader;
   discovery: PluginEndpointDiscovery;
   tokenManager: TokenManager;
-  permissions: PermissionEvaluator | PermissionAuthorizer;
+  permissions: PermissionEvaluator;
   scheduler: PluginTaskScheduler;
   identity: IdentityApi;
 };

packages/core-components/api-report.md

@@ -16,15 +16,18 @@ import { CardHeaderProps } from '@material-ui/core/CardHeader';
 import { Column } from '@material-table/core';
 import { ComponentClass } from 'react';
 import { ComponentProps } from 'react';
+import { ComponentType } from 'react';
 import { default as CSS_2 } from 'csstype';
 import { CSSProperties } from 'react';
 import { ElementType } from 'react';
 import { ErrorInfo } from 'react';
 import { IconComponent } from '@backstage/core-plugin-api';
+import { Icons } from '@material-table/core';
 import { IdentityApi } from '@backstage/core-plugin-api';
 import { LinearProgressProps } from '@material-ui/core/LinearProgress';
 import { LinkProps as LinkProps_2 } from '@material-ui/core/Link';
 import { LinkProps as LinkProps_3 } from 'react-router-dom';
+import { ListItemTextProps } from '@material-ui/core/ListItemText';
 import MaterialBreadcrumbs from '@material-ui/core/Breadcrumbs';
 import { MaterialTableProps } from '@material-table/core';
 import { NavLinkProps } from 'react-router-dom';
@@ -50,6 +53,16 @@ import { Theme } from '@material-ui/core/styles';
 import { TooltipProps } from '@material-ui/core/Tooltip';
 import { WithStyles } from '@material-ui/core/styles';
 
+// @public (undocumented)
+export type ActionItemProps = {
+  label?: ListItemTextProps['primary'];
+  secondaryLabel?: ListItemTextProps['secondary'];
+  icon?: ReactElement;
+  disabled?: boolean;
+  onClick?: (event: React_2.MouseEvent<HTMLDivElement>) => void;
+  WrapperComponent?: ComponentType;
+};
+
 // @public (undocumented)
 export function AlertDisplay(props: AlertDisplayProps): JSX.Element | null;
 
@@ -432,6 +445,14 @@ export function GroupIcon(props: IconComponentProps): JSX.Element;
 // @public
 export function Header(props: PropsWithChildren<Props_14>): JSX.Element;
 
+// @public (undocumented)
+export function HeaderActionMenu(props: HeaderActionMenuProps): JSX.Element;
+
+// @public (undocumented)
+export type HeaderActionMenuProps = {
+  actionItems: ActionItemProps[];
+};
+
 // @public (undocumented)
 export type HeaderClassKey =
   | 'header'
@@ -1333,6 +1354,12 @@ export type TabIconClassKey = 'root';
 // @public (undocumented)
 export function Table<T extends object = {}>(props: TableProps<T>): JSX.Element;
 
+// @public (undocumented)
+export namespace Table {
+  var // (undocumented)
+    tableIcons: Readonly<Icons>;
+}
+
 // Warning: (ae-missing-release-tag) "TableClassKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)

packages/core-components/src/components/Table/Table.tsx

@@ -292,6 +292,9 @@ export function TableToolbar(toolbarProps: {
   );
 }
 
+/**
+ * @public
+ */
 export function Table<T extends object = {}>(props: TableProps<T>) {
   const {
     data,
@@ -519,3 +522,5 @@ export function Table<T extends object = {}>(props: TableProps<T>) {
     </div>
   );
 }
+
+Table.tableIcons = Object.freeze(tableIcons);

packages/core-components/src/layout/HeaderActionMenu/HeaderActionMenu.tsx

@@ -23,9 +23,12 @@ import ListItemText, {
   ListItemTextProps,
 } from '@material-ui/core/ListItemText';
 import Popover from '@material-ui/core/Popover';
-import { VerticalMenuIcon } from './VerticalMenuIcon';
+import MoreVert from '@material-ui/icons/MoreVert';
 
-type ActionItemProps = {
+/**
+ * @public
+ */
+export type ActionItemProps = {
   label?: ListItemTextProps['primary'];
   secondaryLabel?: ListItemTextProps['secondary'];
   icon?: ReactElement;
@@ -61,10 +64,16 @@ const ActionItem = ({
   );
 };
 
+/**
+ * @public
+ */
 export type HeaderActionMenuProps = {
   actionItems: ActionItemProps[];
 };
 
+/**
+ * @public
+ */
 export function HeaderActionMenu(props: HeaderActionMenuProps) {
   const { actionItems } = props;
   const [open, setOpen] = React.useState(false);
@@ -84,7 +93,7 @@ export function HeaderActionMenu(props: HeaderActionMenuProps) {
           padding: 0,
         }}
       >
-        <VerticalMenuIcon titleAccess="menu" style={{ fontSize: 40 }} />
+        <MoreVert />
       </IconButton>
       <Popover
         open={open}

packages/core-components/src/layout/HeaderActionMenu/VerticalMenuIcon.tsx

@@ -1,25 +0,0 @@
-/*
- * Copyright 2020 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 React from 'react';
-import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
-
-export const VerticalMenuIcon = (props: SvgIconProps) =>
-  React.createElement(
-    SvgIcon,
-    props,
-    <path d="M11 3a1 1 0 00-1 1v2a1 1 0 001 1h2a1 1 0 001-1V4a1 1 0 00-1-1h-2zm0 7a1 1 0 00-1 1v2a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 00-1-1h-2zm0 7a1 1 0 00-1 1v2a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 00-1-1h-2z" />,
-  );

packages/core-components/src/layout/HeaderActionMenu/index.ts

@@ -15,3 +15,7 @@
  */
 
 export { HeaderActionMenu } from './HeaderActionMenu';
+export type {
+  ActionItemProps,
+  HeaderActionMenuProps,
+} from './HeaderActionMenu';

packages/core-components/src/layout/index.ts

@@ -20,6 +20,7 @@ export * from './ContentHeader';
 export * from './ErrorBoundary';
 export * from './ErrorPage';
 export * from './Header';
+export * from './HeaderActionMenu';
 export * from './HeaderLabel';
 export * from './HeaderTabs';
 export * from './HomepageTimer';