Alias Support (codesandbox#1893)

* Update URLs for aliasing

* refactor for alias

* add patron check

* refactor export

* remove duplicate

* Final changes for alias

* Update packages/common/src/components/Preview/index.tsx

Co-Authored-By: Michaël De Boey <[email protected]>

* Update packages/app/src/app/pages/Dashboard/Content/SandboxCard/index.tsx

Co-Authored-By: Michaël De Boey <[email protected]>

* Update packages/app/src/app/pages/Dashboard/Content/SandboxCard/index.tsx

Co-Authored-By: Michaël De Boey <[email protected]>

* Update packages/app/src/app/pages/Dashboard/Content/SandboxCard/index.tsx

Co-Authored-By: Michaël De Boey <[email protected]>

Author: 2 people

packages/app/src/app/pages/Dashboard/Content/SandboxCard/index.tsx

@@ -58,6 +58,7 @@ type Props = {
   undeleteSandboxes: () => void;
   removedAt?: number;
   style?: React.CSSProperties;
+  alias: string | undefined;
 
   // React-DnD, lazy typings
   connectDragSource: any;
@@ -271,21 +272,21 @@ class SandboxItem extends React.PureComponent<Props, State> {
       this.props.isPatron &&
         [
           this.props.privacy !== 0 && {
-            title: `Make Sandbox Public`,
+            title: 'Make Sandbox Public',
             action: () => {
               this.props.setSandboxesPrivacy(0);
               return true;
             },
           },
           this.props.privacy !== 1 && {
-            title: `Make Sandbox Unlisted`,
+            title: 'Make Sandbox Unlisted',
             action: () => {
               this.props.setSandboxesPrivacy(1);
               return true;
             },
           },
           this.props.privacy !== 2 && {
-            title: `Make Sandbox Private`,
+            title: 'Make Sandbox Private',
             action: () => {
               this.props.setSandboxesPrivacy(2);
               return true;
@@ -321,7 +322,7 @@ class SandboxItem extends React.PureComponent<Props, State> {
 
   openSandbox = (openNewWindow = false) => {
     // @ts-ignore Git sandboxes aren't shown here anyway
-    const url = sandboxUrl({ id: this.props.id });
+    const url = sandboxUrl({ id: this.props.id, alias: this.props.alias });
 
     if (!this.props.removedAt) {
       if (openNewWindow === true) {

packages/app/src/app/pages/Dashboard/Content/SandboxGrid/index.js

@@ -13,6 +13,7 @@ import Column from 'react-virtualized/dist/commonjs/Table/Column';
 import Table from 'react-virtualized/dist/commonjs/Table';
 import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
 import downloadZip from 'app/store/providers/Utils/create-zip';
+import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name';
 import 'react-virtualized/styles.css';
 
 import SandboxItem from '../SandboxCard';
@@ -281,7 +282,8 @@ class SandboxGrid extends React.Component<*, State> {
       <SandboxItem
         isScrolling={this.isScrolling}
         id={item.id}
-        title={item.title || item.id}
+        title={getSandboxName(item)}
+        alias={item.alias}
         details={editedSince}
         style={style}
         key={key}

packages/app/src/app/pages/Dashboard/queries.js

@@ -11,6 +11,7 @@ const SIDEBAR_COLLECTION_FRAGMENT = gql`
 const SANDBOX_FRAGMENT = gql`
   fragment Sandbox on Sandbox {
     id
+    alias
     title
     description
     insertedAt

packages/app/src/app/pages/Live/index.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { inject, observer } from 'mobx-react';
 import { Link } from 'react-router-dom';
 
+import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name';
 import Navigation from 'app/pages/common/Navigation';
 import Fullscreen from '@codesandbox/common/lib/components/flex/Fullscreen';
 
@@ -173,7 +174,7 @@ class LivePage extends React.Component {
     const sandbox = store.editor.currentSandbox;
 
     if (sandbox) {
-      document.title = `${sandbox.title || sandbox.id} - CodeSandbox`;
+      document.title = `${getSandboxName(sandbox)} - CodeSandbox`;
     }
 
     return (

packages/app/src/app/pages/Profile/Showcase/SandboxInfo/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-
+import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name';
 import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
 import Row from '@codesandbox/common/lib/components/flex/Row';
 import Stat from 'app/components/Stat';
@@ -19,7 +19,7 @@ function SandboxInfo({ sandbox }) {
     <Container>
       <Row alignItems="center">
         <Title>
-          {sandbox.title || 'Undefined'} <Like sandbox={sandbox} />
+          {getSandboxName(sandbox)} <Like sandbox={sandbox} />
         </Title>
       </Row>
       <Row alignItems="flex-start">

packages/app/src/app/pages/Sandbox/Editor/Header/CollectionInfo/index.js

@@ -7,7 +7,7 @@ import { Spring } from 'react-spring/renderprops';
 
 import track from '@codesandbox/common/lib/utils/analytics';
 import { ESC } from '@codesandbox/common/lib/utils/keycodes';
-
+import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name';
 import { Container, SandboxName, SandboxInput, FolderName } from './elements';
 
 class CollectionInfo extends React.Component {
@@ -17,7 +17,7 @@ class CollectionInfo extends React.Component {
     collectionNameWidth: undefined,
   };
 
-  sandboxName = () => this.props.sandbox.title || 'Untitled';
+  sandboxName = () => getSandboxName(this.props.sandbox) || 'Untitled';
 
   updateSandboxInfo = () => {
     this.props.signals.workspace.sandboxInfoUpdated();

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

@@ -54,6 +54,13 @@ export const Description = styled.div`
   margin-top: 0.5rem;
 `;
 
+export const Alias = styled.div`
+  font-size: 0.875rem;
+  color: ${props =>
+    props.theme.light ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)'};
+  margin-top: 0.5rem;
+`;
+
 export const PropertyName = styled.span`
   display: inline-block;
   color: ${props =>

packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/index.js

@@ -11,6 +11,7 @@ import TeamIcon from 'react-icons/lib/md/people';
 
 import { UserWithAvatar } from '@codesandbox/common/lib/components/UserWithAvatar';
 import Stats from 'app/pages/common/Stats';
+import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name';
 import PrivacyStatus from 'app/components/PrivacyStatus';
 import GithubBadge from '@codesandbox/common/lib/components/GithubBadge';
 import EditableTags from 'app/components/EditableTags';
@@ -27,6 +28,7 @@ import {
   StatsContainer,
   PrivacyContainer,
   Title,
+  Alias,
   Description,
   EditPen,
   PropertyValue,
@@ -39,12 +41,17 @@ class Project extends React.Component {
   state = {
     editingTitle: false,
     editingDescription: false,
+    editingAlias: false,
   };
 
   setTitleEditing = () => {
     this.setState({ editingTitle: true });
   };
 
+  setAliasEditing = () => {
+    this.setState({ editingAlias: true });
+  };
+
   setDescriptionEditing = () => {
     this.setState({ editingDescription: true });
   };
@@ -82,6 +89,7 @@ class Project extends React.Component {
     this.setState({
       editingTitle: false,
       editingDescription: false,
+      editingAlias: false,
     });
   };
 
@@ -101,7 +109,6 @@ class Project extends React.Component {
     const workspace = store.workspace;
 
     const template = getTemplateDefinition(sandbox.template);
-
     return (
       <div style={{ marginBottom: '1rem' }}>
         <Item style={{ marginTop: '.5rem' }}>
@@ -132,7 +139,7 @@ class Project extends React.Component {
             </WorkspaceInputContainer>
           ) : (
             <Title>
-              {workspace.project.title || sandbox.title || sandbox.id}
+              {workspace.project.title || getSandboxName(sandbox)}
               {editable && <EditPen onClick={this.setTitleEditing} />}
             </Title>
           )}
@@ -177,6 +184,42 @@ class Project extends React.Component {
               {editable && <EditPen onClick={this.setDescriptionEditing} />}
             </Description>
           )}
+          {/* Disable until we also moved SSE over */}
+          {store.isPatron && false ? (
+            <>
+              {this.state.editingAlias ? (
+                <WorkspaceInputContainer>
+                  <input
+                    value={workspace.project.alias}
+                    onChange={event => {
+                      signals.workspace.valueChanged({
+                        field: 'alias',
+                        value: event.target.value,
+                      });
+                    }}
+                    type="text"
+                    onBlur={this.updateSandboxInfo}
+                    onKeyUp={event => {
+                      if (event.keyCode === 13) {
+                        this.updateSandboxInfo();
+                      }
+                    }}
+                    ref={el => {
+                      if (el) {
+                        el.focus();
+                      }
+                    }}
+                    placeholder="Alias"
+                  />
+                </WorkspaceInputContainer>
+              ) : (
+                <Alias>
+                  {workspace.project.alias || sandbox.alias}
+                  {editable && <EditPen onClick={this.setAliasEditing} />}
+                </Alias>
+              )}
+            </>
+          ) : null}
         </Item>
 
         {!sandbox.team && !!sandbox.author && (

packages/app/src/app/pages/Sandbox/index.js

@@ -3,6 +3,7 @@ import { inject, observer } from 'mobx-react';
 import { Link } from 'react-router-dom';
 import QuickActions from 'app/pages/Sandbox/QuickActions';
 
+import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name';
 import { Button } from '@codesandbox/common/lib/components/Button';
 import NotFound from 'app/pages/common/NotFound';
 import Navigation from 'app/pages/common/Navigation';
@@ -44,7 +45,16 @@ class SandboxPage extends React.Component {
   }
 
   fetchSandbox = () => {
-    const id = this.props.match.params.id;
+    let id = this.props.match.params.id;
+
+    // If the id is in the form of "slugified-title-shortid" we can take the last
+    // shortid and get the data with that. This solves the problem with urls becoming
+    // invalid after giving a sandbox a new title.
+    const split = id.split('-');
+    if (split.length > 1) {
+      id = split.pop();
+    }
+
     this.props.signals.editor.sandboxChanged({ id });
   };
 
@@ -173,7 +183,7 @@ class SandboxPage extends React.Component {
     const sandbox = store.editor.currentSandbox;
 
     if (sandbox) {
-      document.title = `${sandbox.title || sandbox.id} - CodeSandbox`;
+      document.title = `${getSandboxName(sandbox)} - CodeSandbox`;
     }
 
     return (

packages/app/src/app/pages/Search/Results/index.js

@@ -5,13 +5,16 @@ import Centered from '@codesandbox/common/lib/components/flex/Centered';
 import SandboxCard from '@codesandbox/common/lib/components/SandboxCard';
 import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
 import Margin from '@codesandbox/common/lib/components/spacing/Margin';
+import getSandboxName from '@codesandbox/common/lib/utils/get-sandbox-name';
 
 import ResultInfo from '../ResultInfo';
 import { Container } from './elements';
 
 const Results = () => {
   const selectSandbox = hit =>
-    window.open(sandboxUrl({ id: hit.objectID, git: hit.git }));
+    window.open(
+      sandboxUrl({ id: hit.objectID, alias: hit.alias, git: hit.git })
+    );
 
   return (
     <Container>
@@ -24,7 +27,11 @@ const Results = () => {
               noHeight
               sandbox={{
                 ...hit,
-                title: hit.title || hit.objectID,
+                title: getSandboxName({
+                  id: hit.objectID,
+                  alias: hit.alias,
+                  git: hit.git,
+                }),
                 id: hit.objectID,
               }}
             />