refactor: migrate remaining angular components to react (#833)

* refactor: menuRow directive to MenuRow component

* refactor: migrate footer to react

* refactor: migrate actions menu to react

* refactor: migrate history menu to react

* fix: click outside handler use capture to trigger event before re-render occurs which would otherwise cause node.contains to return incorrect result (specifically for the account menu)

* refactor: migrate revision preview modal to react

* refactor: migrate permissions modal to react

* refactor: migrate password wizard to react

* refactor: remove unused input modal directive

* refactor: remove unused delay hide component

* refactor: remove unused filechange directive

* refactor: remove unused elemReady directive

* refactor: remove unused sn-enter directive

* refactor: remove unused lowercase directive

* refactor: remove unused autofocus directive

* refactor(wip): note view to react

* refactor: use mutation observer to deinit textarea listeners

* refactor: migrate challenge modal to react

* refactor: migrate note group view to react

* refactor(wip): migrate remaining classes

* fix: navigation parent ref

* refactor: fully remove angular assets

* fix: account switcher

* fix: application view state

* refactor: remove unused password wizard type

* fix: revision preview and permissions modal

* fix: remove angular comment

* refactor: react panel resizers for editor

* feat: simple panel resizer

* fix: use simple panel resizer everywhere

* fix: simplify panel resizer state

* chore: rename simple panel resizer to panel resizer

* refactor: simplify column layout

* fix: editor mount safety check

* fix: use inline onLoad callback for iframe, as setting onload after it loads will never call it

* chore: fix note view test

* chore(deps): upgrade snjs

app/assets/javascripts/components/SessionsModal.tsx

@@ -15,7 +15,6 @@ import {
   AlertDialogDescription,
   AlertDialogLabel,
 } from '@reach/alert-dialog';
-import { toDirective } from './utils';
 import { WebApplication } from '@/ui_models/application';
 import { observer } from 'mobx-react-lite';
 
@@ -26,12 +25,12 @@ type Session = RemoteSession & {
 function useSessions(
   application: SNApplication
 ): [
-    Session[],
-    () => void,
-    boolean,
-    (uuid: UuidString) => Promise<void>,
-    string
-  ] {
+  Session[],
+  () => void,
+  boolean,
+  (uuid: UuidString) => Promise<void>,
+  string
+] {
   const [sessions, setSessions] = useState<Session[]>([]);
   const [lastRefreshDate, setLastRefreshDate] = useState(Date.now());
   const [refreshing, setRefreshing] = useState(true);
@@ -93,19 +92,14 @@ function useSessions(
   return [sessions, refresh, refreshing, revokeSession, errorMessage];
 }
 
-const SessionsModal: FunctionComponent<{
+const SessionsModalContent: FunctionComponent<{
   appState: AppState;
   application: SNApplication;
 }> = ({ appState, application }) => {
   const close = () => appState.closeSessionsModal();
 
-  const [
-    sessions,
-    refresh,
-    refreshing,
-    revokeSession,
-    errorMessage,
-  ] = useSessions(application);
+  const [sessions, refresh, refreshing, revokeSession, errorMessage] =
+    useSessions(application);
 
   const [confirmRevokingSessionUuid, setRevokingSessionUuid] = useState('');
   const closeRevokeSessionAlert = () => setRevokingSessionUuid('');
@@ -240,15 +234,15 @@ const SessionsModal: FunctionComponent<{
   );
 };
 
-export const Sessions: FunctionComponent<{
+export const SessionsModal: FunctionComponent<{
   appState: AppState;
   application: WebApplication;
 }> = observer(({ appState, application }) => {
   if (appState.isSessionsModalVisible) {
-    return <SessionsModal application={application} appState={appState} />;
+    return (
+      <SessionsModalContent application={application} appState={appState} />
+    );
   } else {
     return null;
   }
 });
-
-export const SessionsModalDirective = toDirective(Sessions);