Update vdt to 22.4.0

package.json

@@ -8,13 +8,13 @@
   "private": true,
   "dependencies": {
     "@fontsource/open-sans": "^4.5.1",
-    "@material-ui/core": "^4.11.0",
-    "@material-ui/icons": "^4.9.1",
-    "@material-ui/lab": "^4.0.0-alpha.56",
-    "@vidispine/vdt-api": "^0.14.0",
-    "@vidispine/vdt-js": "^0.14.0",
-    "@vidispine/vdt-materialui": "^0.14.0",
-    "@vidispine/vdt-react": "^0.14.0",
+    "@material-ui/core": "^4.12.4",
+    "@material-ui/icons": "^4.11.3",
+    "@material-ui/lab": "^4.0.0-alpha.61",
+    "@vidispine/vdt-api": "22.4.0-pre.9",
+    "@vidispine/vdt-js": "22.4.0-pre.9",
+    "@vidispine/vdt-materialui": "22.4.0-pre.9",
+    "@vidispine/vdt-react": "22.4.0-pre.9",
     "filesize": "^6.1.0",
     "lodash.debounce": "^4.0.8",
     "lodash.get": "^4.4.2",
@@ -28,7 +28,7 @@
     "react-final-form": "^6.5.3",
     "react-query": "^3.17.1",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.3",
+    "react-scripts": "^5.0.1",
     "react-split": "^2.0.11",
     "typeface-roboto": "^0.0.75"
   },
@@ -38,7 +38,8 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "predeploy": "GENERATE_SOURCEMAP=false PUBLIC_URL=${npm_package_homepage} yarn build && cp build/index.html build/404.html",
-    "deploy": "gh-pages -d build"
+    "deploy": "gh-pages -d build",
+    "lint": "eslint src --ext js"
   },
   "eslintConfig": {
     "extends": [
@@ -58,19 +59,12 @@
     ]
   },
   "devDependencies": {
-    "@vidispine/eslint-config": "^0.14.0-pre.1",
-    "@vidispine/eslint-config-base": "^0.14.0-pre.1",
-    "@vidispine/eslint-config-react": "^0.14.0-pre.1",
-    "@vidispine/prettier-config": "^0.14.0-pre.1",
-    "eslint-config-airbnb": "^18.2.1",
-    "eslint-config-prettier": "^7.1.0",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-react": "^7.21.5",
-    "eslint-plugin-react-hooks": "^4.0.0",
+    "@vidispine/eslint-config": "22.4.0-pre.9",
+    "@vidispine/prettier-config": "22.4.0-pre.9",
+    "eslint": "^8.28.0",
     "gh-pages": "^3.2.3",
     "http-proxy-middleware": "^1.3.1",
-    "prettier": "^2.2.1"
+    "prettier": "^2.8.0"
   },
   "prettier": "@vidispine/prettier-config"
-}
+}

src/components/ErrorBoundary.js

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { Container, Paper } from '@material-ui/core';
 
 export default class ErrorBoundary extends React.Component {

src/components/FieldSelector.js

@@ -1,13 +1,15 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
-import isMatch from 'lodash.ismatch';
+
 import { withStyles, FormHelperText, InputAdornment, IconButton } from '@material-ui/core';
+import { Visibility, VisibilityOff } from '@material-ui/icons';
+import isMatch from 'lodash.ismatch';
+import { Field } from 'react-final-form';
+
 import {
   TextField as VdtTextField,
   CheckboxField as VdtCheckboxField,
 } from '@vidispine/vdt-materialui';
-import { Visibility, VisibilityOff } from '@material-ui/icons';
-import { Field } from 'react-final-form';
 
 import CustomSelectField from './SelectField';
 
@@ -96,9 +98,9 @@ const styles = ({ spacing, typography, palette }) => ({
   },
 });
 
-const HelperText = ({ children }) => (
-  <>{children && <FormHelperText error>{children}</FormHelperText>}</>
-);
+function HelperText({ children }) {
+  return children && <FormHelperText error>{children}</FormHelperText>;
+}
 
 const autoValue = { label: 'Auto', value: 0, style: { display: 'none' } };
 const emptyValue = { label: 'No options', disabled: true, value: 'nooptions' };
@@ -281,13 +283,13 @@ export const NumberField = withStyles(styles)(
   },
 );
 
-export const FieldSelector = ({
+export function FieldSelector({
   type,
   errors,
   dependency = [],
   checkedDependencies = {},
   ...params
-}) => {
+}) {
   let FieldType = TextField;
   if (type === 'number') FieldType = NumberField;
   if (type === 'select') FieldType = SelectField;
@@ -307,6 +309,6 @@ export const FieldSelector = ({
       )}
     </Field>
   );
-};
+}
 
 export default FieldSelector;

src/components/JsonTreeView.js

@@ -1,9 +1,8 @@
-import React from 'react';
 import { withStyles } from '@material-ui/core/styles';
-import TreeView from '@material-ui/lab/TreeView';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import TreeItem from '@material-ui/lab/TreeItem';
+import TreeView from '@material-ui/lab/TreeView';
 
 const styles = (theme) => ({
   root: {},
@@ -26,7 +25,7 @@ const LabelComponent = withStyles(styles)(({ classes, nodeKey, nodeValue }) => {
   );
 });
 
-const JsonTreeView = ({ classes, data }) => {
+function JsonTreeView({ classes, data }) {
   const renderNodes = (nodes, prevKey = 'root') =>
     Array.isArray(nodes)
       ? nodes.map((node, index) => {
@@ -58,6 +57,6 @@ const JsonTreeView = ({ classes, data }) => {
       {renderNodes(data)}
     </TreeView>
   );
-};
+}
 
 export default withStyles(styles)(JsonTreeView);

src/components/Menu.js

@@ -1,6 +1,7 @@
 import React from 'react';
-import { MoreVert as MenuIcon } from '@material-ui/icons';
+
 import { Menu, IconButton } from '@material-ui/core';
+import { MoreVert as MenuIcon } from '@material-ui/icons';
 
 export default ({ icon: IconComponent = MenuIcon, children, size }) => {
   const [anchorEl, setAnchorEl] = React.useState(null);

src/components/Search.js

@@ -1,7 +1,6 @@
-import React from 'react';
+import { withStyles, Paper } from '@material-ui/core';
 
 import { SearchInput } from '@vidispine/vdt-materialui';
-import { withStyles, Paper } from '@material-ui/core';
 
 const styles = ({ spacing, palette, transitions }) => ({
   input: {
@@ -27,22 +26,24 @@ const styles = ({ spacing, palette, transitions }) => ({
   },
 });
 
-const Search = ({
+function Search({
   value,
   onSubmit,
   onChange,
   classes: { root, ...rest },
   placeholder = 'Search files...',
-}) => (
-  <Paper>
-    <SearchInput
-      value={value}
-      classes={rest}
-      onChange={onChange}
-      onSubmit={onSubmit}
-      searchPlaceholder={placeholder}
-    />
-  </Paper>
-);
+}) {
+  return (
+    <Paper>
+      <SearchInput
+        value={value}
+        classes={rest}
+        onChange={onChange}
+        onSubmit={onSubmit}
+        searchPlaceholder={placeholder}
+      />
+    </Paper>
+  );
+}
 
 export default withStyles(styles)(Search);

src/components/SelectField.js

@@ -1,19 +1,21 @@
 /* eslint-disable no-unused-vars */
 import * as React from 'react';
-import isMatch from 'lodash.ismatch';
-import MUISelect from '@material-ui/core/Select';
-import MenuItem from '@material-ui/core/MenuItem';
+
 import FormControl from '@material-ui/core/FormControl';
-import InputLabel from '@material-ui/core/InputLabel';
 import FormHelperText from '@material-ui/core/FormHelperText';
+import InputLabel from '@material-ui/core/InputLabel';
+import MenuItem from '@material-ui/core/MenuItem';
+import MUISelect from '@material-ui/core/Select';
 import { withStyles } from '@material-ui/core/styles';
-import { CheckboxField } from '@vidispine/vdt-materialui';
 import { ArrowDropDown, Lock } from '@material-ui/icons';
+import isMatch from 'lodash.ismatch';
+
+import { CheckboxField } from '@vidispine/vdt-materialui';
 
-const HelperText = ({ children }) => (
-  <>{children && <FormHelperText error>{children}</FormHelperText>}</>
-);
-export const MatchSource = ({ onChange, checked, children }) => {
+function HelperText({ children }) {
+  return children && <FormHelperText error>{children}</FormHelperText>;
+}
+export function MatchSource({ onChange, checked, children }) {
   return (
     <>
       {children && <FormHelperText error>{children}</FormHelperText>}
@@ -25,7 +27,7 @@ export const MatchSource = ({ onChange, checked, children }) => {
       />
     </>
   );
-};
+}
 
 const styles = (theme) => ({
   root: {
@@ -55,7 +57,7 @@ const defaultParseOptions = (opts) =>
       }),
   }));
 
-const SelectField = ({
+function SelectField({
   input: { value, name, onChange, multiple, ...inputProps } = {},
   meta: { touched, error, submitError } = {},
   options = [],
@@ -71,7 +73,7 @@ const SelectField = ({
   FormHelperTextProps = {},
   parseOptions = defaultParseOptions,
   ...props
-}) => {
+}) {
   const [opts, setOpts] = React.useState(parseOptions(options));
   const [checked, setChecked] = React.useState(false);
   React.useEffect(() => {
@@ -143,6 +145,6 @@ const SelectField = ({
       )}
     </FormControl>
   );
-};
+}
 
 export default withStyles(styles)(SelectField);

src/components/Snackbar.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import { SnackbarContent, useSnackbar } from 'notistack';
-import { Check as CheckIcon, Error as ErrorIcon, Close as CloseIcon } from '@material-ui/icons';
+
 import {
   withStyles,
   List,
@@ -12,6 +11,8 @@ import {
   ListSubheader,
   ListItemAvatar,
 } from '@material-ui/core';
+import { Check as CheckIcon, Error as ErrorIcon, Close as CloseIcon } from '@material-ui/icons';
+import { SnackbarContent, useSnackbar } from 'notistack';
 
 const styles = () => ({
   header: {

src/components/Split.js

@@ -1,6 +1,5 @@
-import RSplit from 'react-split';
-import React from 'react';
 import { withStyles } from '@material-ui/core';
+import RSplit from 'react-split';
 
 const styles = (theme) => ({
   root: {

src/const.js

@@ -1,5 +1,5 @@
-import logo from './assets/logo.svg';
 import headerLogo from './assets/header-logo.svg';
+import logo from './assets/logo.svg';
 
 export const APP_LOGO = logo;
 export const HEADER_LOGO = headerLogo;

src/context/ConfigurationContext.js

@@ -1,7 +1,10 @@
 /* eslint-disable no-unused-vars */
 import React from 'react';
+
 import { useQuery } from 'react-query';
+
 import { storage as StorageApi, resource as ResourceApi } from '@vidispine/vdt-api';
+
 import filenameScript from '../pages/Settings/filenameScript';
 
 const ConfigurationContext = React.createContext();
@@ -30,7 +33,7 @@ const parseStorages = ({ storage: storageList }) => {
       if (search.startsWith('?')) search = search.slice(1);
       const [access, bucket] = pathname.split('@');
       const [accessKey] = access.split(':_VSENC__');
-      const [name, ...folderPath] = bucket.split('/');
+      const [name, ...folderPath] = bucket?.split('/') || [];
       const path = folderPath.join('/');
       const queries = search.split('&').reduce((a, c) => {
         const [key, value] = c.split('=');
@@ -87,7 +90,7 @@ export function useConfiguration() {
   return context;
 }
 
-export const ConfigurationProvider = ({ children }) => {
+export function ConfigurationProvider({ children }) {
   const {
     data: storages,
     isLoading: isLoadingStorages,
@@ -148,13 +151,14 @@ export const ConfigurationProvider = ({ children }) => {
     return StorageApi.createStorage({ storageDocument });
   };
 
+  const contextValue = React.useMemo(
+    () => ({ onUpdateStorage, storages, resources, isLoading, isError }),
+    [isError, isLoading, resources, storages],
+  );
+
   return (
-    <ConfigurationContext.Provider
-      value={{ onUpdateStorage, storages, resources, isLoading, isError }}
-    >
-      {children}
-    </ConfigurationContext.Provider>
+    <ConfigurationContext.Provider value={contextValue}>{children}</ConfigurationContext.Provider>
   );
-};
+}
 
 export default ConfigurationContext;