feat: new issue modal with Jira JS API

web-pal · Feb 25, 2018 · d313feb · d313feb
1 parent bc50b17
commit d313feb
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 43 deletions.
diff --git a/app/containers/Sidebar/SidebarIssues/IssuesHeader/IssuesHeader.jsx b/app/containers/Sidebar/SidebarIssues/IssuesHeader/IssuesHeader.jsx
@@ -24,6 +24,7 @@ import {
   uiActions,
 } from 'actions';
 import {
+  getCurrentProjectKey,
   getCurrentProjectId,
   getUiState,
 } from 'selectors';
@@ -43,6 +44,7 @@ type Props = {
   filterStatusesIsFetched: boolean,
   sidebarFiltersIsOpen: boolean,
   filtersApplied: boolean,
+  currentProjectKey: string,
   currentProjectId: string,
   host: string,
   protocol: string,
@@ -54,6 +56,7 @@ const IssuesHeader: StatelessFunctionalComponent<Props> = ({
   filterStatusesIsFetched,
   sidebarFiltersIsOpen,
   filtersApplied,
+  currentProjectKey,
   currentProjectId,
   host,
   protocol,
@@ -84,7 +87,10 @@ const IssuesHeader: StatelessFunctionalComponent<Props> = ({
           onClick={() => {
             ipcRenderer.send(
               'open-create-issue-window',
-              `${protocol}://${host}/secure/CreateIssue.jspa?pid=${currentProjectId}`,
+              {
+                projectId: currentProjectId,
+                url: `${protocol}://${host}/projects/${currentProjectKey}/issues`,
+              },
             );
           }}
         />
@@ -115,6 +121,7 @@ function mapStateToProps(state) {
     host: getUiState('host')(state),
     protocol: getUiState('protocol')(state),
     currentProjectId: getCurrentProjectId(state),
+    currentProjectKey: getCurrentProjectKey(state),
     searchValue: getUiState('issuesSearch')(state),
     sidebarFiltersIsOpen: getUiState('sidebarFiltersIsOpen')(state),
     filterStatusesIsFetched: getUiState('filterStatusesIsFetched')(state),

diff --git a/app/main.dev.js b/app/main.dev.js
@@ -379,7 +379,13 @@ ipcMain.on('select-issue', (event, issueKey) => {
   tray.setContextMenu(menu);
 });
 
-ipcMain.on('open-create-issue-window', (event, url) => {
+ipcMain.on('issue-created', (event, issues) => {
+  issues.forEach(({ issueKey }) => {
+    mainWindow.webContents.send('newIssue', issueKey);
+  });
+});
+
+ipcMain.on('open-create-issue-window', (event, { url, projectId }) => {
   let createIssueWindow = new BrowserWindow({
     parent: mainWindow,
     modal: true,
@@ -389,38 +395,41 @@ ipcMain.on('open-create-issue-window', (event, url) => {
     title: 'Chronos',
     webPreferences: {
       nodeIntegration: false,
+      preload: path.join(__dirname, 'preload.js'),
       devTools: true,
     },
   });
   createIssueWindow.loadURL(url);
-  // createIssueWindow.mainWindow.openDevTools();
+  createIssueWindow.openDevTools();
   createIssueWindow.once('ready-to-show', () => {
     if (createIssueWindow) {
       createIssueWindow.show();
     }
   });
-
   createIssueWindow.webContents.on('dom-ready', () => {
     createIssueWindow.webContents.executeJavaScript(`
-      var sidebar = document.getElementById('navigation-app');
-      var cancel = document.getElementById('issue-create-cancel');
-      if (sidebar) {
-        sidebar.parentNode.removeChild(sidebar);
-      }
-      if (cancel) {
-        cancel.addEventListener('click', function (event) {
+      document.getElementById('page').style.display = 'none';
+      var issueForm = JIRA.Forms
+        .createCreateIssueForm({pid: ${projectId}})
+        .bind('sessionComplete', function(ev, issues) {
+          ipcRenderer.send('issue-created', issues);
           window.close();
+        })
+        .asDialog({
+          windowTitle: 'Create Issue',
         });
-      }
+      issueForm.show();
+      var timerId = setInterval(function() {
+        if (issueForm.$buttonContainer) {
+          var cancel = issueForm.$buttonContainer[0].getElementsByClassName('cancel');
+          cancel[0].addEventListener('click', function (event) {
+            window.close();
+          });
+          clearInterval(timerId);
+        }
+      }, 1000);
     `);
   });
-  createIssueWindow.webContents.on('did-get-redirect-request', (ev, fromUrl, newUrl) => {
-    if (fromUrl.includes('CreateIssueDetails.jspa')) {
-      const issueKey = newUrl.split('/').pop();
-      mainWindow.webContents.send('newIssue', issueKey);
-      createIssueWindow.destroy();
-    }
-  });
   createIssueWindow.on('closed', () => {
     createIssueWindow = null;
   }, false);

diff --git a/app/sagas/issues.js b/app/sagas/issues.js
@@ -580,35 +580,37 @@ export function* fetchEpics(): Generator<*, void, *> {
   }
 }
 
+function* onNewIssue(issueKey): Generator<*, *, *> {
+  const actions = createActionCreators('create', {
+    resourceName: 'issues',
+    request: 'createIssue',
+  });
+  try {
+    const issue = yield call(Api.fetchIssueByKey, issueKey);
+    yield put(actions.pending());
+    yield fork(notify, {
+      title: `${issue.key} was created`,
+    });
+    issue.fields.worklogs = [];
+    yield put(actions.succeeded({
+      resources: [issue],
+    }));
+    yield put(uiActions.setUiState(
+      'selectedIssueId',
+      issue.id,
+    ));
+    yield fork(refetchIssues, false);
+    trackMixpanel('New issue was created');
+  } catch (err) {
+    yield call(throwError, err);
+  }
+}
 
 function getNewIssueChannelListener(channel) {
   return function* listenNewIssue() {
     while (true) {
       const { payload } = yield take(channel);
-      const actions = createActionCreators('create', {
-        resourceName: 'issues',
-        request: 'createIssue',
-      });
-      try {
-        const issueKey = payload[0];
-        const issue = yield call(Api.fetchIssueByKey, issueKey);
-        yield put(actions.pending());
-        yield fork(notify, {
-          title: `${issue.key} was created`,
-        });
-        issue.fields.worklogs = [];
-        yield put(actions.succeeded({
-          resources: [issue],
-        }));
-        yield put(uiActions.setUiState(
-          'selectedIssueId',
-          issue.id,
-        ));
-        yield fork(refetchIssues, false);
-        trackMixpanel('New issue was created');
-      } catch (err) {
-        yield call(throwError, err);
-      }
+      yield fork(onNewIssue, payload[0]);
     }
   };
 }

diff --git a/app/selectors/projects.js b/app/selectors/projects.js
@@ -55,6 +55,17 @@ export const getCurrentProjectId = createSelector(
   },
 );
 
+export const getCurrentProjectKey = createSelector(
+  [
+    getCurrentProjectId,
+    getResourceMap('projects'),
+  ],
+  (
+    projectId,
+    projects,
+  ) => (projects[projectId] ? projects[projectId].key : ''),
+);
+
 export const getProjectsOptions = createSelector(
   [
     getResourceMappedList('projects', 'allProjects'),