Menus and React Testing Library migration

[nelsonni]

Description:

The initial interaction points within the Synectic canvas have been based on buttons managed within their respective card, stack, error, and dialog components. This is not a sustainable architecture going forward. A unified navigation menu, similar to the design considerations of https://material.io/components/menus, has prompted a refactoring to a single NavMenu component that launches all interactions via Redux actions.

Additionally, we have been maintaining tests written for both Enzyme and React Testing Library (RTL). However, issues such as #357 highlight that this structure is untenable as dependencies for their testing libraries begin to conflict. Its time to cut-over to using React Testing Library (RTL) only, and any remaining Enzyme tests need to be updated.

This PR resolves #90, #357, and #113, and signifies the following version changes:

• MAJOR version increase
• MINOR version increase
• PATCH version increase

Changes:

This PR makes the following changes:

• Moves @testing-library/user-event from dependencies to devDependencies in package.json to match other @testing-library/* packages.
• @testing-library/dom added to devDependencies to allow DOM queries to work in conjunction with React Testing Library.
• Bump react-dnd-test-utils from 11.1.3 to 12.0.0 to take advantage of the updated wrapWithTestBackend that wraps components with a DnDContext and returns [Component, getBackend] utilities; this removed the need for dndReduxMock.wrapInReduxContext in our test mocks.
• Card.saveable field type dropped in favor of Metafile.state field type.
• Editor cards able to save content when Metafile.state indicates a modified state.
• FilePickerDialog converted to a function returning a Redux Thunk for handling calls to Electron.dialog.showOpenDialog.
• filePickerDialog displays an Electron.dialog.showOpenDialog based on a new pickerType: openFile | openDirectory parameter for accepting only files or directories (defaults to both only on MacOS platforms, see Electron.remote.dialog.showOpenDialog limits FilePicker dialog to directory selector on Windows and Linux #113).
• Button components removed from NewCardDialog, DiffPickerDialog, RepoBranchList, FilePickerDialog, MergeDialog.
• All dialogs added to canvas through Redux actions (via Modal types) instead of state flags that control component rendering.
• GitGraph added to canvas background through Redux actions (via the new Modal types).
• Setting AceEditor basePath and modePath for dynamic importing of syntax highlighting modes in Jest testing environments (see Jest is unable to resolve file-loader! imports for react-ace/webpack-resolver.js  #90).
• __test__/__fixtures__/* created to hold a single consistent Redux store (along with valid Canvas, Card, Stack, Modal, and Metafile entries) for reduced boilerplate code in tests.
• Enzyme deprecated and removed from testing environment (switched Jest testEnvironment: 'enzyme' to testEnvironment: 'jest-environment-jsdom-sixteen' based on recommendations documented in TypeError: MutationObserver is not a constructor #357).
• React Testing Library (RTL) will remain the only testing framework, in conjunction with the Jest environment, for testing React components and container functions.
• Simplified the custom useDirectory React Hook to no longer rely on changes occurring in metafile.ts for determining the status of child directories and files within a root directory; instead the only dependencies are in io.ts and state is determined by checking with the underlying filesystem. This fixes underlying memory leaks and Windows OS issues (see useDirectory mock must return fetch with () => Promise<void> type #321).

Checklist:

Before submitting this PR, I have verified that my code:

• Resides on a fix/ or feature/ branch that was initially branched off from development.
• Passes code linting (yarn lint) and unit testing (yarn test).
• Successfully builds a distribution package (yarn package).

Additionally, I have verified that:

• My name is listed in the Contributors section, or this PR includes a request to add my name.
• I have read and am aware of the CONTRIBUTING guide for this project.

[jettseale]

When I try to open a directory (File -> Open Directory...) it results in an error in the console and the file explorer card doesn't appear.

[nelsonni]

Analyzing this issue shows two likely separate problems on the Windows platform, that originate in the git.getStatus function:

1. git.getRepoRoot returns . instead of undefined on empty directories. This function relies on calling isomorphic-git/findRoot to determine the correct path containing a .git directory or file, but the issue appears to be related to directories not under version control.
   

   synectic/src/containers/git.ts

   Lines 290 to 293 in 07a420f

   	export const getStatus = async (filepath: fs.PathLike): Promise<GitStatus | undefined> => {
   	const repoRoot = await getRepoRoot(filepath);
   	if (!repoRoot) return undefined; // no root Git directory indicates that the filepath is not part of a Git repo

2. hidefile/shouldBeHiddenSync throws the Uncaught (in promise) TypeError: Cannot read property 'getAttributesSync' of undefined error when a directory path is passed to it.
   

   synectic/src/containers/git.ts

   Lines 301 to 309 in 07a420f

   	/** isomorphic-git provides `status()` for individual files, but requires `statusMatrix()` for directories
   	* (per: https://github.com/isomorphic-git/isomorphic-git/issues/13) */
   	if (await io.isDirectory(filepath)) {
   	const statuses = await isogit.statusMatrix({ fs: fs, dir: dir, gitdir: gitdir, filter: f => !shouldBeHiddenSync(f) });
   	const changed = statuses
   	.filter(row => row[1] !== row[2]) // filter for files that have been changed since the last commit
   	.map(row => row[0]); // return the filenames only
   	return (changed.length > 0) ? 'modified' : 'unmodified';
   	}

[nelsonni]

There is an open issue, stevenvachon/hidefile#3, that suggests others are also having trouble with the hidefile package on Windows. Added comment stevenvachon/hidefile#3 (comment) to that issue.

Fix in branch fix/windows-hidefiles should temporarily alleviate the issue by switching hidefile calls to use the underlying winattr package instead when the platform is Windows. @jettseale Please try this fix branch and see if it allows you to open directories again.

[nelsonni]

After testing the fix/windows-hidefiles branch with @jettseale, we determined that there are overlapping issues:

1. hidefiles is failing to run on Windows platforms. So calls to hidefile/shouldBeHiddenSync and winattr/getSync both fail (hidefile depends on winattr, so the likely culprit is in winattr).
2. The switch from useCallback to useEffect in the useDirectory custom React Hook (via b440fe6) is actually introducing a memory leak whenever a Explorer card is stacked and unstacked. The observed effect is that the contents of the Explorer card must reload, and when they do there is a chance that the following error will be thrown:

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

[nelsonni]

The leaking memory error has actually been occurring on Windows for awhile now. After going back through the project history, we were able to narrow it down to being introduced sometime between c88e8cb (August 25, 2020) and e743c32 (September 11, 2020) on the development branch.

Also, it appears that the hidefile package was added during this development window as well (in commit 98817b1 on September 2, 2020).