Validate name when renaming file (codesandbox#2494)

* break long names

* validate filename on rename

* show color validation when active

Author: yeion7

packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/index.js

@@ -39,6 +39,8 @@ class Entry extends React.PureComponent {
   handleValidateTitle = title => {
     const isInvalidTitle = this.props.renameValidator(this.props.id, title);
     this.setState({ error: isInvalidTitle });
+
+    return isInvalidTitle;
   };
 
   handleRename = (newTitle, force) => {

packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/index.js

@@ -325,7 +325,14 @@ class DirectoryEntry extends React.Component {
                 body={
                   <span>
                     Are you sure you want to delete{' '}
-                    <b>{this.state.moduleToDeleteTitle}</b>?
+                    <b
+                      css={`
+                        word-break: break-all;
+                      `}
+                    >
+                      {this.state.moduleToDeleteTitle}
+                    </b>
+                    ?
                     <br />
                     The file will be permanently removed.
                   </span>

packages/app/src/app/pages/Sandbox/Editor/Workspace/elements.js

@@ -60,6 +60,16 @@ export const getContainerStyles = props => {
     }
   `;
 
+  if (props.active) {
+    styles += `
+      color: ${getSelectedColor(
+        theme['list.activeSelectionForeground']
+      )} !important;
+      border-color: ${color()} !important;
+      background-color: ${color.lighten(0.1).clearer(0.8)()} !important;
+    `;
+  }
+
   if (props.editing) {
     styles += `
       color: ${theme.white()};
@@ -75,16 +85,6 @@ export const getContainerStyles = props => {
     }
   }
 
-  if (props.active) {
-    styles += `
-      color: ${getSelectedColor(
-        theme['list.activeSelectionForeground']
-      )} !important;
-      border-color: ${color()} !important;
-      background-color: ${color.lighten(0.1).clearer(0.8)()} !important;
-    `;
-  }
-
   if (props.rightColors) {
     styles += `
       border-right: 2px solid ${props.rightColors[0]};