feat(preferences): extension modals into extension panes (#683)

* feat(preferences): show inline extensions in extensions pane

* wip

* wip

* refactor: convert ComponentView to React component

* refactor: convert ComponentView to React component

* chore: fix merge conflicts

* feat: don't show features whose `area` is "room", update modal items' icons in Preferences menu

* chore: fix TS error

* feat: don't show 2FA Manager in modal-based component

* feat: remove `ExtendedDataReloadComplete` event, since Extensions Manger is being removed from the app

* chore: avoid hardcoded values in svg image, optimize `if` condition

* chore: remove remnant comment

* fix: fix typescript errors

Co-authored-by: vardanhakobyan <vardan_live@live.com>

app/assets/javascripts/preferences/PreferencesView.tsx

@@ -9,6 +9,7 @@ import {
   Security,
 } from './panes';
 import { observer } from 'mobx-react-lite';
+
 import { PreferencesMenu } from './PreferencesMenu';
 import { PreferencesMenuView } from './PreferencesMenuView';
 import { WebApplication } from '@/ui_models/application';
@@ -16,6 +17,7 @@ import { MfaProps } from './panes/two-factor-auth/MfaProps';
 import { AppState } from '@/ui_models/app_state';
 import { useEffect, useMemo } from 'preact/hooks';
 import { Extensions } from './panes/Extensions';
+import { ExtensionPane } from './panes/ExtensionPane';
 
 interface PreferencesProps extends MfaProps {
   application: WebApplication;
@@ -25,44 +27,64 @@ interface PreferencesProps extends MfaProps {
 
 const PaneSelector: FunctionComponent<
   PreferencesProps & { menu: PreferencesMenu }
-> = observer((props) => {
-  switch (props.menu.selectedPaneId) {
-    case 'general':
-      return (
-        <General appState={props.appState} application={props.application} />
-      );
-    case 'account':
-      return (
-        <AccountPreferences
-          application={props.application}
-          appState={props.appState}
-        />
-      );
-    case 'appearance':
-      return null;
-    case 'security':
-      return (
-        <Security
-          mfaProvider={props.mfaProvider}
-          userProvider={props.userProvider}
-          appState={props.appState}
-          application={props.application}
-        />
-      );
-    case 'extensions':
-      return <Extensions application={props.application} />;
-    case 'listed':
-      return <Listed application={props.application} />;
-    case 'shortcuts':
-      return null;
-    case 'accessibility':
-      return null;
-    case 'get-free-month':
-      return null;
-    case 'help-feedback':
-      return <HelpAndFeedback />;
-  }
-});
+> = observer(
+  ({
+     menu,
+     appState,
+     application,
+     mfaProvider,
+     userProvider
+   }) => {
+    switch (menu.selectedPaneId) {
+      case 'general':
+        return (
+          <General appState={appState} application={application} />
+        );
+      case 'account':
+        return (
+          <AccountPreferences
+            application={application}
+            appState={appState}
+          />
+        );
+      case 'appearance':
+        return null;
+      case 'security':
+        return (
+          <Security
+            mfaProvider={mfaProvider}
+            userProvider={userProvider}
+            appState={appState}
+            application={application}
+          />
+        );
+      case 'extensions':
+        return <Extensions application={application} extensionsLatestVersions={menu.extensionsLatestVersions} />;
+      case 'listed':
+        return <Listed application={application} />;
+      case 'shortcuts':
+        return null;
+      case 'accessibility':
+        return null;
+      case 'get-free-month':
+        return null;
+      case 'help-feedback':
+        return <HelpAndFeedback />;
+      default:
+        if (menu.selectedExtension != undefined) {
+          return (
+            <ExtensionPane
+              application={application}
+              appState={appState}
+              extension={menu.selectedExtension}
+              preferencesMenu={menu}
+            />
+          );
+        } else {
+          return <General appState={appState} application={application} />;
+        }
+    }
+  });
 
 const PreferencesCanvas: FunctionComponent<
   PreferencesProps & { menu: PreferencesMenu }
@@ -75,9 +97,9 @@ const PreferencesCanvas: FunctionComponent<
 
 export const PreferencesView: FunctionComponent<PreferencesProps> = observer(
   (props) => {
-    const menu = useMemo(() => new PreferencesMenu(props.appState.enableUnfinishedFeatures), [
-      props.appState.enableUnfinishedFeatures
-    ]);
+    const menu = useMemo(
+      () => new PreferencesMenu(props.application, props.appState.enableUnfinishedFeatures),
+      [props.appState.enableUnfinishedFeatures, props.application]);
 
     useEffect(() => {
       menu.selectPane(props.appState.preferences.currentPane);