Bug 1492270 - Convert list of pinned jobs to a Context

mozilla · Sep 20, 2018 · d8df48f · d8df48f
1 parent 2806e50
commit d8df48f
Show file tree

Hide file tree

Showing 23 changed files with 376 additions and 313 deletions.
diff --git a/ui/css/treeherder-pinboard.css b/ui/css/treeherder-pinboard.css
@@ -13,7 +13,7 @@
   font-size: 12px;
 }
 
-.pin-count-group {
+#pin-count-group {
   display: inline-block;
   position: relative;
   top: -14px;

diff --git a/ui/job-view/JobView.jsx b/ui/job-view/JobView.jsx
@@ -5,6 +5,7 @@ import SplitPane from 'react-split-pane';
 
 import treeherder from '../js/treeherder';
 import { thEvents, thFavicons } from '../js/constants';
+import { PinnedJobs } from './context/PinnedJobs';
 import { matchesDefaults } from '../helpers/filter';
 import { deployedRevisionUrl } from '../helpers/url';
 import { getRepo } from '../helpers/location';
@@ -74,9 +75,9 @@ class JobView extends React.Component {
 
     this.toggleFieldFilterVisible = this.toggleFieldFilterVisible.bind(this);
     this.updateDimensions = this.updateDimensions.bind(this);
-    this.pinJobs = this.pinJobs.bind(this);
     this.setCurrentRepoTreeStatus = this.setCurrentRepoTreeStatus.bind(this);
     this.handleUrlChanges = this.handleUrlChanges.bind(this);
+    this.selectFirstJob = this.selectFirstJob.bind(this);
 
     RepositoryModel.getList().then((repos) => {
       const currentRepo = repos.find(repo => repo.name === repoName) || this.state.currentRepo;
@@ -95,7 +96,7 @@ class JobView extends React.Component {
     window.addEventListener('resize', this.updateDimensions, false);
     window.addEventListener('hashchange', this.handleUrlChanges, false);
 
-    this.$rootScope.$on(thEvents.toggleFieldFilterVisible, () => {
+    this.toggleFieldFilterVisibleUnlisten = this.$rootScope.$on(thEvents.toggleFieldFilterVisible, () => {
       this.toggleFieldFilterVisible();
     });
 
@@ -128,6 +129,7 @@ class JobView extends React.Component {
   }
 
   componentWillUnmount() {
+    this.toggleFieldFilterVisibleUnlisten();
     window.removeEventListener('resize', this.updateDimensions, false);
     window.removeEventListener('hashchange', this.handleUrlChanges, false);
   }
@@ -178,10 +180,6 @@ class JobView extends React.Component {
     this.setState({ isFieldFilterVisible: !this.state.isFieldFilterVisible });
   }
 
-  pinJobs() {
-    this.$rootScope.$emit(thEvents.pinJobs, this.ThResultSetStore.getAllShownJobs());
-  }
-
   updateDimensions() {
     this.setState(JobView.getSplitterDimensions(this.props));
   }
@@ -192,6 +190,14 @@ class JobView extends React.Component {
     });
   }
 
+  selectFirstJob(jobs) {
+    const { selectedJob } = this.props;
+
+    if (!selectedJob) {
+      this.$rootScope.$emit(thEvents.jobClick, jobs[0]);
+    }
+  }
+
   clearIfEligibleTarget(target) {
     if (target.hasAttribute('data-job-clear-on-click')) {
       this.$rootScope.$emit(thEvents.clearSelectedJob, target);
@@ -230,64 +236,70 @@ class JobView extends React.Component {
     ), []);
 
     return (
-      <KeyboardShortcuts
-        filterModel={filterModel}
+      <PinnedJobs
+        notify={this.thNotify}
         selectedJob={selectedJob}
-        $injector={$injector}
+        selectFirstJob={this.selectFirstJob}
       >
-        <PrimaryNavBar
-          repos={repos}
-          updateButtonClick={this.updateButtonClick}
-          pinJobs={this.pinJobs}
-          serverChanged={serverChanged}
+        <KeyboardShortcuts
           filterModel={filterModel}
-          setUser={this.setUser}
-          user={user}
-          setCurrentRepoTreeStatus={this.setCurrentRepoTreeStatus}
+          selectedJob={selectedJob}
           $injector={$injector}
-        />
-        <SplitPane
-          split="horizontal"
-          size={`${pushListPct}%`}
-          onChange={size => this.handleSplitChange(size)}
         >
-          <div className="d-flex flex-column w-100" onClick={evt => this.clearIfEligibleTarget(evt.target)}>
-            {(isFieldFilterVisible || !!filterBarFilters.length) && <ActiveFilters
-              $injector={$injector}
-              classificationTypes={classificationTypes}
-              filterModel={filterModel}
-              filterBarFilters={filterBarFilters}
-              isFieldFilterVisible={isFieldFilterVisible}
-              toggleFieldFilterVisible={this.toggleFieldFilterVisible}
-            />}
-            {serverChangedDelayed && <UpdateAvailable
-              updateButtonClick={this.updateButtonClick}
-            />}
-            <div id="th-global-content" className="th-global-content" data-job-clear-on-click>
-              <span className="th-view-content">
-                <PushList
-                  user={user}
-                  repoName={repoName}
-                  revision={revision}
-                  currentRepo={currentRepo}
-                  filterModel={filterModel}
-                  $injector={$injector}
-                />
-              </span>
-            </div>
-          </div>
-          <DetailsPanel
-            resizedHeight={detailsHeight}
-            currentRepo={currentRepo}
-            repoName={repoName}
-            selectedJob={selectedJob}
+          <PrimaryNavBar
+            repos={repos}
+            updateButtonClick={this.updateButtonClick}
+            serverChanged={serverChanged}
+            filterModel={filterModel}
+            setUser={this.setUser}
             user={user}
-            classificationTypes={classificationTypes}
-            classificationMap={classificationMap}
+            setCurrentRepoTreeStatus={this.setCurrentRepoTreeStatus}
             $injector={$injector}
+            resultSetStore={this.ThResultSetStore}
           />
-        </SplitPane>
-      </KeyboardShortcuts>
+          <SplitPane
+            split="horizontal"
+            size={`${pushListPct}%`}
+            onChange={size => this.handleSplitChange(size)}
+          >
+            <div className="d-flex flex-column w-100" onClick={evt => this.clearIfEligibleTarget(evt.target)}>
+              {(isFieldFilterVisible || !!filterBarFilters.length) && <ActiveFilters
+                $injector={$injector}
+                classificationTypes={classificationTypes}
+                filterModel={filterModel}
+                filterBarFilters={filterBarFilters}
+                isFieldFilterVisible={isFieldFilterVisible}
+                toggleFieldFilterVisible={this.toggleFieldFilterVisible}
+              />}
+              {serverChangedDelayed && <UpdateAvailable
+                updateButtonClick={this.updateButtonClick}
+              />}
+              <div id="th-global-content" className="th-global-content" data-job-clear-on-click>
+                <span className="th-view-content">
+                  <PushList
+                    user={user}
+                    repoName={repoName}
+                    revision={revision}
+                    currentRepo={currentRepo}
+                    filterModel={filterModel}
+                    $injector={$injector}
+                  />
+                </span>
+              </div>
+            </div>
+            <DetailsPanel
+              resizedHeight={detailsHeight}
+              currentRepo={currentRepo}
+              repoName={repoName}
+              selectedJob={selectedJob}
+              user={user}
+              classificationTypes={classificationTypes}
+              classificationMap={classificationMap}
+              $injector={$injector}
+            />
+          </SplitPane>
+        </KeyboardShortcuts>
+      </PinnedJobs>
     );
   }
 }

diff --git a/ui/job-view/KeyboardShortcuts.jsx b/ui/job-view/KeyboardShortcuts.jsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { HotKeys } from 'react-hotkeys';
 
 import { thEvents, thJobNavSelectors } from '../js/constants';
+import { withPinnedJobs } from './context/PinnedJobs';
 
 const keyMap = {
   addRelatedBug: 'b',
@@ -27,7 +28,7 @@ const keyMap = {
   deleteClassification: 'ctrl+backspace',
 };
 
-export default class KeyboardShortcuts extends React.Component {
+class KeyboardShortcuts extends React.Component {
   constructor(props) {
     super(props);
 
@@ -108,36 +109,37 @@ export default class KeyboardShortcuts extends React.Component {
 
   // pin selected job to pinboard
   pinJob() {
-    const { selectedJob } = this.props;
+    const { selectedJob, pinJob } = this.props;
 
     if (selectedJob) {
-      this.$rootScope.$emit(thEvents.jobPin, selectedJob);
+      pinJob(selectedJob);
     }
   }
 
   // pin selected job to pinboard and add a related bug
   addRelatedBug() {
-    const { selectedJob } = this.$rootScope;
+    const { selectedJob, pinJob } = this.props;
 
     if (selectedJob) {
-      this.$rootScope.$emit(thEvents.addRelatedBug, selectedJob);
+      pinJob(selectedJob);
+      document.getElementById('add-related-bug-button').click();
       document.getElementById('related-bug-input').focus();
     }
   }
 
   // pin selected job to pinboard and enter classification
   pinEditComment() {
-    const { selectedJob } = this.$rootScope;
+    const { selectedJob, pinJob } = this.props;
 
     if (selectedJob) {
-      this.$rootScope.$emit(thEvents.jobPin, selectedJob);
+      pinJob(selectedJob);
       document.getElementById('classification-comment').focus();
     }
   }
 
   // clear the PinBoard
   clearPinboard() {
-    this.$rootScope.$emit(thEvents.clearPinboard);
+    this.props.unPinAll();
   }
 
   saveClassification() {
@@ -261,10 +263,14 @@ export default class KeyboardShortcuts extends React.Component {
 KeyboardShortcuts.propTypes = {
   filterModel: PropTypes.object.isRequired,
   $injector: PropTypes.object.isRequired,
+  pinJob: PropTypes.func.isRequired,
+  unPinAll: PropTypes.func.isRequired,
   children: PropTypes.array.isRequired,
   selectedJob: PropTypes.object,
 };
 
 KeyboardShortcuts.defaultProps = {
   selectedJob: null,
 };
+
+export default withPinnedJobs(KeyboardShortcuts);