Favorites ux refresh

LICENSES.txt

@@ -3171,31 +3171,6 @@ SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 -----
 
-The following software may be included in this product: dateformat. A copy of the source code may be downloaded from https://github.com/felixge/node-dateformat.git. This software contains the following license and notice below:
-
-(c) 2007-2009 Steven Levithan <stevenlevithan.com>
-
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of this software and associated documentation files (the
-"Software"), to deal in the Software without restriction, including
-without limitation the rights to use, copy, modify, merge, publish,
-distribute, sublicense, and/or sell copies of the Software, and to
-permit persons to whom the Software is furnished to do so, subject to
-the following conditions:
-
-The above copyright notice and this permission notice shall be
-included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
-OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
------
-
 The following software may be included in this product: debug. A copy of the source code may be downloaded from git://github.com/visionmedia/debug.git. This software contains the following license and notice below:
 
 (The MIT License)

NOTICE.txt

@@ -920,10 +920,6 @@ Third-party licenses
 │  │  ├─ URL: git://github.com/trentm/node-dashdash.git
 │  │  ├─ VendorName: Trent Mick
 │  │  └─ VendorUrl: http://trentm.com
-│  ├─ dateformat@3.0.3
-│  │  ├─ URL: https://github.com/felixge/node-dateformat.git
-│  │  ├─ VendorName: Steven Levithan
-│  │  └─ VendorUrl: https://github.com/felixge/node-dateformat
 │  ├─ debug@4.1.1
 │  │  ├─ URL: git://github.com/visionmedia/debug.git
 │  │  └─ VendorName: TJ Holowaychuk

e2e_tests/integration/saved-scripts.spec.ts

@@ -38,7 +38,9 @@ describe('Saved Scripts', () => {
     cy.get('[data-testid=saveScript]').click()
 
     // saved in the list and can populate editor
-    cy.get('[data-testid="scriptTitle-script name"]').click()
+    cy.get('[data-testid="navicon-script name"').click({ force: true })
+    cy.get('[data-testid="contextMenuEdit"').click()
+
     cy.get('[data-testid="currentlyEditing"]').contains('script name')
     // Editing script updates name and content
     cy.get('[data-testid="activeEditor"] textarea')
@@ -54,9 +56,13 @@ describe('Saved Scripts', () => {
     cy.get('[data-testid="currentlyEditing"]').contains('Guide')
     cy.get('[data-testid=savedScriptsButton-Run]').click()
     cy.getFrames().contains('Movie Graph')
+
+    // can delete
+    cy.get('[data-testid="navicon-Guide"').click({ force: true })
+    cy.get('[data-testid="contextMenuDelete"').click()
   })
 
-  it('it can drag and drop a favorite in a  folder', () => {
+  it('it can drag and drop a favorite in a folder', () => {
     cy.get('[data-testid=editor-discard]').click()
     cy.executeCommand(':clear')
     cy.executeCommand(':help cypher')
@@ -68,9 +74,7 @@ describe('Saved Scripts', () => {
     cy.get('[data-testid=saveScript]').click()
 
     cy.get('[data-testid="savedScriptsButton-New folder"]').click()
-    cy.get('[data-testid="savedScriptsButton-Edit"]')
-      .eq(2)
-      .click({ force: true })
+    cy.get('[data-testid="savedScriptsButton-Edit"]').click({ force: true })
     cy.get('[data-testid="editSavedScriptFolderName"]')
       .clear()
       .type('fldr{enter}')
@@ -89,5 +93,31 @@ describe('Saved Scripts', () => {
     cy.get('[data-testid="scriptTitle-:help cypher"]').should('not.exist')
     cy.get('[data-testid=expandFolder-fldr]').click()
     cy.get('[data-testid="scriptTitle-:help cypher"]').should('exist')
+
+    // cleanup and delete the folder as well
+    cy.get('[data-testid="savedScriptsButton-Edit"]')
+      .first()
+      .click({ force: true })
+    cy.get('[data-testid="savedScriptsButton-Remove"]').click()
+    cy.get('[data-testid=expandFolder-fldr]').should('not.exist')
+  })
+
+  it('it can use bulk delte', () => {
+    cy.get('[data-testid=drawerFavorites]').click()
+    cy.get('[data-testid=createNewFavorite]')
+      .click()
+      .click()
+      .click()
+
+    const mod = Cypress.platform === 'darwin' ? '{cmd}' : '{ctrl}'
+    // workaround to get meta clicks
+    cy.get('body').type(mod, { force: true, release: false })
+
+    cy.get('[data-testid="scriptTitle-Untitled favorite"]')
+      .should('have.length', 3)
+      .click({ multiple: true })
+    cy.get('body').type(mod) // release mod
+    cy.get('[data-testid=savedScriptsButton-Remove]').click()
+    cy.get('[data-testid="scriptTitle-Untitled favorite"]').should('not.exist')
   })
 })

package.json

@@ -170,7 +170,6 @@
     "core-js": "3",
     "cypher-editor-support": "^1.1.7",
     "d3": "3",
-    "dateformat": "^3.0.3",
     "deepmerge": "^2.1.1",
     "file-saver": "^1.3.8",
     "firebase": "^7.13.1",

src/browser/components/ProjectFiles/ProjectFilesList.tsx

@@ -18,12 +18,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import React from 'react'
-import {
-  SavedScriptsMain,
-  SavedScriptsBody,
-  SavedScriptsBodySection,
-  SavedScriptsHeader
-} from '../SavedScripts/styled'
+import { SavedScriptsBody, SavedScriptsHeader } from '../SavedScripts/styled'
 import ProjectFilesListItem from './ProjectFilesListItem'
 
 export type ProjectFileScript = {
@@ -49,24 +44,17 @@ export default function ProjectFileList({
   )
 
   return (
-    <SavedScriptsMain className="saved-scripts">
-      <SavedScriptsBody className="saved-scripts__body">
-        <SavedScriptsBodySection className="saved-scripts__body-section">
-          <SavedScriptsHeader className="saved-scripts__header">
-            Cypher files
-          </SavedScriptsHeader>
-
-          {sortedScripts.map(script => (
-            <ProjectFilesListItem
-              selectScript={selectScript}
-              execScript={execScript}
-              removeScript={removeScript}
-              script={script}
-              key={script.filename}
-            />
-          ))}
-        </SavedScriptsBodySection>
-      </SavedScriptsBody>
-    </SavedScriptsMain>
+    <SavedScriptsBody>
+      <SavedScriptsHeader>Cypher files</SavedScriptsHeader>
+      {sortedScripts.map(script => (
+        <ProjectFilesListItem
+          selectScript={selectScript}
+          execScript={execScript}
+          removeScript={removeScript}
+          script={script}
+          key={script.filename}
+        />
+      ))}
+    </SavedScriptsBody>
   )
 }

src/browser/components/ProjectFiles/ProjectFilesListItem.tsx

@@ -45,15 +45,14 @@ function ProjectFilesListItem({
 }: ProjectFilesListItemProps): JSX.Element {
   const [isEditing, setIsEditing] = useState(false)
   return (
-    <SavedScriptsListItemMain className="saved-scripts-list-item">
+    <SavedScriptsListItemMain>
       <SavedScriptsListItemDisplayName
-        className="saved-scripts-list-item__display-name"
         data-testid={`scriptTitle-${script.filename}`}
         onClick={() => selectScript(script)}
       >
         {script.filename}
       </SavedScriptsListItemDisplayName>
-      <SavedScriptsButtonWrapper className="saved-scripts__button-wrapper">
+      <SavedScriptsButtonWrapper>
         {isEditing ? (
           <RedRemoveButton onClick={() => removeScript(script)} />
         ) : (

src/browser/components/ProjectFiles/ProjectsFilesScripts.tsx

@@ -19,7 +19,7 @@ import { useEffect, useState, Dispatch } from 'react'
 import { Action } from 'redux'
 import { connect } from 'react-redux'
 import { useQuery, useMutation, ApolloError } from '@apollo/client'
-import { filter, size } from 'lodash-es'
+import { flatMap } from 'lodash-es'
 
 import * as editor from 'shared/modules/editor/editorDuck'
 import {
@@ -39,7 +39,6 @@ import {
   DELETE_PROJECT_FILE,
   REMOVE_PROJECT_FILE
 } from './projectFilesConstants'
-import Render from 'browser-components/Render'
 import { Bus } from 'suber'
 import { StyledErrorListContainer } from '../../modules/Sidebar/styled'
 import { withBus } from 'react-suber'
@@ -49,53 +48,22 @@ import ProjectFileList, {
 
 interface ProjectFilesError {
   apolloErrors: (ApolloError | undefined)[]
-  errors?: string[]
 }
 
 export const ProjectFilesError = ({
-  apolloErrors,
-  errors
+  apolloErrors
 }: ProjectFilesError): JSX.Element => {
-  const definedApolloErrors = filter(
+  const hasNetworkError = !!apolloErrors.find(error => error?.networkError)
+  const graphQLErrors = flatMap(
     apolloErrors,
-    apolloError => apolloError !== undefined
-  )
-  const definedErrors = filter(errors, error => error !== '')
-  const ErrorsList = () => {
-    let errorsList: JSX.Element[] = []
-    if (size(definedErrors)) {
-      errorsList = [
-        ...errorsList,
-        ...definedErrors.map((definedError, i) => (
-          <span key={`${definedError}-${i}`}>{definedError}</span>
-        ))
-      ]
-    }
-    if (size(definedApolloErrors)) {
-      definedApolloErrors.map((definedApolloError, j) => {
-        if (definedApolloError?.graphQLErrors.length) {
-          errorsList = [
-            ...errorsList,
-            ...definedApolloError.graphQLErrors.map(({ message }, k) => (
-              <span key={`${message}-${j}-${k}`}>{message}</span>
-            ))
-          ]
-        }
-        if (definedApolloError?.networkError) {
-          errorsList = [
-            ...errorsList,
-            <span key={j}>A network error has occurred.</span>
-          ]
-        }
-      })
-    }
-    return errorsList
-  }
+    error => error?.graphQLErrors.map(e => e.message) || []
+  ).join('\n')
 
   return (
-    <Render if={size(definedApolloErrors) || size(definedErrors)}>
-      <StyledErrorListContainer>{ErrorsList()}</StyledErrorListContainer>
-    </Render>
+    <StyledErrorListContainer>
+      {graphQLErrors && <div>{graphQLErrors}</div>}
+      {hasNetworkError && <div>A network error has occurred</div>}
+    </StyledErrorListContainer>
   )
 }
 

src/browser/components/ProjectFiles/projectFilesConstants.ts

@@ -19,36 +19,6 @@ import { gql } from '@apollo/client'
 
 export const REMOVE_PROJECT_FILE = 'REMOVE_PROJECT_FILE'
 
-export interface ProhibitedFilenameErrors {
-  chars: string[]
-  tests: RegExp[]
-}
-
-interface ProhibitedFilenamePlatform {
-  platform?: string
-}
-
-interface ProhibitedFilenameChar extends ProhibitedFilenamePlatform {
-  char: string
-  test?: never
-}
-
-interface ProhibitedFilenameTest extends ProhibitedFilenamePlatform {
-  test: RegExp
-  char?: never
-}
-
-export const PROHIBITED_FILENAME_CHAR_TESTS: (
-  | ProhibitedFilenameChar
-  | ProhibitedFilenameTest
-)[] = [
-  { char: '/' },
-  { char: '\\' },
-  { char: '..' },
-  { test: /^[.|?]/ },
-  { char: ':', platform: 'Win32' }
-]
-
 export interface AddProjectFile {
   addProjectFile: ProjectFile
 }