feat(dock): moving to use autocomplete

Simplifies the dock seach logic.

Author: markmcdowell

.eslintrc.yaml

@@ -18,6 +18,7 @@ rules:
   "@typescript-eslint/explicit-module-boundary-types": off
   "@typescript-eslint/interface-name-prefix": off
   "@typescript-eslint/no-non-null-assertion": off
+  "react/display-name": off
   "react/prop-types": off
   "require-await": "error"
   "no-return-await": "error"

.vscode/launch.json

@@ -94,7 +94,6 @@
             "type": "node",
             "request": "launch",
             "cwd": "${workspaceFolder}",
-            "preLaunchTask": "npm: build:dev:core",
             "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
             "windows": {
                 "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
@@ -118,7 +117,6 @@
             "type": "node",
             "request": "launch",
             "cwd": "${workspaceFolder}",
-            "preLaunchTask": "npm: build:dev:core",
             "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
             "windows": {
                 "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"

package-lock.json

@@ -32,9 +32,10 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@material-ui/core": "^4.11.2",
+    "@material-ui/lab": "^4.0.0-alpha.57",
     "@reactivemarkets/desktop-sdk": "file:../desktop-sdk",
-    "fuse.js": "^6.4.3",
     "ix": "^4.0.0",
+    "match-sorter": "^6.0.2",
     "mdi-material-ui": "^6.20.0",
     "mobx": "^5.15.7",
     "mobx-react": "^6.3.0",

packages/desktop-dock/package.json

@@ -1,24 +1,33 @@
 import * as React from "react";
-import AppShell from "./AppShell";
+import { AppShell } from "./AppShell";
 import { AppTheme } from "./AppTheme";
 import { ApplicationsStoreProvider } from "./ApplicationsStoreProvider";
 import { FocusStoreProvider } from "./FocusStoreProvider";
 import { ResizerStoreProvider } from "./ResizerStoreProvider";
+import { FilterStoreProvider } from "./FilterStoreProvider";
 import { SearchStoreProvider } from "./SearchStoreProvider";
+import { ThemeStoreProvider } from "./ThemeStoreProvider";
+import { TabStoreProvider } from "./TabStoreProvider";
 
 export class App extends React.PureComponent {
     public render() {
         return (
             <FocusStoreProvider>
-                <ResizerStoreProvider>
-                    <ApplicationsStoreProvider>
-                        <SearchStoreProvider>
-                            <AppTheme>
-                                <AppShell />
-                            </AppTheme>
-                        </SearchStoreProvider>
-                    </ApplicationsStoreProvider>
-                </ResizerStoreProvider>
+                <FilterStoreProvider>
+                    <ResizerStoreProvider>
+                        <ApplicationsStoreProvider>
+                            <SearchStoreProvider>
+                                <TabStoreProvider>
+                                    <ThemeStoreProvider>
+                                        <AppTheme>
+                                            <AppShell />
+                                        </AppTheme>
+                                    </ThemeStoreProvider>
+                                </TabStoreProvider>
+                            </SearchStoreProvider>
+                        </ApplicationsStoreProvider>
+                    </ResizerStoreProvider>
+                </FilterStoreProvider>
             </FocusStoreProvider>
         );
     }

packages/desktop-dock/src/components/App/App.tsx

@@ -1,33 +1,23 @@
-import { createStyles, Box, Grid, Theme, withStyles, WithStyles } from "@material-ui/core";
+import { Box } from "@material-ui/core";
 import * as React from "react";
-import { Search, SearchHelp, SearchResults } from "../Search";
+import { Search, SearchButton, SearchHelp } from "../Search";
 import { DragHandle, PowerButton } from "../System";
 
-const styles = (theme: Theme) =>
-    createStyles({
-        padding: {
-            padding: theme.spacing(1, 1, 1, 0),
-        },
-    });
-
-class AppShell extends React.PureComponent<WithStyles<typeof styles>> {
+export class AppShell extends React.PureComponent {
     public render() {
-        const { classes } = this.props;
-
         return (
             <Box display="flex" flexDirection="column" flex={1}>
-                <Grid container wrap="nowrap">
-                    <DragHandle />
-                    <Grid className={classes.padding} container wrap="nowrap">
-                        <Search />
-                        <PowerButton />
-                    </Grid>
-                </Grid>
-                <SearchResults />
+                <Search
+                    startAdornment={
+                        <>
+                            <DragHandle />
+                            <SearchButton />
+                        </>
+                    }
+                    endAdornment={<PowerButton />}
+                />
                 <SearchHelp />
             </Box>
         );
     }
 }
-
-export default withStyles(styles)(AppShell);

packages/desktop-dock/src/components/App/AppShell.tsx

@@ -6,20 +6,27 @@ import {
     CssBaseline,
 } from "@material-ui/core";
 import { computed } from "mobx";
-import { observer } from "mobx-react";
+import { inject, observer } from "mobx-react";
 import * as React from "react";
-import { defaultTheme } from "./defaultTheme";
+import { IThemeStore } from "../../stores";
 
 const generateClassName = createGenerateClassName({
     disableGlobal: true,
     productionPrefix: "d",
 });
 
+interface IAppThemeProps {
+    readonly themeStore?: IThemeStore;
+}
+
+@inject("themeStore")
 @observer
-export class AppTheme extends React.Component {
+export class AppTheme extends React.Component<IAppThemeProps> {
     @computed
     private get currentThemeOptions() {
-        return createMuiTheme(defaultTheme);
+        const { current } = this.props.themeStore!;
+
+        return createMuiTheme(current);
     }
 
     public render() {

packages/desktop-dock/src/components/App/AppTheme.tsx

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { Provider } from "mobx-react";
+import { ObservableFilterStore } from "../../stores";
+
+export class FilterStoreProvider extends React.PureComponent {
+    private readonly filterStore = new ObservableFilterStore();
+
+    public render() {
+        return <Provider filterStore={this.filterStore}>{this.props.children}</Provider>;
+    }
+}

packages/desktop-dock/src/components/App/FilterStoreProvider.tsx

@@ -1,22 +1,9 @@
 import * as React from "react";
-import { Provider, inject } from "mobx-react";
-import { ISearchStore, IApplicationsStore, ObservableSearchStore, createSearchProvider } from "../../stores";
+import { Provider } from "mobx-react";
+import { ObservableSearchStore } from "../../stores";
 
-interface ISearchStoreProviderProps {
-    readonly applicationsStore?: IApplicationsStore;
-}
-
-@inject("applicationsStore")
-export class SearchStoreProvider extends React.PureComponent<ISearchStoreProviderProps> {
-    private readonly searchStore: ISearchStore;
-
-    public constructor(props: ISearchStoreProviderProps) {
-        super(props);
-
-        const searchProvider = createSearchProvider(props.applicationsStore!);
-
-        this.searchStore = new ObservableSearchStore(searchProvider);
-    }
+export class SearchStoreProvider extends React.PureComponent {
+    private readonly searchStore = new ObservableSearchStore();
 
     public render() {
         return <Provider searchStore={this.searchStore}>{this.props.children}</Provider>;

packages/desktop-dock/src/components/App/SearchStoreProvider.tsx

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { Provider } from "mobx-react";
+import { ObservableTabStore } from "../../stores";
+
+export class TabStoreProvider extends React.PureComponent {
+    private readonly tabStore = new ObservableTabStore();
+
+    public render() {
+        return <Provider tabStore={this.tabStore}>{this.props.children}</Provider>;
+    }
+}