From 95f69b0dde36a8ef33a084296c7b3941a35c1ed6 Mon Sep 17 00:00:00 2001
From: Tim Glaser <tglaser@newrelic.com>
Date: Mon, 22 Jun 2020 13:39:41 -0700
Subject: [PATCH] feat(CodeSnippet): Truncate filename in middle

---
 package-lock.json                      | 49 +++++++++-----------------
 package.json                           |  1 +
 src/components/CodeSnippet.js          | 11 ++++--
 src/components/CodeSnippet.module.scss |  1 -
 4 files changed, 27 insertions(+), 35 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index eec1ca52e..f7aa74575 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11141,8 +11141,7 @@
         "ansi-regex": {
           "version": "2.1.1",
           "resolved": false,
-          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-          "optional": true
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
         },
         "aproba": {
           "version": "1.2.0",
@@ -11163,14 +11162,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "resolved": false,
-          "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
-          "optional": true
+          "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
         },
         "brace-expansion": {
           "version": "1.1.11",
           "resolved": false,
           "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -11185,20 +11182,17 @@
         "code-point-at": {
           "version": "1.1.0",
           "resolved": false,
-          "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
-          "optional": true
+          "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c="
         },
         "concat-map": {
           "version": "0.0.1",
           "resolved": false,
-          "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
-          "optional": true
+          "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
         },
         "console-control-strings": {
           "version": "1.1.0",
           "resolved": false,
-          "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
-          "optional": true
+          "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4="
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -11315,8 +11309,7 @@
         "inherits": {
           "version": "2.0.4",
           "resolved": false,
-          "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-          "optional": true
+          "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
         },
         "ini": {
           "version": "1.3.5",
@@ -11328,7 +11321,6 @@
           "version": "1.0.0",
           "resolved": false,
           "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -11343,7 +11335,6 @@
           "version": "3.0.4",
           "resolved": false,
           "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -11351,14 +11342,12 @@
         "minimist": {
           "version": "1.2.5",
           "resolved": false,
-          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
-          "optional": true
+          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
         },
         "minipass": {
           "version": "2.9.0",
           "resolved": false,
           "integrity": "sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==",
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -11377,7 +11366,6 @@
           "version": "0.5.3",
           "resolved": false,
           "integrity": "sha512-P+2gwrFqx8lhew375MQHHeTlY8AuOJSrGf0R5ddkEndUkmwpgUob/vQuBD1V22/Cw1/lJr4x+EjllSezBThzBg==",
-          "optional": true,
           "requires": {
             "minimist": "^1.2.5"
           }
@@ -11439,8 +11427,7 @@
         "npm-normalize-package-bin": {
           "version": "1.0.1",
           "resolved": false,
-          "integrity": "sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA==",
-          "optional": true
+          "integrity": "sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA=="
         },
         "npm-packlist": {
           "version": "1.4.8",
@@ -11468,8 +11455,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "resolved": false,
-          "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
-          "optional": true
+          "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0="
         },
         "object-assign": {
           "version": "4.1.1",
@@ -11481,7 +11467,6 @@
           "version": "1.4.0",
           "resolved": false,
           "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -11559,8 +11544,7 @@
         "safe-buffer": {
           "version": "5.1.2",
           "resolved": false,
-          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-          "optional": true
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -11596,7 +11580,6 @@
           "version": "1.0.2",
           "resolved": false,
           "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -11616,7 +11599,6 @@
           "version": "3.0.1",
           "resolved": false,
           "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -11660,14 +11642,12 @@
         "wrappy": {
           "version": "1.0.2",
           "resolved": false,
-          "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
-          "optional": true
+          "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
         },
         "yallist": {
           "version": "3.1.1",
           "resolved": false,
-          "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
-          "optional": true
+          "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
         }
       }
     },
@@ -24010,6 +23990,11 @@
         }
       }
     },
+    "react-middle-ellipsis": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/react-middle-ellipsis/-/react-middle-ellipsis-1.1.0.tgz",
+      "integrity": "sha512-jEkF6l6l12/V70bYqCCEdHRDFHVG8kdR46tcE5HBssgPDaoLm7XC9hkrL1cW4eL4wi2/0g19PMORge38ReXp9A=="
+    },
     "react-reconciler": {
       "version": "0.24.0",
       "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.24.0.tgz",
diff --git a/package.json b/package.json
index 062233d60..ac72323f3 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "react-helmet": "^6.0.0",
     "react-live": "^2.2.2",
     "react-markdown": "^4.3.1",
+    "react-middle-ellipsis": "^1.1.0",
     "react-shadow": "^18.1.2"
   },
   "devDependencies": {
diff --git a/src/components/CodeSnippet.js b/src/components/CodeSnippet.js
index c85a9192c..77ecb9d94 100644
--- a/src/components/CodeSnippet.js
+++ b/src/components/CodeSnippet.js
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Highlight, { defaultProps } from 'prism-react-renderer';
 import github from 'prism-react-renderer/themes/github';
+import MiddleEllipsis from 'react-middle-ellipsis';
 import FeatherIcon from './FeatherIcon';
 import styles from './CodeSnippet.module.scss';
 import useClipboard from '../hooks/useClipboard';
@@ -39,9 +40,15 @@ const CodeSnippet = ({ children, copy, className, lineNumbers, fileName }) => {
           )}
         </Highlight>
       </div>
-      {(copy !== 'false' || !!fileName) && (
+      {(copy !== 'false' || fileName) && (
         <div className={styles.bottomBar}>
-          <div className={styles.fileName}>{fileName}</div>
+          <div className={styles.fileName}>
+            {fileName && (
+              <MiddleEllipsis>
+                <span title={fileName}>{fileName}</span>
+              </MiddleEllipsis>
+            )}
+          </div>
           {copy !== 'false' && (
             <button
               className={styles.copyButton}
diff --git a/src/components/CodeSnippet.module.scss b/src/components/CodeSnippet.module.scss
index 024955fe9..ef3be624a 100644
--- a/src/components/CodeSnippet.module.scss
+++ b/src/components/CodeSnippet.module.scss
@@ -40,7 +40,6 @@
 .fileName {
   font-family: var(--code-font);
   font-size: 0.75rem;
-  text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
   padding-right: 0.5rem;