Read sentry org from config.

app-config.yaml

@@ -11,14 +11,17 @@ backend:
     credentials: true
 
 proxy:
-  '/circleci/api':
-    target: 'https://circleci.com/api/v1.1'
+  "/circleci/api":
+    target: "https://circleci.com/api/v1.1"
     changeOrigin: true
     pathRewrite:
-      '^/proxy/circleci/api/': '/'
+      "^/proxy/circleci/api/": "/"
 
 organization:
   name: Spotify
 
 techdocs:
   storageUrl: https://techdocs-mock-sites.storage.googleapis.com
+
+sentry:
+  organization: spotify

plugins/sentry/src/components/SentryPluginPage/SentryPluginPage.test.tsx

@@ -20,15 +20,26 @@ import mockFetch from 'jest-fetch-mock';
 import SentryPluginPage from './SentryPluginPage';
 import { ThemeProvider } from '@material-ui/core';
 import { lightTheme } from '@backstage/theme';
-import { ApiProvider, ApiRegistry, errorApiRef } from '@backstage/core';
+import {
+  ApiProvider,
+  ApiRegistry,
+  errorApiRef,
+  configApiRef,
+} from '@backstage/core';
 
 const errorApi = { post: () => {} };
+const ConfigApi = { getString: () => 'test' };
 
 describe('SentryPluginPage', () => {
   it('should render header and time switched', () => {
     mockFetch.mockResponse('{}');
     const rendered = render(
-      <ApiProvider apis={ApiRegistry.from([[errorApiRef, errorApi]])}>
+      <ApiProvider
+        apis={ApiRegistry.from([
+          [errorApiRef, errorApi],
+          [configApiRef, ConfigApi],
+        ])}
+      >
         <ThemeProvider theme={lightTheme}>
           <SentryPluginPage />
         </ThemeProvider>

plugins/sentry/src/components/SentryPluginPage/SentryPluginPage.tsx

@@ -30,6 +30,7 @@ import { ToggleButton, ToggleButtonGroup } from '@material-ui/lab';
 const SentryPluginPage: FC<{}> = () => {
   const [statsFor, setStatsFor] = useState<'12h' | '24h'>('12h');
   const toggleStatsFor = () => setStatsFor(statsFor === '12h' ? '12h' : '24h');
+  const sentryProjectId = 'sample-sentry-project-id';
 
   return (
     <Page theme={pageTheme.tool}>
@@ -56,7 +57,7 @@ const SentryPluginPage: FC<{}> = () => {
         <Grid container spacing={3} direction="column">
           <Grid item>
             <SentryPluginWidget
-              sentryProjectId="home-hub"
+              sentryProjectId={sentryProjectId}
               statsFor={statsFor}
             />
           </Grid>

plugins/sentry/src/components/SentryPluginWidget/SentryPluginWidget.tsx

@@ -21,18 +21,20 @@ import {
   InfoCard,
   Progress,
   useApi,
+  configApiRef,
 } from '@backstage/core';
 import SentryIssuesTable from '../SentryIssuesTable/SentryIssuesTable';
 import { useAsync } from 'react-use';
 import { sentryApiFactory } from '../../data/api-factory';
 
-const api = sentryApiFactory('spotify');
-
 export const SentryPluginWidget: FC<{
   sentryProjectId: string;
   statsFor: '24h' | '12h';
 }> = ({ sentryProjectId, statsFor }) => {
   const errorApi = useApi<ErrorApi>(errorApiRef);
+  const configApi = useApi(configApiRef);
+  const org = configApi.getString('sentry.organization');
+  const api = sentryApiFactory(org);
 
   const { loading, value, error } = useAsync(
     () => api.fetchIssues(sentryProjectId, statsFor),