Fix filetree scrolling (#996)

Fix filetree scrolling

Author: Ben Junya

web/init/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@replicatedhq/ship-init",
-  "version": "1.6.3",
+  "version": "1.6.4",
   "description": "Shared component that contains the Ship Init app",
   "author": "Replicated, Inc.",
   "license": "Apache-2.0",

web/init/src/components/kustomize/kustomize_overlay/KustomizeOverlay.jsx

@@ -139,15 +139,15 @@ export default class KustomizeOverlay extends React.Component {
     };
     await this.props.applyPatch(applyPayload)
       .catch((err) => {
-        this.setState({ 
+        this.setState({
           applyPatchErr: true,
-          applyPatchErrorMessage: err.message 
+          applyPatchErrorMessage: err.message
         });
 
         setTimeout(() => {
-          this.setState({ 
+          this.setState({
             applyPatchErr: false,
-            applyPatchErrorMessage: "" 
+            applyPatchErrorMessage: ""
           });
         }, 3000);
       });
@@ -423,40 +423,42 @@ export default class KustomizeOverlay extends React.Component {
           <div className="flex flex1 u-minHeight--full u-height--full">
             <div className="flex-column flex1 Sidebar-wrapper u-overflow--hidden">
               <div className="flex-column flex1">
-                <div className="flex1 dirtree-wrapper flex-column u-overflow-hidden u-background--biscay">
-                  {fileTree.map((tree, i) => (
-                    <div className={`u-overflow--auto FileTree-wrapper u-position--relative dirtree ${i > 0 ? "flex-auto has-border" : "flex-0-auto"}`} key={i}>
-                      <input type="checkbox" name={`sub-dir-${tree.name}-${tree.children.length}-${tree.path}-${i}`} id={`sub-dir-${tree.name}-${tree.children.length}-${tree.path}-${i}`} defaultChecked={true} />
-                      <label htmlFor={`sub-dir-${tree.name}-${tree.children.length}-${tree.path}-${i}`}>{tree.name === "/" ? "base" : tree.name}</label>
-                      <FileTree
-                        files={tree.children}
-                        basePath={tree.name}
-                        handleFileSelect={(path) => this.setSelectedFile(path)}
-                        handleDeleteOverlay={this.toggleModal}
-                        handleClickExcludedBase={this.toggleModalForExcludedBase}
-                        selectedFile={this.state.selectedFile}
-                        isOverlayTree={tree.name === "overlays"}
-                        isResourceTree={tree.name === "resources"}
-                        isBaseTree={tree.name === "/"}
+                <div className="flex1 u-overflow--auto u-background--biscay">
+                  <div className="flex1 dirtree-wrapper u-overflow--hidden flex-column">
+                    {fileTree.map((tree, i) => (
+                      <div className={`u-overflow--auto FileTree-wrapper u-position--relative dirtree ${i > 0 ? "flex-auto has-border" : "flex-0-auto"}`} key={i}>
+                        <input type="checkbox" name={`sub-dir-${tree.name}-${tree.children.length}-${tree.path}-${i}`} id={`sub-dir-${tree.name}-${tree.children.length}-${tree.path}-${i}`} defaultChecked={true} />
+                        <label htmlFor={`sub-dir-${tree.name}-${tree.children.length}-${tree.path}-${i}`}>{tree.name === "/" ? "base" : tree.name}</label>
+                        <FileTree
+                          files={tree.children}
+                          basePath={tree.name}
+                          handleFileSelect={(path) => this.setSelectedFile(path)}
+                          handleDeleteOverlay={this.toggleModal}
+                          handleClickExcludedBase={this.toggleModalForExcludedBase}
+                          selectedFile={this.state.selectedFile}
+                          isOverlayTree={tree.name === "overlays"}
+                          isResourceTree={tree.name === "resources"}
+                          isBaseTree={tree.name === "/"}
+                        />
+                      </div>
+                    ))}
+                    <div className="add-new-resource u-position--relative" ref={this.addResourceWrapper}>
+                      <input
+                        type="text"
+                        className={`Input add-resource-name-input u-position--absolute ${!addingNewResource ? "u-visibility--hidden" : ""}`}
+                        name="new-resource"
+                        placeholder="filename.yaml"
+                        onChange={(e) => { this.setState({ newResourceName: e.target.value }) }}
+                        onKeyPress={(e) => { this.handleCreateNewResource(e) }}
+                        value={newResourceName}
+                        ref={this.addResourceInput}
                       />
+                      <p
+                        className={`add-resource-link u-position--absolute u-marginTop--small u-marginLeft--normal u-cursor--pointer u-fontSize--small u-color--silverSand u-fontWeight--bold ${addingNewResource ? "u-visibility--hidden" : ""}`}
+                        onClick={this.handleAddResourceClick}
+                      >+ Add Resource
+                      </p>
                     </div>
-                  ))}
-                  <div className="add-new-resource u-position--relative" ref={this.addResourceWrapper}>
-                    <input
-                      type="text"
-                      className={`Input add-resource-name-input u-position--absolute ${!addingNewResource ? "u-visibility--hidden" : ""}`}
-                      name="new-resource"
-                      placeholder="filename.yaml"
-                      onChange={(e) => { this.setState({ newResourceName: e.target.value }) }}
-                      onKeyPress={(e) => { this.handleCreateNewResource(e) }}
-                      value={newResourceName}
-                      ref={this.addResourceInput}
-                    />
-                    <p
-                      className={`add-resource-link u-position--absolute u-marginTop--small u-marginLeft--normal u-cursor--pointer u-fontSize--small u-color--silverSand u-fontWeight--bold ${addingNewResource ? "u-visibility--hidden" : ""}`}
-                      onClick={this.handleAddResourceClick}
-                    >+ Add Resource
-                    </p>
                   </div>
                 </div>
               </div>

web/init/src/scss/components/shared/FileTree.scss

@@ -1,6 +1,6 @@
 .dirtree-wrapper {
   background-color: #124B71;
-  padding-bottom: 30px;
+  padding-bottom: 80px;
 }
 
 .dirtree {

web/init/src/scss/utilities/colors.scss

@@ -17,11 +17,11 @@
 .u-color--tundora {
   color: #4A4A4A;
  }
- 
+
  .u-color--doveGray {
    color: #717171;
  }
- 
+
 .u-color--dustyGray {
   color: #9B9B9B;
 }
@@ -34,10 +34,14 @@
   color: #65A61D;
 }
 
-.u-color--chateauGreen { 
-  color: #44BB66; 
+.u-color--chateauGreen {
+  color: #44BB66;
 }
 
 .u-color--error {
   color: #EE5042;
 }
+
+.u-background--biscay {
+  background-color: #124B71;
+}