Create Dialog component with tests

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

plugins/github-release-manager/src/cards/createRc/CreateRc.tsx

@@ -18,8 +18,6 @@ import React, { useState, useEffect } from 'react';
 import { Alert } from '@material-ui/lab';
 import {
   Button,
-  Dialog,
-  DialogTitle,
   FormControl,
   InputLabel,
   MenuItem,
@@ -27,23 +25,22 @@ import {
   Typography,
 } from '@material-ui/core';
 
-import { ComponentConfigCreateRc } from '../../types/types';
-import { useCreateRc } from './sideEffects/useCreateRc';
-import { Differ } from '../../components/Differ';
-import { getRcGitHubInfo } from './getRcGitHubInfo';
-import { InfoCardPlus } from '../../components/InfoCardPlus';
-import { SEMVER_PARTS } from '../../constants/constants';
-import { TEST_IDS } from '../../test-helpers/test-ids';
-import { usePluginApiClientContext } from '../../contexts/PluginApiClientContext';
-import { useProjectContext } from '../../contexts/ProjectContext';
-import { useStyles } from '../../styles/styles';
 import {
   GetBranchResult,
   GetLatestReleaseResult,
   GetRepositoryResult,
 } from '../../api/PluginApiClient';
-import { ResponseStepList } from '../../components/ResponseStepList/ResponseStepList';
-import { LinearProgressWithLabel } from '../../components/LinearProgressWithLabel';
+import { ComponentConfigCreateRc } from '../../types/types';
+import { Dialog } from '../../components/Dialog';
+import { Differ } from '../../components/Differ';
+import { getRcGitHubInfo } from './getRcGitHubInfo';
+import { InfoCardPlus } from '../../components/InfoCardPlus';
+import { SEMVER_PARTS } from '../../constants/constants';
+import { TEST_IDS } from '../../test-helpers/test-ids';
+import { useCreateRc } from './sideEffects/useCreateRc';
+import { usePluginApiClientContext } from '../../contexts/PluginApiClientContext';
+import { useProjectContext } from '../../contexts/ProjectContext';
+import { useStyles } from '../../styles/styles';
 
 interface CreateRcProps {
   defaultBranch: GetRepositoryResult['defaultBranch'];
@@ -85,13 +82,11 @@ export const CreateRc = ({
   });
   if (responseSteps.length > 0) {
     return (
-      <Dialog open maxWidth="md" fullWidth>
-        <DialogTitle>Create Release Candidate</DialogTitle>
-
-        <LinearProgressWithLabel value={progress} />
-
-        <ResponseStepList responseSteps={responseSteps} />
-      </Dialog>
+      <Dialog
+        progress={progress}
+        responseSteps={responseSteps}
+        title="Create Release Candidate"
+      />
     );
   }
 

plugins/github-release-manager/src/cards/patchRc/PatchBody.tsx

@@ -20,8 +20,6 @@ import { Alert, AlertTitle } from '@material-ui/lab';
 import {
   Button,
   Checkbox,
-  Dialog,
-  DialogTitle,
   IconButton,
   Link,
   List,
@@ -35,23 +33,22 @@ import {
 import FileCopyIcon from '@material-ui/icons/FileCopy';
 import OpenInNewIcon from '@material-ui/icons/OpenInNew';
 
-import { CalverTagParts } from '../../helpers/tagParts/getCalverTagParts';
-import { CenteredCircularProgress } from '../../components/CenteredCircularProgress';
-import { ComponentConfigPatch } from '../../types/types';
-import { Differ } from '../../components/Differ';
-import { usePatch } from './sideEffects/usePatch';
-import { SemverTagParts } from '../../helpers/tagParts/getSemverTagParts';
-import { TEST_IDS } from '../../test-helpers/test-ids';
-import { usePluginApiClientContext } from '../../contexts/PluginApiClientContext';
-import { useProjectContext } from '../../contexts/ProjectContext';
-import { useStyles } from '../../styles/styles';
 import {
   GetBranchResult,
   GetLatestReleaseResult,
 } from '../../api/PluginApiClient';
+import { CalverTagParts } from '../../helpers/tagParts/getCalverTagParts';
+import { CenteredCircularProgress } from '../../components/CenteredCircularProgress';
+import { ComponentConfigPatch } from '../../types/types';
+import { Dialog } from '../../components/Dialog';
+import { Differ } from '../../components/Differ';
 import { GitHubReleaseManagerError } from '../../errors/GitHubReleaseManagerError';
-import { LinearProgressWithLabel } from '../../components/LinearProgressWithLabel';
-import { ResponseStepList } from '../../components/ResponseStepList/ResponseStepList';
+import { SemverTagParts } from '../../helpers/tagParts/getSemverTagParts';
+import { TEST_IDS } from '../../test-helpers/test-ids';
+import { usePatch } from './sideEffects/usePatch';
+import { usePluginApiClientContext } from '../../contexts/PluginApiClientContext';
+import { useProjectContext } from '../../contexts/ProjectContext';
+import { useStyles } from '../../styles/styles';
 
 interface PatchBodyProps {
   bumpedTag: string;
@@ -104,13 +101,11 @@ export const PatchBody = ({
   });
   if (responseSteps.length > 0) {
     return (
-      <Dialog open maxWidth="md" fullWidth>
-        <DialogTitle>Patch Release Candidate</DialogTitle>
-
-        <LinearProgressWithLabel value={progress} />
-
-        <ResponseStepList responseSteps={responseSteps} />
-      </Dialog>
+      <Dialog
+        progress={progress}
+        responseSteps={responseSteps}
+        title="Patch Release Candidate"
+      />
     );
   }
 

plugins/github-release-manager/src/cards/promoteRc/PromoteRcBody.tsx

@@ -15,18 +15,17 @@
  */
 
 import React from 'react';
-import { Button, Dialog, DialogTitle, Typography } from '@material-ui/core';
+import { Button, Typography } from '@material-ui/core';
 
-import { Differ } from '../../components/Differ';
 import { ComponentConfigPromoteRc } from '../../types/types';
-import { usePromoteRc } from './sideEffects/usePromoteRc';
+import { Dialog } from '../../components/Dialog';
+import { Differ } from '../../components/Differ';
+import { GetLatestReleaseResult } from '../../api/PluginApiClient';
 import { TEST_IDS } from '../../test-helpers/test-ids';
 import { usePluginApiClientContext } from '../../contexts/PluginApiClientContext';
 import { useProjectContext } from '../../contexts/ProjectContext';
+import { usePromoteRc } from './sideEffects/usePromoteRc';
 import { useStyles } from '../../styles/styles';
-import { GetLatestReleaseResult } from '../../api/PluginApiClient';
-import { ResponseStepList } from '../../components/ResponseStepList/ResponseStepList';
-import { LinearProgressWithLabel } from '../../components/LinearProgressWithLabel';
 
 interface PromoteRcBodyProps {
   rcRelease: NonNullable<GetLatestReleaseResult>;
@@ -49,13 +48,11 @@ export const PromoteRcBody = ({ rcRelease, successCb }: PromoteRcBodyProps) => {
 
   if (responseSteps.length > 0) {
     return (
-      <Dialog open maxWidth="md" fullWidth>
-        <DialogTitle>Promote Release Candidate</DialogTitle>
-
-        <LinearProgressWithLabel value={progress} />
-
-        <ResponseStepList responseSteps={responseSteps} />
-      </Dialog>
+      <Dialog
+        progress={progress}
+        responseSteps={responseSteps}
+        title="Promote Release Candidate"
+      />
     );
   }
 

plugins/github-release-manager/src/components/Dialog.test.tsx

@@ -0,0 +1,42 @@
+/*
+ * 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 React from 'react';
+import { render } from '@testing-library/react';
+
+import { Dialog } from './Dialog';
+
+jest.mock('../contexts/RefetchContext', () => ({
+  useRefetchContext: () => jest.fn(),
+}));
+
+describe('Dialog', () => {
+  it('should render Dialog', () => {
+    const mockTitle = 'mock_dialog_title';
+    const mockResponseStepMessage = 'banana';
+
+    const { baseElement } = render(
+      <Dialog
+        progress={1}
+        responseSteps={[{ message: mockResponseStepMessage }]}
+        title={mockTitle}
+      />,
+    );
+
+    expect(baseElement.innerHTML).toMatch(mockTitle);
+    expect(baseElement.innerHTML).toMatch(mockResponseStepMessage);
+  });
+});

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

@@ -0,0 +1,38 @@
+/*
+ * 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 React from 'react';
+import { DialogTitle, Dialog as MaterialDialog } from '@material-ui/core';
+
+import { LinearProgressWithLabel } from './LinearProgressWithLabel';
+import { ResponseStep } from '../types/types';
+import { ResponseStepList } from './ResponseStepList/ResponseStepList';
+
+interface DialogProps {
+  progress: number;
+  responseSteps: ResponseStep[];
+  title: string;
+}
+
+export const Dialog = ({ progress, responseSteps, title }: DialogProps) => (
+  <MaterialDialog open maxWidth="md" fullWidth>
+    <DialogTitle>{title}</DialogTitle>
+
+    <LinearProgressWithLabel value={progress} />
+
+    <ResponseStepList responseSteps={responseSteps} />
+  </MaterialDialog>
+);

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

@@ -26,7 +26,7 @@ export function LinearProgressWithLabel(
   props: LinearProgressProps & { value: number },
 ) {
   return (
-    <Box display="flex" alignItems="center" width="75%" alignSelf="center">
+    <Box display="flex" alignItems="center" width="90%" alignSelf="center">
       <Box width="100%" mr={1}>
         <LinearProgress variant="determinate" {...props} />
       </Box>