feat(webapp): handle create item on Accounts select components

packages/webapp/src/components/Accounts/AccountsMultiSelect.tsx

@@ -1,11 +1,23 @@
 // @ts-nocheck
-import React, { useMemo } from 'react';
+import React from 'react';
 import { MenuItem } from '@blueprintjs/core';
 import { FMultiSelect } from '../Forms';
 import { accountPredicate } from './_components';
 import { MenuItemNestedText } from '../Menu';
 import { usePreprocessingAccounts } from './_hooks';
 
+// Create new account renderer.
+const createNewItemRenderer = (query, active, handleClick) => {
+  return (
+    <MenuItem
+      icon="add"
+      text={intl.get('list.create', { value: `"${query}"` })}
+      active={active}
+      onClick={handleClick}
+    />
+  );
+};
+
 /**
  * Default account item renderer of the list.
  * @returns {JSX.Element}
@@ -30,13 +42,16 @@ const accountRenderer = (
   );
 };
 
+// Create new item from the given query string.
+const createNewItemFromQuery = (name) => ({ name });
+
 /**
  * Accounts multi-select field binded with Formik form.
- * @param {*} param0
  * @returns {JSX.Element}
  */
 export function AccountsMultiSelect({
   items,
+  allowCreate,
 
   filterByRootTypes,
   filterByParentTypes,
@@ -46,12 +61,22 @@ export function AccountsMultiSelect({
   ...rest
 }) {
   // Filters accounts based on filter props.
-  const filteredAccounts = usePreprocessingAccounts(accounts, {
+  const filteredAccounts = usePreprocessingAccounts(items, {
     filterByParentTypes,
     filterByTypes,
     filterByNormal,
     filterByRootTypes,
   });
+  // Maybe inject new item props to select component.
+  const maybeCreateNewItemRenderer = allowCreate ? createNewItemRenderer : null;
+  const maybeCreateNewItemFromQuery = allowCreate
+    ? createNewItemFromQuery
+    : null;
+
+  // Handles the create item click.
+  const handleCreateItemClick = () => {
+    openDialog(DialogsName.AccountForm);
+  };
 
   return (
     <FMultiSelect
@@ -63,6 +88,9 @@ export function AccountsMultiSelect({
       popoverProps={{ minimal: true }}
       itemPredicate={accountPredicate}
       itemRenderer={accountRenderer}
+      createNewItemRenderer={maybeCreateNewItemRenderer}
+      createNewItemFromQuery={maybeCreateNewItemFromQuery}
+      onCreateItemSelect={handleCreateItemClick}
       {...rest}
     />
   );

packages/webapp/src/components/Accounts/AccountsSelect.tsx

@@ -5,6 +5,7 @@ import intl from 'react-intl-universal';
 import { MenuItem } from '@blueprintjs/core';
 import { MenuItemNestedText, FSelect } from '@/components';
 import { accountPredicate } from './_components';
+import { DialogsName } from '@/constants/dialogs';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
 import { usePreprocessingAccounts } from './_hooks';
 
@@ -75,6 +76,11 @@ function AccountsSelectRoot({
     ? createNewItemFromQuery
     : null;
 
+  // Handles the create item click.
+  const handleCreateItemClick = () => {
+    openDialog(DialogsName.AccountForm);
+  };
+
   return (
     <FSelect
       items={filteredAccounts}
@@ -86,6 +92,7 @@ function AccountsSelectRoot({
       itemRenderer={accountRenderer}
       createNewItemRenderer={maybeCreateNewItemRenderer}
       createNewItemFromQuery={maybeCreateNewItemFromQuery}
+      onCreateItemSelect={handleCreateItemClick}
       {...restProps}
     />
   );

packages/webapp/src/style/App.scss

@@ -52,6 +52,7 @@ body.hide-scrollbar .Pane2 {
 }
 
 .bp3-fill {
+
   .bp3-popover-wrapper,
   .bp3-popover-target {
     display: block;
@@ -68,9 +69,9 @@ body.hide-scrollbar .Pane2 {
   margin-right: 6px;
 }
 
-.bp3-select-popover .bp3-menu {
+.bp3-select-popover .bp3-menu,
+.bp3-multi-select-popover .bp3-menu {
   max-height: 300px;
-  max-width: 400px;
   overflow: auto;
 }
 
@@ -103,27 +104,21 @@ body.hide-scrollbar .Pane2 {
   background-color: #0066ff;
 }
 
-.ReactVirtualized__Collection {
-}
+.ReactVirtualized__Collection {}
 
-.ReactVirtualized__Collection__innerScrollContainer {
-}
+.ReactVirtualized__Collection__innerScrollContainer {}
 
 /* Grid default theme */
 
-.ReactVirtualized__Grid {
-}
+.ReactVirtualized__Grid {}
 
-.ReactVirtualized__Grid__innerScrollContainer {
-}
+.ReactVirtualized__Grid__innerScrollContainer {}
 
 /* Table default theme */
 
-.ReactVirtualized__Table {
-}
+.ReactVirtualized__Table {}
 
-.ReactVirtualized__Table__Grid {
-}
+.ReactVirtualized__Table__Grid {}
 
 .ReactVirtualized__Table__headerRow {
   font-weight: 700;
@@ -186,8 +181,7 @@ body.hide-scrollbar .Pane2 {
 
 /* List default theme */
 
-.ReactVirtualized__List {
-}
+.ReactVirtualized__List {}
 
 .bp3-drawer {
   box-shadow: 0 0 0;
@@ -243,7 +237,7 @@ html[lang^='ar'] {
       padding-left: 14px;
       padding-right: 14px;
 
-      & + .bp3-button {
+      &+.bp3-button {
         margin-left: 8px;
       }
     }
@@ -255,7 +249,7 @@ html[lang^='ar'] {
         margin: 0;
       }
 
-      > .bp3-spinner {
+      >.bp3-spinner {
         margin: 20px 0;
       }
     }
@@ -283,6 +277,7 @@ html[lang^='ar'] {
 .align-right {
   text-align: right;
 }
+
 .align-center {
   text-align: center;
 }
@@ -292,6 +287,6 @@ html[lang^='ar'] {
 }
 
 
-span.table-tooltip-overview-target{
+span.table-tooltip-overview-target {
   display: inline;
 }