Address PR comments

Signed-off-by: Erik Engervall <erik.engervall@gmail.com>

packages/app/src/apis.ts

@@ -33,7 +33,6 @@ import {
   graphQlBrowseApiRef,
   GraphQLEndpoints,
 } from '@backstage/plugin-graphiql';
-// import { githubReleaseManagerApiRef } from '@backstage/plugin-github-release-manager';
 
 export const apis: AnyApiFactory[] = [
   createApiFactory({
@@ -42,16 +41,6 @@ export const apis: AnyApiFactory[] = [
     factory: ({ configApi }) => ScmIntegrationsApi.fromConfig(configApi),
   }),
 
-  // createApiFactory({
-  //   api: githubReleaseManagerApiRef,
-  //   deps: { githubAuthApi: githubAuthApiRef },
-  //   factory: ({ githubAuthApi }) => {
-  //     return {
-
-  //     }
-  //   },
-  // }),
-
   createApiFactory({
     api: graphQlBrowseApiRef,
     deps: { errorApi: errorApiRef, githubAuthApi: githubAuthApiRef },

plugins/github-release-manager/dev/index.tsx

@@ -16,7 +16,7 @@
 
 import React from 'react';
 import { createDevApp } from '@backstage/dev-utils';
-import { Typography } from '@material-ui/core';
+import { Box, Typography } from '@material-ui/core';
 
 import {
   gitHubReleaseManagerPlugin,
@@ -24,31 +24,27 @@ import {
 } from '../src/plugin';
 import { InfoCardPlus } from '../src/components/InfoCardPlus';
 
-function DevWrapper({ children }: { children: React.ReactNode }) {
-  return <div style={{ padding: 30 }}>{children}</div>;
-}
-
 createDevApp()
   .registerPlugin(gitHubReleaseManagerPlugin)
   .addPage({
     title: 'Dynamic',
     path: '/dynamic',
     element: (
-      <DevWrapper>
+      <Box padding={4}>
         <InfoCardPlus>
           <Typography variant="h4">Dev notes</Typography>
           <Typography>Configure plugin via select inputs</Typography>
         </InfoCardPlus>
 
         <GitHubReleaseManagerPage />
-      </DevWrapper>
+      </Box>
     ),
   })
   .addPage({
     title: 'Static',
     path: '/static',
     element: (
-      <DevWrapper>
+      <Box padding={4}>
         <InfoCardPlus>
           <Typography variant="h4">Dev notes</Typography>
           <Typography>
@@ -64,14 +60,14 @@ createDevApp()
             versioningStrategy: 'semver',
           }}
         />
-      </DevWrapper>
+      </Box>
     ),
   })
   .addPage({
     title: 'Omit',
     path: '/omit',
     element: (
-      <DevWrapper>
+      <Box padding={4}>
         <InfoCardPlus>
           <Typography variant="h4">Dev notes</Typography>
           <Typography>Each feature can be omitted</Typography>
@@ -112,7 +108,7 @@ createDevApp()
             },
           }}
         />
-      </DevWrapper>
+      </Box>
     ),
   })
   .render();

plugins/github-release-manager/src/GitHubReleaseManager.tsx

@@ -30,7 +30,6 @@ import { CenteredCircularProgress } from './components/CenteredCircularProgress'
 import { githubReleaseManagerApiRef } from './api/serviceApiRef';
 import { InfoCardPlus } from './components/InfoCardPlus';
 import { isProjectValid } from './helpers/isProjectValid';
-import { PluginApiClientContext } from './contexts/PluginApiClientContext';
 import { ProjectContext, Project } from './contexts/ProjectContext';
 import { RepoDetailsForm } from './features/RepoDetailsForm/RepoDetailsForm';
 import { useQueryHandler } from './hooks/useQueryHandler';
@@ -82,18 +81,16 @@ export function GitHubReleaseManager(props: GitHubReleaseManagerProps) {
   }
 
   return (
-    <PluginApiClientContext.Provider value={{ pluginApiClient }}>
-      <ProjectContext.Provider value={{ project }}>
-        <div className={classes.root}>
-          <ContentHeader title="GitHub Release Manager" />
+    <ProjectContext.Provider value={{ project }}>
+      <div className={classes.root}>
+        <ContentHeader title="GitHub Release Manager" />
 
-          <InfoCardPlus>
-            <RepoDetailsForm username={usernameResponse.value.username} />
-          </InfoCardPlus>
+        <InfoCardPlus>
+          <RepoDetailsForm username={usernameResponse.value.username} />
+        </InfoCardPlus>
 
-          {isProjectValid(project) && <Features features={props.features} />}
-        </div>
-      </ProjectContext.Provider>
-    </PluginApiClientContext.Provider>
+        {isProjectValid(project) && <Features features={props.features} />}
+      </div>
+    </ProjectContext.Provider>
   );
 }

plugins/github-release-manager/src/components/Divider.tsx

@@ -15,14 +15,18 @@
  */
 
 import React from 'react';
-import { Divider as MaterialDivider } from '@material-ui/core';
+import { Box, Divider as MaterialDivider } from '@material-ui/core';
 
 import { TEST_IDS } from '../test-helpers/test-ids';
 
 export const Divider = () => {
   return (
-    <div style={{ margin: '20px 0' }} data-testid={TEST_IDS.components.divider}>
+    <Box
+      marginTop={2}
+      marginBottom={2}
+      data-testid={TEST_IDS.components.divider}
+    >
       <MaterialDivider />
-    </div>
+    </Box>
   );
 };

plugins/github-release-manager/src/contexts/PluginApiClientContext.ts

@@ -1,36 +0,0 @@
-/*
- * Copyright 2021 Spotify AB
- *
- * 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 { createContext, useContext } from 'react';
-
-import { IPluginApiClient } from '../api/PluginApiClient';
-import { GitHubReleaseManagerError } from '../errors/GitHubReleaseManagerError';
-
-export const PluginApiClientContext = createContext<
-  { pluginApiClient: IPluginApiClient } | undefined
->(undefined);
-
-export const usePluginApiClientContext = () => {
-  const { pluginApiClient } = useContext(PluginApiClientContext) ?? {};
-
-  if (!pluginApiClient) {
-    throw new GitHubReleaseManagerError('pluginApiClient not found');
-  }
-
-  return {
-    pluginApiClient,
-  };
-};

plugins/github-release-manager/src/features/CreateRc/hooks/useCreateRc.ts

@@ -16,6 +16,7 @@
 
 import { useEffect, useState } from 'react';
 import { useAsync, useAsyncFn } from 'react-use';
+import { useApi } from '@backstage/core';
 
 import {
   GetLatestReleaseResult,
@@ -23,10 +24,10 @@ import {
 } from '../../../api/PluginApiClient';
 import { CardHook, ComponentConfigCreateRc } from '../../../types/types';
 import { getRcGitHubInfo } from '../../../helpers/getRcGitHubInfo';
+import { githubReleaseManagerApiRef } from '../../../api/serviceApiRef';
 import { GitHubReleaseManagerError } from '../../../errors/GitHubReleaseManagerError';
 import { Project } from '../../../contexts/ProjectContext';
 import { useResponseSteps } from '../../../hooks/useResponseSteps';
-import { usePluginApiClientContext } from '../../../contexts/PluginApiClientContext';
 
 interface CreateRC {
   defaultBranch: GetRepositoryResult['defaultBranch'];
@@ -43,7 +44,7 @@ export function useCreateRc({
   project,
   successCb,
 }: CreateRC): CardHook<void> {
-  const { pluginApiClient } = usePluginApiClientContext();
+  const pluginApiClient = useApi(githubReleaseManagerApiRef);
 
   if (nextGitHubInfo.error) {
     throw new GitHubReleaseManagerError(

plugins/github-release-manager/src/features/Features.tsx

@@ -16,17 +16,17 @@
 
 import React, { useState } from 'react';
 import { Alert, AlertTitle } from '@material-ui/lab';
-import { ErrorBoundary } from '@backstage/core';
+import { ErrorBoundary, useApi } from '@backstage/core';
 
 import { CenteredCircularProgress } from '../components/CenteredCircularProgress';
 import { CreateRc } from './CreateRc/CreateRc';
+import { githubReleaseManagerApiRef } from '../api/serviceApiRef';
 import { GitHubReleaseManagerProps } from '../GitHubReleaseManager';
 import { Info } from './Info/Info';
 import { Patch } from './Patch/Patch';
 import { PromoteRc } from './PromoteRc/PromoteRc';
 import { RefetchContext } from '../contexts/RefetchContext';
 import { useGetGitHubBatchInfo } from '../hooks/useGetGitHubBatchInfo';
-import { usePluginApiClientContext } from '../contexts/PluginApiClientContext';
 import { useProjectContext } from '../contexts/ProjectContext';
 import { useVersioningStrategyMatchesRepoTags } from '../hooks/useVersioningStrategyMatchesRepoTags';
 import { validateTagName } from '../helpers/tagParts/validateTagName';
@@ -36,7 +36,7 @@ export function Features({
 }: {
   features: GitHubReleaseManagerProps['features'];
 }) {
-  const { pluginApiClient } = usePluginApiClientContext();
+  const pluginApiClient = useApi(githubReleaseManagerApiRef);
   const { project } = useProjectContext();
   const [refetchTrigger, setRefetchTrigger] = useState(0);
   const { gitHubBatchInfo } = useGetGitHubBatchInfo({

plugins/github-release-manager/src/features/Patch/PatchBody.tsx

@@ -32,6 +32,7 @@ import {
 } from '@material-ui/core';
 import FileCopyIcon from '@material-ui/icons/FileCopy';
 import OpenInNewIcon from '@material-ui/icons/OpenInNew';
+import { useApi } from '@backstage/core';
 
 import {
   GetBranchResult,
@@ -41,12 +42,12 @@ import { CalverTagParts } from '../../helpers/tagParts/getCalverTagParts';
 import { CenteredCircularProgress } from '../../components/CenteredCircularProgress';
 import { ComponentConfigPatch } from '../../types/types';
 import { Differ } from '../../components/Differ';
+import { githubReleaseManagerApiRef } from '../../api/serviceApiRef';
 import { GitHubReleaseManagerError } from '../../errors/GitHubReleaseManagerError';
 import { ResponseStepDialog } from '../../components/ResponseStepDialog/ResponseStepDialog';
 import { SemverTagParts } from '../../helpers/tagParts/getSemverTagParts';
 import { TEST_IDS } from '../../test-helpers/test-ids';
 import { usePatch } from './hooks/usePatch';
-import { usePluginApiClientContext } from '../../contexts/PluginApiClientContext';
 import { useProjectContext } from '../../contexts/ProjectContext';
 import { useStyles } from '../../styles/styles';
 
@@ -65,7 +66,7 @@ export const PatchBody = ({
   successCb,
   tagParts,
 }: PatchBodyProps) => {
-  const { pluginApiClient } = usePluginApiClientContext();
+  const pluginApiClient = useApi(githubReleaseManagerApiRef);
   const { project } = useProjectContext();
   const [checkedCommitIndex, setCheckedCommitIndex] = useState(-1);
 

plugins/github-release-manager/src/features/Patch/hooks/usePatch.ts

@@ -16,6 +16,7 @@
 
 import { useEffect, useState } from 'react';
 import { useAsync, useAsyncFn } from 'react-use';
+import { useApi } from '@backstage/core';
 
 import {
   GetLatestReleaseResult,
@@ -23,9 +24,9 @@ import {
 } from '../../../api/PluginApiClient';
 import { CalverTagParts } from '../../../helpers/tagParts/getCalverTagParts';
 import { ComponentConfigPatch, CardHook } from '../../../types/types';
+import { githubReleaseManagerApiRef } from '../../../api/serviceApiRef';
 import { Project } from '../../../contexts/ProjectContext';
 import { SemverTagParts } from '../../../helpers/tagParts/getSemverTagParts';
-import { usePluginApiClientContext } from '../../../contexts/PluginApiClientContext';
 import { useResponseSteps } from '../../../hooks/useResponseSteps';
 
 interface Patch {
@@ -44,7 +45,7 @@ export function usePatch({
   tagParts,
   successCb,
 }: Patch): CardHook<GetRecentCommitsResultSingle> {
-  const { pluginApiClient } = usePluginApiClientContext();
+  const pluginApiClient = useApi(githubReleaseManagerApiRef);
   const {
     responseSteps,
     addStepToResponseSteps,

plugins/github-release-manager/src/features/PromoteRc/hooks/usePromoteRc.ts

@@ -16,11 +16,12 @@
 
 import { useState, useEffect } from 'react';
 import { useAsync, useAsyncFn } from 'react-use';
+import { useApi } from '@backstage/core';
 
-import { GetLatestReleaseResult } from '../../../api/PluginApiClient';
 import { CardHook, ComponentConfigPromoteRc } from '../../../types/types';
+import { GetLatestReleaseResult } from '../../../api/PluginApiClient';
+import { githubReleaseManagerApiRef } from '../../../api/serviceApiRef';
 import { useProjectContext } from '../../../contexts/ProjectContext';
-import { usePluginApiClientContext } from '../../../contexts/PluginApiClientContext';
 import { useResponseSteps } from '../../../hooks/useResponseSteps';
 
 interface PromoteRc {
@@ -34,7 +35,7 @@ export function usePromoteRc({
   releaseVersion,
   successCb,
 }: PromoteRc): CardHook<void> {
-  const { pluginApiClient } = usePluginApiClientContext();
+  const pluginApiClient = useApi(githubReleaseManagerApiRef);
   const { project } = useProjectContext();
   const {
     responseSteps,

plugins/github-release-manager/src/features/RepoDetailsForm/Owner.tsx

@@ -24,16 +24,17 @@ import {
   MenuItem,
   Select,
 } from '@material-ui/core';
+import { useApi } from '@backstage/core';
 
 import { CenteredCircularProgress } from '../../components/CenteredCircularProgress';
+import { githubReleaseManagerApiRef } from '../../api/serviceApiRef';
 import { TEST_IDS } from '../../test-helpers/test-ids';
 import { useFormClasses } from './styles';
-import { usePluginApiClientContext } from '../../contexts/PluginApiClientContext';
 import { useProjectContext } from '../../contexts/ProjectContext';
 import { useQueryHandler } from '../../hooks/useQueryHandler';
 
 export function Owner({ username }: { username: string }) {
-  const { pluginApiClient } = usePluginApiClientContext();
+  const pluginApiClient = useApi(githubReleaseManagerApiRef);
   const { project } = useProjectContext();
   const formClasses = useFormClasses();
   const navigate = useNavigate();

plugins/github-release-manager/src/features/RepoDetailsForm/Repo.tsx

@@ -24,16 +24,17 @@ import {
   MenuItem,
   Select,
 } from '@material-ui/core';
+import { useApi } from '@backstage/core';
 
 import { CenteredCircularProgress } from '../../components/CenteredCircularProgress';
+import { githubReleaseManagerApiRef } from '../../api/serviceApiRef';
 import { TEST_IDS } from '../../test-helpers/test-ids';
 import { useFormClasses } from './styles';
-import { usePluginApiClientContext } from '../../contexts/PluginApiClientContext';
 import { useProjectContext } from '../../contexts/ProjectContext';
 import { useQueryHandler } from '../../hooks/useQueryHandler';
 
 export function Repo() {
-  const { pluginApiClient } = usePluginApiClientContext();
+  const pluginApiClient = useApi(githubReleaseManagerApiRef);
   const { project } = useProjectContext();
   const navigate = useNavigate();
   const formClasses = useFormClasses();

plugins/github-release-manager/src/features/Stats/Info/hooks/useGetReleaseTimes.tsx

@@ -17,9 +17,10 @@
 import { useEffect, useState } from 'react';
 import { useAsync, useAsyncFn } from 'react-use';
 import { DateTime } from 'luxon';
+import { useApi } from '@backstage/core';
 
 import { getReleaseCommitPairs } from '../helpers/getReleaseCommitPairs';
-import { usePluginApiClientContext } from '../../../../contexts/PluginApiClientContext';
+import { githubReleaseManagerApiRef } from '../../../../api/serviceApiRef';
 import { useProjectContext } from '../../../../contexts/ProjectContext';
 import { useReleaseStatsContext } from '../../contexts/ReleaseStatsContext';
 
@@ -45,7 +46,7 @@ type ReleaseTime = {
 };
 
 export function useGetReleaseTimes() {
-  const { pluginApiClient } = usePluginApiClientContext();
+  const pluginApiClient = useApi(githubReleaseManagerApiRef);
   const { project } = useProjectContext();
   const { releaseStats } = useReleaseStatsContext();
   const [averageReleaseTime, setAverageReleaseTime] = useState<ReleaseTime[]>(

plugins/github-release-manager/src/features/Stats/hooks/useGetCommit.ts

@@ -15,13 +15,14 @@
  */
 
 import { useAsync } from 'react-use';
+import { useApi } from '@backstage/core';
 
+import { githubReleaseManagerApiRef } from '../../../api/serviceApiRef';
 import { GitHubReleaseManagerError } from '../../../errors/GitHubReleaseManagerError';
-import { usePluginApiClientContext } from '../../../contexts/PluginApiClientContext';
 import { useProjectContext } from '../../../contexts/ProjectContext';
 
 export const useGetCommit = ({ ref }: { ref?: string }) => {
-  const { pluginApiClient } = usePluginApiClientContext();
+  const pluginApiClient = useApi(githubReleaseManagerApiRef);
   const { project } = useProjectContext();
 
   const commit = useAsync(async () => {

plugins/github-release-manager/src/features/Stats/hooks/useGetStats.ts

@@ -14,13 +14,14 @@
  * limitations under the License.
  */
 
+import { useApi } from '@backstage/core';
 import { useAsync } from 'react-use';
 
-import { usePluginApiClientContext } from '../../../contexts/PluginApiClientContext';
+import { githubReleaseManagerApiRef } from '../../../api/serviceApiRef';
 import { useProjectContext } from '../../../contexts/ProjectContext';
 
 export const useGetStats = () => {
-  const { pluginApiClient } = usePluginApiClientContext();
+  const pluginApiClient = useApi(githubReleaseManagerApiRef);
   const { project } = useProjectContext();
 
   const stats = useAsync(async () => {