Merge branch 'release/0.3.4'

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.3.4
+
+July 30, 2018
+
+- Scroll files tree to always show the active file
+
 ## 0.3.3
 
 June 20, 2018

docs/DEVELOPMENT.md

@@ -4,18 +4,18 @@
 
 ## Details
 
-1. Default webpack dev server (or `localhost:3000`) is not useful for most development because there is no way to use the `chrome.*` APIs. To access these APIs, the js files need to be served by Chrome as an unloaded extension, and not from a web server.
+1.  Default webpack dev server (or `localhost:3000`) is not useful for most development because there is no way to use the `chrome.*` APIs. To access these APIs, the js files need to be served by Chrome as an unloaded extension, and not from a web server.
 
-2. `npm run start`: this starts the webpack dev server, and forces it to save the bundled js file to the disk, so that Chrome can load it as an unpacked extension. Because the files on disk are updated, the Chrome extension is up-to-date and does not need to be manually reloaded from `chrome://extensions`. This changes are done by `config-overrides.js`.
+2.  `npm run start`: this starts the webpack dev server, and forces it to save the bundled js file to the disk, so that Chrome can load it as an unpacked extension. Because the files on disk are updated, the Chrome extension is up-to-date and does not need to be manually reloaded from `chrome://extensions`. This changes are done by `config-overrides.js`.
 
-3. The `public/background.js` is not covered by webpack config. During development, that means changes in background.js are not watched by the dev server, and the server **needs to be restarted manually**. This also means that background.js is not minified before shipping to production.
+3.  The `public/background.js` is not covered by webpack config. During development, that means changes in background.js are not watched by the dev server, and the server **needs to be restarted manually**. This also means that background.js is not minified before shipping to production.
 
-4. Another issue with `background.js` is that it needs to be manually updated with the correct locations for js/css assets that are generated by webpack. This is done by `scripts/helpers.js` at this point, but might be best delegated to something else.
+4.  Another issue with `background.js` is that it needs to be manually updated with the correct locations for js/css assets that are generated by webpack. This is done by `scripts/helpers.js` at this point, but might be best delegated to something else.
 
-5. React runs inside the injected content script, and is not able to connect to the dev server during `npm run start`. This means the github.com page needs to be manually reloaded for changes to be reflected.
+5.  React runs inside the injected content script, and is not able to connect to the dev server during `npm run start`. This means the github.com page needs to be manually reloaded for changes to be reflected.
 
-6. For debugging using breakpoints, it is possible to do this via Chrome Developer Tools by selecting **Content scripts** tab in the **Sources** tab.
+6.  For debugging using breakpoints, it is possible to do this via Chrome Developer Tools by selecting **Content scripts** tab in the **Sources** tab.
 
-7. The [react-chrome-extension-boilerplate](https://github.com/jhen0409/react-chrome-extension-boilerplate) project implements hot-reloading in the injected content script by creating an iframe for the injected script, and maintains a socket connection to the dev server inside the iframe. This might not be a good idea for us since the extension needs to interact with the Github DOM.
+7.  The [react-chrome-extension-boilerplate](https://github.com/jhen0409/react-chrome-extension-boilerplate) project implements hot-reloading in the injected content script by creating an iframe for the injected script, and maintains a socket connection to the dev server inside the iframe. This might not be a good idea for us since the extension needs to interact with the Github DOM.
 
-8. `npm run build` creates a minified build, and this is used inside `npm run pack`, which packs the minified build into a crx file.
+8.  `npm run build` creates a minified build, and this is used inside `npm run pack`, which packs the minified build into a crx file.

public/manifest.json

@@ -3,7 +3,7 @@
   "name": "Rubberduck",
   "short_name": "Rubberduck",
   "description": "Code review assistant for GitHub and Bitbucket",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "background": {
     "persistent": false,
     "scripts": ["background.js"]

src/adapters/github/path.js

@@ -23,7 +23,9 @@ const GH_RESERVED_SUB_PAGES = [
   "settings",
   "pulse",
   "wiki",
-  "projects"
+  "projects",
+  "stargazers",
+  "issues"
 ];
 const GH_404_SEL = "#parallax_wrapper";
 const GH_AUTH_FORM_SEL = ".auth-form-body";

src/components/tree/File.js

@@ -122,9 +122,8 @@ export default class File extends React.Component {
   };
 
   isSelected = () => {
-    const { path: filePath } = this.props;
-    const { repoDetails } = this.props.data;
-    const { path: currentPath } = repoDetails;
+    const { path: filePath, data } = this.props;
+    const { path: currentPath } = data.repoDetails;
     return currentPath === filePath;
   };
 

src/components/tree/Folder.js

@@ -66,8 +66,17 @@ class Folder extends React.Component {
   };
 
   isCurrentlyOpen = () => {
-    const { path: currentPath } = this.props.data.repoDetails;
-    return currentPath && currentPath.indexOf(this.props.path) >= 0;
+    const { path, data } = this.props;
+    const { path: currentPath } = data.repoDetails;
+    return currentPath && currentPath.indexOf(path) >= 0;
+  };
+
+  isLastOpenFolder = () => {
+    if (this.isCurrentlyOpen()) {
+      const { path, data } = this.props;
+      const { path: currentPath } = data.repoDetails;
+      return currentPath.replace(path, "").split("/").length === 2;
+    }
   };
 
   componentDidMount() {
@@ -82,6 +91,20 @@ class Folder extends React.Component {
     this.setState({
       isCollapsed
     });
+
+    if (this.isLastOpenFolder()) {
+      // Scroll the files tree to show the active file
+      const container = document.querySelector(
+        "#mercury-sidebar div.repo-info-sections"
+      );
+
+      if (this.folderEl && container) {
+        container.scrollTop =
+          this.folderEl.getBoundingClientRect().y -
+          container.getBoundingClientRect().y -
+          50;
+      }
+    }
   }
 
   renderFolderLabel = () => (
@@ -101,7 +124,12 @@ class Folder extends React.Component {
     containerClassName += isCollapsed ? " collapsed" : "";
 
     return (
-      <div className={containerClassName}>
+      <div
+        className={containerClassName}
+        ref={element => {
+          this.folderEl = element;
+        }}
+      >
         {this.renderFolderLabel()}
         {isCollapsed ? null : this.renderFolderStructure()}
       </div>

src/utils/version.js

@@ -1 +1 @@
-export const VERSION = "0.3.3";
+export const VERSION = "0.3.4";