New Icon Picker Component

apps/admin/package.json

@@ -13,7 +13,6 @@
     "@webiny/app-form-builder": "0.0.0",
     "@webiny/app-headless-cms": "0.0.0",
     "@webiny/app-page-builder": "0.0.0",
-    "@webiny/app-page-builder-editor": "0.0.0",
     "@webiny/app-serverless-cms": "0.0.0",
     "@webiny/cli": "0.0.0",
     "@webiny/plugins": "0.0.0",

apps/admin/src/okta.ts

@@ -3,8 +3,8 @@ import OktaSignIn from "@okta/okta-signin-widget";
 import { OktaAuth } from "@okta/okta-auth-js";
 import "@okta/okta-signin-widget/dist/css/okta-sign-in.min.css";
 
-const oktaDomain = `https://dev-844500.oktapreview.com`;
-export const rootAppClientId = "0oa1149zslypdjy5B0h8";
+const oktaDomain = String(process.env.WEBINY_ADMIN_OKTA_DOMAIN);
+export const rootAppClientId = String(process.env.WEBINY_ADMIN_OKTA_APP_CLIENT_ID);
 
 const redirectUri = window.location.origin + "/";
 

packages/app-admin/package.json

@@ -15,6 +15,7 @@
     "@editorjs/editorjs": "^2.19.0",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
+    "@iconify/json": "^2.2.142",
     "@material-design-icons/svg": "^0.14.3",
     "@svgr/webpack": "^6.1.1",
     "@types/mime": "^2.0.3",
@@ -27,6 +28,7 @@
     "@webiny/lexical-editor": "0.0.0",
     "@webiny/plugins": "0.0.0",
     "@webiny/react-composition": "0.0.0",
+    "@webiny/react-properties": "0.0.0",
     "@webiny/react-router": "0.0.0",
     "@webiny/telemetry": "0.0.0",
     "@webiny/ui": "0.0.0",
@@ -43,17 +45,21 @@
     "emotion": "^10.0.17",
     "graphlib": "^2.1.7",
     "graphql": "^15.7.2",
+    "graphql-tag": "^2.12.6",
     "is-hotkey": "^0.1.3",
     "lodash": "^4.17.21",
     "mobx": "^6.9.0",
+    "mobx-react-lite": "^3.4.3",
     "prop-types": "^15.7.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hotkeyz": "^1.0.4",
     "react-resizable-panels": "^2.0.19",
     "react-transition-group": "^4.3.0",
+    "react-virtualized": "^9.21.2",
     "reset-css": "^5.0.1",
-    "store": "^2.0.12"
+    "store": "^2.0.12",
+    "unicode-emoji-json": "^0.4.0"
   },
   "devDependencies": {
     "@emotion/babel-plugin": "^11.11.0",
@@ -79,6 +85,8 @@
     "ignore": {
       "dependencies": [
         "@svgr/webpack",
+        "@iconify/json",
+        "unicode-emoji-json",
         "@emotion/react",
         "@types/mime",
         "reset-css"

packages/app-admin/src/base/Admin.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { App, Provider } from "@webiny/app";
+import { App } from "@webiny/app";
 import { ThemeProvider } from "@webiny/app-theme";
 import { WcpProvider } from "@webiny/app-wcp";
 import { CircularProgress } from "@webiny/ui/Progress";
@@ -11,6 +11,7 @@ import { SearchProvider } from "./ui/Search";
 import { UserMenuProvider } from "./ui/UserMenu";
 import { NavigationProvider } from "./ui/Navigation";
 import { createDialogsProvider } from "~/components/Dialogs/DialogsContext";
+import { DefaultIcons, IconPickerConfigProvider } from "~/components/IconPicker/config";
 
 export interface AdminProps {
     createApolloClient: ApolloClientFactory;
@@ -27,14 +28,19 @@ export const Admin = ({ children, createApolloClient }: AdminProps) => {
         <ApolloProvider>
             <ThemeProvider>
                 <WcpProvider loader={<CircularProgress label={"Loading..."} />}>
-                    <App>
-                        <Provider hoc={TelemetryProvider} />
-                        <Provider hoc={UiStateProvider} />
-                        <Provider hoc={SearchProvider} />
-                        <Provider hoc={UserMenuProvider} />
-                        <Provider hoc={NavigationProvider} />
-                        <Provider hoc={DialogsProvider} />
+                    <App
+                        providers={[
+                            TelemetryProvider,
+                            UiStateProvider,
+                            SearchProvider,
+                            UserMenuProvider,
+                            NavigationProvider,
+                            DialogsProvider,
+                            IconPickerConfigProvider
+                        ]}
+                    >
                         <Base />
+                        <DefaultIcons />
                         {children}
                     </App>
                 </WcpProvider>

packages/app-admin/src/base/providers/TelemetryProvider.tsx

@@ -1,25 +1,27 @@
 import React, { useEffect } from "react";
 import { sendEvent } from "@webiny/telemetry/react";
-import { ComponentWithChildren } from "~/types";
+import { createProvider } from "@webiny/app";
 
 let eventSent = false;
 
 interface TelemetryProviderProps {
     children: React.ReactNode;
 }
 
-export const createTelemetryProvider = () => (Component: ComponentWithChildren) => {
-    return function TelemetryProvider({ children }: TelemetryProviderProps) {
-        useEffect(() => {
-            if (eventSent) {
-                return;
-            }
+export const createTelemetryProvider = () => {
+    return createProvider(Component => {
+        return function TelemetryProvider({ children }: TelemetryProviderProps) {
+            useEffect(() => {
+                if (eventSent) {
+                    return;
+                }
 
-            eventSent = true;
+                eventSent = true;
 
-            sendEvent("admin-app-start");
-        }, []);
+                sendEvent("admin-app-start");
+            }, []);
 
-        return <Component>{children}</Component>;
-    };
+            return <Component>{children}</Component>;
+        };
+    });
 };

packages/app-admin/src/base/providers/UiStateProvider.tsx

@@ -1,17 +1,19 @@
 import React from "react";
 import { UiProvider } from "@webiny/app/contexts/Ui";
-import { ComponentWithChildren } from "~/types";
+import { createProvider } from "@webiny/app";
 
 interface UiStateProviderProps {
     children: React.ReactNode;
 }
 
-export const createUiStateProvider = () => (Component: ComponentWithChildren) => {
-    return function UiStateProvider({ children }: UiStateProviderProps) {
-        return (
-            <UiProvider>
-                <Component>{children}</Component>
-            </UiProvider>
-        );
-    };
+export const createUiStateProvider = () => {
+    return createProvider(Component => {
+        return function UiStateProvider({ children }: UiStateProviderProps) {
+            return (
+                <UiProvider>
+                    <Component>{children}</Component>
+                </UiProvider>
+            );
+        };
+    });
 };

packages/app-admin/src/base/ui/Navigation.tsx

@@ -8,12 +8,11 @@ import React, {
     useState
 } from "react";
 import { generateId } from "@webiny/utils";
-import { createVoidComponent, makeDecoratable, Plugins } from "@webiny/app";
+import { createProvider, createVoidComponent, makeDecoratable, Plugins } from "@webiny/app";
 import { AddMenu as Menu, createEmptyMenu, MenuData, MenuProps, MenuUpdater, Tags } from "~/index";
 import { plugins } from "@webiny/plugins";
 import { AdminMenuPlugin } from "~/types";
 import { ItemProps, SectionProps } from "~/plugins/MenuPlugin";
-import { ComponentWithChildren } from "~/types";
 
 export interface NavigationContext {
     menuItems: MenuData[];
@@ -89,7 +88,7 @@ interface NavigationProviderProps {
     children: React.ReactNode;
 }
 
-export const NavigationProvider = (Component: ComponentWithChildren) => {
+export const NavigationProvider = createProvider(Component => {
     return function NavigationProvider({ children }: NavigationProviderProps) {
         const [menuItems, setState] = useState<MenuData[]>([]);
 
@@ -141,7 +140,7 @@ export const NavigationProvider = (Component: ComponentWithChildren) => {
             </NavigationContext.Provider>
         );
     };
-};
+});
 
 export const Navigation = makeDecoratable("Navigation", () => {
     return (

packages/app-admin/src/base/ui/Search.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useState } from "react";
-import { createVoidComponent, makeDecoratable } from "@webiny/app";
-import { ComponentWithChildren } from "~/types";
+import { createProvider, createVoidComponent, makeDecoratable } from "@webiny/app";
 
 export interface SearchOptionData {
     route: string;
@@ -33,7 +32,7 @@ interface SearchProviderProps {
     [key: string]: any;
 }
 
-export const SearchProvider = (Component: ComponentWithChildren) => {
+export const SearchProvider = createProvider(Component => {
     return function SearchProvider({ children, ...props }: SearchProviderProps) {
         const [options, setOptions] = useState<SearchOptionData[]>([]);
 
@@ -53,7 +52,7 @@ export const SearchProvider = (Component: ComponentWithChildren) => {
             </SearchContext.Provider>
         );
     };
-};
+});
 
 export const Search = makeDecoratable("Search", () => {
     return <SearchRenderer />;

packages/app-admin/src/base/ui/UserMenu.tsx

@@ -1,6 +1,5 @@
 import React, { Fragment, useCallback, useEffect, useState } from "react";
-import { createVoidComponent, makeDecoratable } from "@webiny/app";
-import { ComponentWithChildren } from "~/types";
+import { createProvider, createVoidComponent, makeDecoratable } from "@webiny/app";
 
 export interface UserMenuItemData {
     label?: string;
@@ -32,7 +31,7 @@ interface UserMenuProviderProps {
     [key: string]: any;
 }
 
-export const UserMenuProvider = (Component: ComponentWithChildren) => {
+export const UserMenuProvider = createProvider(Component => {
     return function UserMenuProvider({ children, ...props }: UserMenuProviderProps) {
         const [menuItems, setItems] = useState<UserMenuItemData[]>([]);
 
@@ -65,7 +64,7 @@ export const UserMenuProvider = (Component: ComponentWithChildren) => {
             </UserMenuContext.Provider>
         );
     };
-};
+});
 
 export const UserMenu = makeDecoratable("UserMenu", () => {
     return <UserMenuRenderer />;

packages/app-admin/src/components/Dialogs/DialogsContext.tsx

@@ -3,6 +3,7 @@ import { GenericFormData } from "@webiny/form";
 import { useSnackbar } from "~/hooks";
 import { Dialog } from "./Dialog";
 import { CustomDialog } from "./CustomDialog";
+import { createProvider } from "@webiny/app";
 
 interface ShowDialogParams {
     title: ReactNode;
@@ -154,13 +155,14 @@ interface DialogsProviderProps {
     children: React.ReactNode;
 }
 
-export const createDialogsProvider =
-    () => (Component: React.ComponentType<React.PropsWithChildren>) => {
+export const createDialogsProvider = () => {
+    return createProvider(Component => {
         return function DialogsProviderDecorator({ children }: DialogsProviderProps) {
             return (
                 <DialogsProvider>
                     <Component>{children}</Component>
                 </DialogsProvider>
             );
         };
-    };
+    });
+};