From 937421e90c50ad4dcdc3506818b73db97ef08285 Mon Sep 17 00:00:00 2001
From: Cassie Tarakajian <ctarakajian@gmail.com>
Date: Thu, 30 Jul 2020 18:59:12 -0400
Subject: [PATCH 1/4] [#1526] Add ellipsis to sidebar file names

---
 client/modules/IDE/components/FileNode.jsx | 43 +++++++++++++++++++++-
 client/modules/IDE/pages/IDEView.jsx       |  2 +-
 client/styles/components/_sidebar.scss     | 25 +++++++++++--
 3 files changed, 65 insertions(+), 5 deletions(-)

diff --git a/client/modules/IDE/components/FileNode.jsx b/client/modules/IDE/components/FileNode.jsx
index 57238cf8..7bfaa5de 100644
--- a/client/modules/IDE/components/FileNode.jsx
+++ b/client/modules/IDE/components/FileNode.jsx
@@ -10,6 +10,47 @@ import FolderRightIcon from '../../../images/triangle-arrow-right.svg';
 import FolderDownIcon from '../../../images/triangle-arrow-down.svg';
 import FileIcon from '../../../images/file.svg';
 
+function FileName({ name }) {
+  const nameArray = name.split('.');
+  if (nameArray.length > 1) {
+    const extension = `.${nameArray[nameArray.length - 1]}`;
+    const fileName = nameArray.slice(0, -1).join('');
+    const firstLetter = fileName[0];
+    const lastLetter = fileName[fileName.length - 1];
+    const middleText = fileName.slice(1, -1);
+    return (
+      <span className="sidebar__file-item-name-text">
+        <span>{firstLetter}</span>
+        {fileName.length > 2 &&
+          <span className="sidebar__file-item-name--ellipsis">{middleText}</span>
+        }
+        {fileName.length > 1 &&
+          <span>{lastLetter}</span>
+        }
+        <span>{extension}</span>
+      </span>
+    );
+  }
+  const firstLetter = name[0];
+  const lastLetter = name[name.length - 1];
+  const middleText = name.slice(1, -1);
+  return (
+    <span className="sidebar__file-item-name-text">
+      <span>{firstLetter}</span>
+      {name.length > 2 &&
+        <span className="sidebar__file-item-name--ellipsis">{middleText}</span>
+      }
+      {name.length > 1 &&
+        <span>{lastLetter}</span>
+      }
+    </span>
+  );
+}
+
+FileName.propTypes = {
+  name: PropTypes.string.isRequired
+};
+
 export class FileNode extends React.Component {
   constructor(props) {
     super(props);
@@ -210,7 +251,7 @@ export class FileNode extends React.Component {
               className="sidebar__file-item-name"
               onClick={this.handleFileClick}
             >
-              {this.state.updatedName}
+              <FileName name={this.state.updatedName} />
             </button>
             <input
               data-testid="input"
diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx
index b28e505f..7f69aaed 100644
--- a/client/modules/IDE/pages/IDEView.jsx
+++ b/client/modules/IDE/pages/IDEView.jsx
@@ -254,7 +254,7 @@ class IDEView extends React.Component {
             onChange={size => this.setState({ sidebarSize: size })}
             onDragFinished={this._handleSidebarPaneOnDragFinished}
             allowResize={this.props.ide.sidebarIsExpanded}
-            minSize={20}
+            minSize={125}
           >
             <Sidebar
               files={this.props.files}
diff --git a/client/styles/components/_sidebar.scss b/client/styles/components/_sidebar.scss
index ffafc439..761bda91 100644
--- a/client/styles/components/_sidebar.scss
+++ b/client/styles/components/_sidebar.scss
@@ -110,8 +110,28 @@
   }
 }
 
+.sidebar__file-item-name--ellipsis {
+  overflow-x: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  min-width: #{15 / $base-font-size}rem;
+}
+
+.sidebar__file-item-name-text {
+  display: flex;
+  width: 100%;
+  overflow: hidden;
+  min-width: #{50 / $base-font-size}rem;
+  white-space: nowrap;
+  text-align: left;
+}
+
 .sidebar__file-item-name {
   padding: #{4 / $base-font-size}rem 0;
+  padding-right: #{25 / $base-font-size}rem;
+  font-family: Inconsolata, monospace;
+  font-size: #{14 / $base-font-size}rem;
+  overflow: hidden;
   .sidebar__file-item--editing & {
     display: none;
   }
@@ -174,6 +194,8 @@
   padding: 0;
   border: 0;
   width: calc(100% - #{63 / $base-font-size}rem);
+  font-family: Inconsolata, monospace;
+  font-size: #{14 / $base-font-size}rem;
   .sidebar__file-item--editing & {
     display: inline-block;
   }
@@ -254,9 +276,6 @@
       fill: getThemifyVariable('secondary-text-color');
     }
   }
-  & svg {
-    height: #{10 / $base-font-size}rem;
-  }
   background-color: transparent;
   border: none;
 }

From 65bd4b2ff736af3c24ea178637da4b57d501c5a7 Mon Sep 17 00:00:00 2001
From: Cassie Tarakajian <ctarakajian@gmail.com>
Date: Mon, 3 Aug 2020 13:52:07 -0400
Subject: [PATCH 2/4] [#1526] Refactor FileName component

- Create function parseFileName to separate a file name into first
  letter, last letter, middle, extension
---
 client/modules/IDE/components/FileNode.jsx | 52 ++++++++++++++--------
 1 file changed, 33 insertions(+), 19 deletions(-)

diff --git a/client/modules/IDE/components/FileNode.jsx b/client/modules/IDE/components/FileNode.jsx
index 7bfaa5de..4e54460b 100644
--- a/client/modules/IDE/components/FileNode.jsx
+++ b/client/modules/IDE/components/FileNode.jsx
@@ -10,39 +10,53 @@ import FolderRightIcon from '../../../images/triangle-arrow-right.svg';
 import FolderDownIcon from '../../../images/triangle-arrow-down.svg';
 import FileIcon from '../../../images/file.svg';
 
-function FileName({ name }) {
+function parseFileName(name) {
   const nameArray = name.split('.');
   if (nameArray.length > 1) {
     const extension = `.${nameArray[nameArray.length - 1]}`;
-    const fileName = nameArray.slice(0, -1).join('');
-    const firstLetter = fileName[0];
-    const lastLetter = fileName[fileName.length - 1];
-    const middleText = fileName.slice(1, -1);
-    return (
-      <span className="sidebar__file-item-name-text">
-        <span>{firstLetter}</span>
-        {fileName.length > 2 &&
-          <span className="sidebar__file-item-name--ellipsis">{middleText}</span>
-        }
-        {fileName.length > 1 &&
-          <span>{lastLetter}</span>
-        }
-        <span>{extension}</span>
-      </span>
-    );
+    const baseName = nameArray.slice(0, -1).join('');
+    const firstLetter = baseName[0];
+    const lastLetter = baseName[baseName.length - 1];
+    const middleText = baseName.slice(1, -1);
+    return {
+      baseName,
+      firstLetter,
+      lastLetter,
+      middleText,
+      extension
+    };
   }
   const firstLetter = name[0];
   const lastLetter = name[name.length - 1];
   const middleText = name.slice(1, -1);
+  return {
+    baseName: name,
+    firstLetter,
+    lastLetter,
+    middleText
+  };
+}
+
+function FileName({ name }) {
+  const {
+    baseName,
+    firstLetter,
+    lastLetter,
+    middleText,
+    extension
+  } = parseFileName(name);
   return (
     <span className="sidebar__file-item-name-text">
       <span>{firstLetter}</span>
-      {name.length > 2 &&
+      {baseName.length > 2 &&
         <span className="sidebar__file-item-name--ellipsis">{middleText}</span>
       }
-      {name.length > 1 &&
+      {baseName.length > 1 &&
         <span>{lastLetter}</span>
       }
+      {extension &&
+        <span>{extension}</span>
+      }
     </span>
   );
 }

From a56740c7c4a3930ebfbf49583f4d6499849b4e52 Mon Sep 17 00:00:00 2001
From: Cassie Tarakajian <ctarakajian@gmail.com>
Date: Wed, 5 Aug 2020 17:50:07 -0400
Subject: [PATCH 3/4] [#1532] Fix labels for files

---
 client/modules/IDE/components/FileNode.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/modules/IDE/components/FileNode.jsx b/client/modules/IDE/components/FileNode.jsx
index 4e54460b..4f16387d 100644
--- a/client/modules/IDE/components/FileNode.jsx
+++ b/client/modules/IDE/components/FileNode.jsx
@@ -261,7 +261,7 @@ export class FileNode extends React.Component {
               </div>
             }
             <button
-              aria-label="Name"
+              aria-label={this.state.updatedName}
               className="sidebar__file-item-name"
               onClick={this.handleFileClick}
             >

From 763ee140fa58f1f87992bc8072187eba2d03edbc Mon Sep 17 00:00:00 2001
From: Cassie Tarakajian <ctarakajian@gmail.com>
Date: Wed, 5 Aug 2020 18:27:38 -0400
Subject: [PATCH 4/4] [#1526] Fix failing FileNode test

---
 client/modules/IDE/components/FileNode.jsx      | 1 +
 client/modules/IDE/components/FileNode.test.jsx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/modules/IDE/components/FileNode.jsx b/client/modules/IDE/components/FileNode.jsx
index 4f16387d..e7869f26 100644
--- a/client/modules/IDE/components/FileNode.jsx
+++ b/client/modules/IDE/components/FileNode.jsx
@@ -264,6 +264,7 @@ export class FileNode extends React.Component {
               aria-label={this.state.updatedName}
               className="sidebar__file-item-name"
               onClick={this.handleFileClick}
+              data-testid="file-name"
             >
               <FileName name={this.state.updatedName} />
             </button>
diff --git a/client/modules/IDE/components/FileNode.test.jsx b/client/modules/IDE/components/FileNode.test.jsx
index cc913858..ddb8fec7 100644
--- a/client/modules/IDE/components/FileNode.test.jsx
+++ b/client/modules/IDE/components/FileNode.test.jsx
@@ -13,7 +13,7 @@ describe('<FileNode />', () => {
   };
 
   const expectFileNameToBe = async (expectedName) => {
-    const name = screen.getByLabelText(/Name/i);
+    const name = screen.getByTestId('file-name');
     await waitFor(() => within(name).queryByText(expectedName));
   };