feat: various improvements and features

packages/app-aco/src/components/Table/useTableRow.tsx

@@ -22,16 +22,20 @@ export const TableRowProvider = <T,>({ row, children }: TableRowProviderProps<T>
     return <TableRowContext.Provider value={value}>{children}</TableRowContext.Provider>;
 };
 
-export const useTableRow = <T extends Record<string, any> & DefaultData>() => {
-    const context = useContext<TableRowContextData<T>>(
-        TableRowContext as unknown as Context<TableRowContextData<T>>
-    );
-
-    if (!context) {
-        throw Error(
-            `TableRowContext is missing in the component tree. Are you using "useTableRow()" hook in the right place?`
+export const createUseTableRow = <TBaseRow = Record<string, any>,>() => {
+    return <TUserRow = Record<string, any>,>() => {
+        const context = useContext<TableRowContextData<TBaseRow & DefaultData & TUserRow>>(
+            TableRowContext as unknown as Context<
+                TableRowContextData<TBaseRow & DefaultData & TUserRow>
+            >
         );
-    }
 
-    return context;
+        if (!context) {
+            throw Error(
+                `TableRowContext is missing in the component tree. Are you using "useTableRow()" hook in the right place?`
+            );
+        }
+
+        return context;
+    };
 };

packages/app-aco/src/config/table/Column.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement } from "react";
 import { Property, useIdGenerator } from "@webiny/react-properties";
-import { useTableRow } from "~/components/Table/useTableRow";
+import { createUseTableRow } from "~/components/Table/useTableRow";
 import { FolderTableItem, BaseTableItem } from "~/types";
 
 export interface ColumnConfig {
@@ -81,4 +81,4 @@ const isFolderRow = (row: BaseTableItem): row is FolderTableItem => {
     return row.$type === "FOLDER";
 };
 
-export const Column = Object.assign(BaseColumn, { isFolderRow, useTableRow });
+export const Column = Object.assign(BaseColumn, { isFolderRow, createUseTableRow });

packages/app-aco/src/contexts/app.tsx

@@ -1,13 +1,13 @@
 import React, { useEffect, useMemo, useState } from "react";
+import { ApolloClient } from "apollo-client";
+import { CircularProgress } from "@webiny/ui/Progress";
+import { DialogsProvider } from "@webiny/app-admin";
 import { AcoApp, AcoAppMode, AcoError, AcoModel, AcoModelField } from "~/types";
 import { createGetAppQuery, GetAppResult, GetAppVariables } from "~/graphql/app.gql";
 import { FoldersProvider as FoldersContextProvider } from "./folders";
 import { SearchRecordsProvider as SearchRecordsContextProvider } from "./records";
-import { DialogsProvider as DialogsContextProvider } from "../dialogs";
 import { DisplayError } from "./DisplayError";
-import { ApolloClient } from "apollo-client";
 import { NavigateFolderWithRouterProvider } from "~/contexts/navigateFolderWithRouter";
-import { CircularProgress } from "@webiny/ui/Progress";
 import { AcoListProvider } from "~/contexts/acoList";
 
 export interface AcoAppProviderContext {
@@ -253,7 +253,7 @@ export const AcoAppProvider = ({
                         createStorageKey={createNavigateFolderStorageKey}
                     >
                         <AcoListProvider own={own} titleFieldId={model.titleFieldId}>
-                            <DialogsContextProvider>{children}</DialogsContextProvider>
+                            <DialogsProvider>{children}</DialogsProvider>
                         </AcoListProvider>
                     </NavigateFolderWithRouterProvider>
                 </SearchRecordsContextProvider>

packages/app-aco/src/contexts/records.tsx

@@ -175,7 +175,7 @@ export const SearchRecordsProvider = ({ children }: Props) => {
                 const { after, limit, sort: sorting, search, where } = params;
 
                 /**
-                 * Avoiding to fetch records in case they have already been fetched.
+                 * Avoiding fetching records in case they have already been fetched.
                  * This happens when visiting a list with all records loaded and receives "after" param.
                  */
                 const totalCount = meta?.totalCount || 0;

packages/app-aco/src/dialogs/index.tsx

@@ -1,8 +1,5 @@
-export * from "./Dialog";
-export * from "./dialogs";
 export * from "./useCreateDialog";
 export * from "./useDeleteDialog";
-export * from "./useDialogs";
 export * from "./useEditDialog";
 export * from "./useMoveToFolderDialog";
 export * from "./useSetPermissionsDialog";

packages/app-aco/src/dialogs/styled.tsx

@@ -1,17 +1,4 @@
 import styled from "@emotion/styled";
-import { Dialog, DialogActions as DefaultDialogActions } from "@webiny/ui/Dialog";
-
-export const DialogContainer = styled(Dialog)`
-    z-index: 100;
-    .mdc-dialog__surface {
-        width: 600px;
-        min-width: 600px;
-    }
-`;
-
-export const DialogActions = styled(DefaultDialogActions)`
-    justify-content: space-between;
-`;
 
 export const DialogFoldersContainer = styled("div")`
     max-height: 30vh;

packages/app-aco/src/dialogs/useCreateDialog.tsx

@@ -8,7 +8,7 @@ import { Typography } from "@webiny/ui/Typography";
 import { validation } from "@webiny/validation";
 
 import { FolderTree } from "~/components";
-import { useDialogs } from "~/dialogs/useDialogs";
+import { useDialogs } from "@webiny/app-admin";
 import { DialogFoldersContainer } from "~/dialogs/styled";
 import { useFolders } from "~/hooks";
 import { ROOT_FOLDER } from "~/constants";
@@ -103,7 +103,7 @@ export const useCreateDialog = (): UseCreateDialogResponse => {
 
         dialogs.showDialog({
             title: "Create a new folder",
-            message: <FormComponent currentParentId={currentParentId} />,
+            content: <FormComponent currentParentId={currentParentId} />,
             acceptLabel: "Create folder",
             cancelLabel: "Cancel",
             loadingLabel: "Creating folder",

packages/app-aco/src/dialogs/useDeleteDialog.tsx

@@ -1,6 +1,6 @@
 import { useSnackbar } from "@webiny/app-admin";
 
-import { useDialogs } from "~/dialogs/useDialogs";
+import { useDialogs } from "@webiny/app-admin";
 import { useFolders } from "~/hooks";
 import { FolderItem } from "~/types";
 import { useCallback } from "react";
@@ -35,7 +35,7 @@ export const useDeleteDialog = (): UseDeleteDialogResponse => {
     const showDialog = ({ folder }: ShowDialogParams) => {
         dialogs.showDialog({
             title: "Delete folder",
-            message: `You are about to delete the folder "${folder.title}"! Are you sure you want to continue?`,
+            content: `You are about to delete the folder "${folder.title}"! Are you sure you want to continue?`,
             acceptLabel: "Delete folder",
             cancelLabel: "Cancel",
             loadingLabel: "Deleting folder",

packages/app-aco/src/dialogs/useEditDialog.tsx

@@ -8,7 +8,7 @@ import { Typography } from "@webiny/ui/Typography";
 
 import { FolderTree } from "~/components";
 import { ROOT_FOLDER } from "~/constants";
-import { useDialogs } from "~/dialogs/useDialogs";
+import { useDialogs } from "@webiny/app-admin";
 import { DialogFoldersContainer } from "~/dialogs/styled";
 import { useFolders } from "~/hooks";
 import { FolderItem } from "~/types";
@@ -95,7 +95,7 @@ export const useEditDialog = (): UseEditDialogResponse => {
     const showDialog = ({ folder }: ShowDialogParams) => {
         dialog.showDialog({
             title: "Edit folder",
-            message: <FormComponent folder={folder} />,
+            content: <FormComponent folder={folder} />,
             acceptLabel: "Edit folder",
             cancelLabel: "Cancel",
             loadingLabel: "Editing folder",

packages/app-aco/src/dialogs/useMoveToFolderDialog.tsx

@@ -3,7 +3,7 @@ import React, { ReactNode } from "react";
 import { i18n } from "@webiny/app/i18n";
 import { Bind, GenericFormData } from "@webiny/form";
 import { Typography } from "@webiny/ui/Typography";
-import { useDialogs } from "~/dialogs/useDialogs";
+import { useDialogs } from "@webiny/app-admin";
 import { FolderTree } from "~/components";
 import { DialogFoldersContainer } from "~/dialogs/styled";
 
@@ -63,7 +63,7 @@ export const useMoveToFolderDialog = (): UseMoveToFolderDialogResponse => {
     }: ShowDialogParams) => {
         dialogs.showDialog({
             title,
-            message: <Message helpText={message} focusedFolderId={focusedFolderId} />,
+            content: <Message helpText={message} focusedFolderId={focusedFolderId} />,
             acceptLabel,
             cancelLabel,
             loadingLabel,

packages/app-aco/src/dialogs/useSetPermissionsDialog.tsx

@@ -8,7 +8,7 @@ import { UsersTeamsMultiAutocomplete } from "./DialogSetPermissions/UsersTeamsMu
 import { UsersTeamsSelection } from "./DialogSetPermissions/UsersTeamsSelection";
 import { LIST_FOLDER_LEVEL_PERMISSIONS_TARGETS } from "./DialogSetPermissions/graphql";
 
-import { useDialogs } from "~/dialogs/useDialogs";
+import { useDialogs } from "@webiny/app-admin";
 import { useFolders } from "~/hooks";
 import { FolderItem, FolderLevelPermissionsTarget, FolderPermission } from "~/types";
 
@@ -116,7 +116,7 @@ export const useSetPermissionsDialog = (): UseSetPermissionsDialogResponse => {
     const showDialog = ({ folder }: ShowDialogParams) => {
         dialogs.showDialog({
             title: `Manage permissions - ${folder.title}`,
-            message: <FormComponent folder={folder} />,
+            content: <FormComponent folder={folder} />,
             acceptLabel: "Save",
             cancelLabel: "Cancel",
             loadingLabel: "Updating permissions",

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

@@ -1,15 +1,16 @@
 import React from "react";
 import { App, Provider } from "@webiny/app";
+import { ThemeProvider } from "@webiny/app-theme";
 import { WcpProvider } from "@webiny/app-wcp";
+import { CircularProgress } from "@webiny/ui/Progress";
 import { ApolloClientFactory, createApolloProvider } from "./providers/ApolloProvider";
 import { Base } from "./Base";
 import { createTelemetryProvider } from "./providers/TelemetryProvider";
 import { createUiStateProvider } from "./providers/UiStateProvider";
 import { SearchProvider } from "./ui/Search";
 import { UserMenuProvider } from "./ui/UserMenu";
 import { NavigationProvider } from "./ui/Navigation";
-import { CircularProgress } from "@webiny/ui/Progress";
-import { ThemeProvider } from "@webiny/app-theme";
+import { createDialogsProvider } from "~/components/Dialogs/DialogsContext";
 
 export interface AdminProps {
     createApolloClient: ApolloClientFactory;
@@ -20,6 +21,7 @@ export const Admin = ({ children, createApolloClient }: AdminProps) => {
     const ApolloProvider = createApolloProvider(createApolloClient);
     const TelemetryProvider = createTelemetryProvider();
     const UiStateProvider = createUiStateProvider();
+    const DialogsProvider = createDialogsProvider();
 
     return (
         <ApolloProvider>
@@ -31,6 +33,7 @@ export const Admin = ({ children, createApolloClient }: AdminProps) => {
                         <Provider hoc={SearchProvider} />
                         <Provider hoc={UserMenuProvider} />
                         <Provider hoc={NavigationProvider} />
+                        <Provider hoc={DialogsProvider} />
                         <Base />
                         {children}
                     </App>

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

@@ -1,5 +1,5 @@
 import React, { createContext, useContext, useEffect } from "react";
-import { useNavigation } from "~/index";
+import { makeDecoratable, useNavigation } from "~/index";
 
 export interface MenuUpdater {
     (menuItem: MenuData | undefined | null): MenuData | undefined;
@@ -80,7 +80,7 @@ const mergeMenuItems = (item1: MenuData, item2: MenuData): MenuData => {
 /**
  * Register a new menu item into the Admin app.
  */
-export const AddMenu = ({ children, ...props }: MenuProps) => {
+export const AddMenu = makeDecoratable("AddMenu", ({ children, ...props }: MenuProps) => {
     const menu = useMenu();
     const navigation = useNavigation();
 
@@ -170,6 +170,6 @@ export const AddMenu = ({ children, ...props }: MenuProps) => {
     }
 
     return <MenuContext.Provider value={context}>{children}</MenuContext.Provider>;
-};
+});
 
 AddMenu.defaultProps = { tags: [] };

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

@@ -142,13 +142,13 @@ export const NavigationProvider = (Component: React.ComponentType<unknown>) => {
     };
 };
 
-export const Navigation = () => {
+export const Navigation = makeDecoratable("Navigation", () => {
     return (
         <Tags tags={{ location: "navigation" }}>
             <NavigationRenderer />
         </Tags>
     );
-};
+});
 
 export const NavigationRenderer = makeDecoratable("NavigationRenderer", createVoidComponent());
 

packages/app-admin/src/components/Buttons/Buttons.styles.tsx

@@ -2,4 +2,5 @@ import styled from "@emotion/styled";
 
 export const ButtonContainer = styled("div")`
     margin-left: 16px;
+    text-wrap: nowrap;
 `;