Sentry plugin refactoring - code review changes

plugins/sentry/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@backstage/plugin-sentry",
-  "version": "0.1.1-alpha.5",
+  "version": "0.1.1-alpha.6",
   "main": "dist/index.esm.js",
+  "main:src": "src/index.ts",
   "types": "src/index.ts",
   "license": "Apache-2.0",
   "private": true,
@@ -16,8 +17,8 @@
     "clean": "backstage-cli clean"
   },
   "dependencies": {
-    "@backstage/core": "^0.1.1-alpha.5",
-    "@backstage/theme": "^0.1.1-alpha.5",
+    "@backstage/core": "^0.1.1-alpha.6",
+    "@backstage/theme": "^0.1.1-alpha.6",
     "@material-ui/core": "^4.9.1",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.45",
@@ -28,12 +29,12 @@
     "timeago.js": "^4.0.2"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.1.1-alpha.5",
-    "@backstage/dev-utils": "^0.1.1-alpha.5",
-    "@testing-library/jest-dom": "^4.2.4",
+    "@backstage/cli": "^0.1.1-alpha.6",
+    "@backstage/dev-utils": "^0.1.1-alpha.6",
+    "@testing-library/jest-dom": "^5.7.0",
     "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
-    "@types/jest": "^25.2.1",
+    "@testing-library/user-event": "^10.2.4",
+    "@types/jest": "^25.2.2",
     "@types/node": "^12.0.0",
     "@types/testing-library__jest-dom": "^5.0.4",
     "jest-fetch-mock": "^3.0.3"

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

@@ -39,12 +39,12 @@ describe('SentryIssuesTable', () => {
         <SentryIssuesTable sentryIssues={issues} />
       </ThemeProvider>,
     );
-    expect(await table.findByText('Error')).toBeInTheDOM();
-    expect(await table.findByText('Graph')).toBeInTheDOM();
-    expect(await table.findByText('First seen')).toBeInTheDOM();
-    expect(await table.findByText('Last seen')).toBeInTheDOM();
-    expect(await table.findByText('Events')).toBeInTheDOM();
-    expect(await table.findByText('Users')).toBeInTheDOM();
+    expect(await table.findByText('Error')).toBeInTheDocument();
+    expect(await table.findByText('Graph')).toBeInTheDocument();
+    expect(await table.findByText('First seen')).toBeInTheDocument();
+    expect(await table.findByText('Last seen')).toBeInTheDocument();
+    expect(await table.findByText('Events')).toBeInTheDocument();
+    expect(await table.findByText('Users')).toBeInTheDocument();
   });
   it('should render values in a table', async () => {
     const issues: SentryIssue[] = [
@@ -63,9 +63,9 @@ describe('SentryIssuesTable', () => {
         <SentryIssuesTable sentryIssues={issues} />
       </ThemeProvider>,
     );
-    expect(await table.findByText('Exception')).toBeInTheDOM();
-    expect(await table.findByText('exception was thrown')).toBeInTheDOM();
-    expect(await table.findByText('101')).toBeInTheDOM();
-    expect(await table.findByText('202')).toBeInTheDOM();
+    expect(await table.findByText('Exception')).toBeInTheDocument();
+    expect(await table.findByText('exception was thrown')).toBeInTheDocument();
+    expect(await table.findByText('101')).toBeInTheDocument();
+    expect(await table.findByText('202')).toBeInTheDocument();
   });
 });

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

@@ -26,7 +26,7 @@ const errorApi = { post: () => {} };
 
 describe('SentryPluginPage', () => {
   it('should render header and time switched', () => {
-    mockFetch.mockResponse(() => new Promise(() => {}));
+    mockFetch.mockResponse('{}');
     const rendered = render(
       <ApiProvider apis={ApiRegistry.from([[errorApiRef, errorApi]])}>
         <ThemeProvider theme={lightTheme}>

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

@@ -24,13 +24,13 @@ import {
   ContentHeader,
   SupportButton,
 } from '@backstage/core';
-import SentryPluginWidget from '../SentryPluginWidget/SentryPluginWidget';
+import { SentryPluginWidget } from '../SentryPluginWidget/SentryPluginWidget';
 import { ToggleButton, ToggleButtonGroup } from '@material-ui/lab';
 
 const SentryPluginPage: FC<{}> = () => {
   const [statsFor, setStatsFor] = useState<'12h' | '24h'>('12h');
-  const toggleStatsFor = () =>
-    statsFor === '12h' ? setStatsFor('24h') : setStatsFor('12h');
+  const toggleStatsFor = () => setStatsFor(statsFor === '12h' ? '12h' : '24h');
+
   return (
     <Page theme={pageTheme.tool}>
       <Header title="Welcome to Sentry Plugin!">

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

@@ -28,7 +28,7 @@ import { sentryApiFactory } from '../../data/api-factory';
 
 const api = sentryApiFactory('spotify');
 
-const SentryPluginWidget: FC<{
+export const SentryPluginWidget: FC<{
   sentryProjectId: string;
   statsFor: '24h' | '12h';
 }> = ({ sentryProjectId, statsFor }) => {
@@ -55,5 +55,3 @@ const SentryPluginWidget: FC<{
 
   return <SentryIssuesTable sentryIssues={value || []} />;
 };
-
-export default SentryPluginWidget;

plugins/sentry/src/data/production-api.ts

@@ -16,7 +16,8 @@
 import { SentryIssue } from './sentry-issue';
 import { SentryApi } from './sentry-api';
 
-const API_BASE_URL = 'http://localhost:7000/sentry/api/0/projects/';
+const API_HOST = process.env.API_HOST || 'http://localhost:7000';
+const API_BASE_URL = `${API_HOST}/sentry/api/0/projects/`;
 
 export class ProductionSentryApi implements SentryApi {
   private organization: string;

plugins/sentry/src/index.ts

@@ -15,4 +15,4 @@
  */
 
 export { plugin } from './plugin';
-export { default as SentryIssuesWidget } from './components/SentryPluginWidget/SentryPluginWidget';
+export { SentryPluginWidget as SentryIssuesWidget } from './components/SentryPluginWidget/SentryPluginWidget';

plugins/sentry/src/setupTests.ts

@@ -14,5 +14,5 @@
  * limitations under the License.
  */
 
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 require('jest-fetch-mock').enableMocks();

plugins/sentry/tsconfig.json

@@ -1,5 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "include": ["src", "dev"],
-  "compilerOptions": {}
-}