#1838 - Create custom top toolbar buttons (#5436)

* Custom buttons draft
* Fixed build and remove custom buttons to make sure tests are passing
* Updated top toolbar snapshot

packages/ketcher-core/src/application/ketcher.ts

@@ -499,4 +499,8 @@ export class Ketcher {
     this.structService = structService;
     this._indigo = new Indigo(structService);
   }
+
+  public sendCustomAction(name: string) {
+    this.eventBus.emit('CUSTOM_BUTTON_PRESSED', name);
+  }
 }

packages/ketcher-macromolecules/src/components/menu/__snapshots__/Menu.test.tsx.snap

@@ -16,7 +16,7 @@ Object {
             title=""
           >
             <svg
-              class="css-uwwqev"
+              class="css-2ntgcm"
               fill="none"
               height="24"
               viewBox="0 0 24 24"
@@ -38,7 +38,7 @@ Object {
             title=""
           >
             <svg
-              class="css-uwwqev"
+              class="css-2ntgcm"
               fill="none"
               height="48"
               viewBox="0 0 48 48"
@@ -62,7 +62,7 @@ Object {
                 title=""
               >
                 <svg
-                  class="css-uwwqev"
+                  class="css-2ntgcm"
                   fill="none"
                   height="48"
                   viewBox="0 0 48 48"
@@ -103,7 +103,7 @@ Object {
                 title=""
               >
                 <svg
-                  class="css-uwwqev"
+                  class="css-2ntgcm"
                   fill="none"
                   height="48"
                   viewBox="0 0 48 48"
@@ -140,7 +140,7 @@ Object {
                 title=""
               >
                 <svg
-                  class="css-uwwqev"
+                  class="css-2ntgcm"
                   fill="none"
                   height="48"
                   viewBox="0 0 48 48"
@@ -182,7 +182,7 @@ Object {
           title=""
         >
           <svg
-            class="css-uwwqev"
+            class="css-2ntgcm"
             fill="none"
             height="24"
             viewBox="0 0 24 24"
@@ -204,7 +204,7 @@ Object {
           title=""
         >
           <svg
-            class="css-uwwqev"
+            class="css-2ntgcm"
             fill="none"
             height="48"
             viewBox="0 0 48 48"
@@ -228,7 +228,7 @@ Object {
               title=""
             >
               <svg
-                class="css-uwwqev"
+                class="css-2ntgcm"
                 fill="none"
                 height="48"
                 viewBox="0 0 48 48"
@@ -269,7 +269,7 @@ Object {
               title=""
             >
               <svg
-                class="css-uwwqev"
+                class="css-2ntgcm"
                 fill="none"
                 height="48"
                 viewBox="0 0 48 48"
@@ -306,7 +306,7 @@ Object {
               title=""
             >
               <svg
-                class="css-uwwqev"
+                class="css-2ntgcm"
                 fill="none"
                 height="48"
                 viewBox="0 0 48 48"

packages/ketcher-react/src/components/Buttons/IconButton/IconButton.tsx

@@ -14,38 +14,14 @@
  * limitations under the License.
  ***************************************************************************/
 
-import { StyledButton, StyledIcon } from './styles';
+import { StyledIcon } from './styles';
 import { IIconButtonProps } from './types';
+import { IconButtonBase } from './IconButtonBase';
 
-export const IconButton = ({
-  onClick,
-  iconName,
-  shortcut,
-  title,
-  className,
-  isActive = false,
-  isHidden = false,
-  disabled = false,
-  testId,
-}: IIconButtonProps) => {
-  const combinedTitle = shortcut ? `${title} (${shortcut})` : title;
-
-  if (isHidden) {
-    return null;
-  }
-
+export const IconButton = ({ iconName, ...props }: IIconButtonProps) => {
   return (
-    <StyledButton
-      className={className}
-      title={combinedTitle}
-      onClick={onClick}
-      disabled={disabled}
-      isActive={isActive}
-      data-testid={testId}
-    >
+    <IconButtonBase {...props}>
       <StyledIcon name={iconName} />
-    </StyledButton>
+    </IconButtonBase>
   );
 };
-
-export default IconButton;

packages/ketcher-react/src/components/Buttons/IconButton/IconButtonBase.tsx

@@ -0,0 +1,49 @@
+/****************************************************************************
+ * Copyright 2021 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ ***************************************************************************/
+
+import { StyledButton } from './styles';
+import { IIconButtonBaseProps } from './types';
+
+export const IconButtonBase = ({
+  onClick,
+  shortcut,
+  title,
+  className,
+  isActive = false,
+  isHidden = false,
+  disabled = false,
+  testId,
+  children,
+}: IIconButtonBaseProps) => {
+  const combinedTitle = shortcut ? `${title} (${shortcut})` : title;
+
+  if (isHidden) {
+    return null;
+  }
+
+  return (
+    <StyledButton
+      className={className}
+      title={combinedTitle}
+      onClick={onClick}
+      disabled={disabled}
+      isActive={isActive}
+      data-testid={testId}
+    >
+      {children}
+    </StyledButton>
+  );
+};

packages/ketcher-react/src/components/Buttons/IconButton/IconButtonCustomIcon.tsx

@@ -0,0 +1,30 @@
+/****************************************************************************
+ * Copyright 2021 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ ***************************************************************************/
+
+import { IIconButtonCustomIconProps } from './types';
+import { IconButtonBase } from './IconButtonBase';
+import { StyledCustomIcon } from './styles';
+
+export const IconButtonCustomIcon = ({
+  link,
+  ...props
+}: IIconButtonCustomIconProps) => {
+  return (
+    <IconButtonBase {...props}>
+      <StyledCustomIcon src={link} alt={props.title} />
+    </IconButtonBase>
+  );
+};

packages/ketcher-react/src/components/Buttons/IconButton/index.tsx

@@ -15,3 +15,4 @@
  ***************************************************************************/
 
 export { IconButton } from './IconButton';
+export { IconButtonCustomIcon } from './IconButtonCustomIcon';

packages/ketcher-react/src/components/Buttons/IconButton/styles.ts

@@ -18,6 +18,7 @@ import styled from '@emotion/styled';
 import Icon from '../../Icon/Icon';
 import { style } from 'src/components/styles';
 import { IStyledButtonProps } from './types';
+import { css } from '@emotion/react';
 
 export const StyledButton = styled('button', {
   shouldForwardProp: (prop) => prop !== 'isActive',
@@ -53,7 +54,15 @@ export const StyledButton = styled('button', {
   },
 }));
 
-export const StyledIcon = styled(Icon)({
-  width: '100%',
-  height: '100%',
-});
+const IconStyles = css`
+  width: 100%;
+  height: 100%;
+`;
+
+export const StyledIcon = styled(Icon)`
+  ${IconStyles};
+`;
+
+export const StyledCustomIcon = styled('img')`
+  ${IconStyles};
+`;

packages/ketcher-react/src/components/Buttons/IconButton/types.ts

@@ -15,9 +15,9 @@
  ***************************************************************************/
 
 import { IconName } from '../../Icon/types';
+import { ReactNode } from 'react';
 
-export interface IIconButtonProps {
-  iconName: IconName;
+export interface IIconButtonBaseProps {
   onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
   title?: string;
   className?: string;
@@ -26,6 +26,21 @@ export interface IIconButtonProps {
   isActive?: boolean;
   shortcut?: string;
   testId?: string;
+  children: ReactNode;
+}
+
+type IIconButtonBasePropsWithoutChildren = Omit<
+  IIconButtonBaseProps,
+  'children'
+>;
+
+export interface IIconButtonProps extends IIconButtonBasePropsWithoutChildren {
+  iconName: IconName;
+}
+
+export interface IIconButtonCustomIconProps
+  extends IIconButtonBasePropsWithoutChildren {
+  link: string;
 }
 
 export interface IStyledButtonProps {

packages/ketcher-react/src/script/builders/ketcher/CustomButtons.ts

@@ -0,0 +1,5 @@
+export interface CustomButton {
+  id: string;
+  imageLink: string;
+  title: string;
+}

packages/ketcher-react/src/script/builders/ketcher/KetcherBuilder.ts

@@ -32,6 +32,7 @@ import { initApp } from '../../ui';
 import { Root } from 'react-dom/client';
 import { IndigoProvider } from 'src/script/providers';
 import { STRUCT_SERVICE_INITIALIZED_EVENT } from '../../../constants';
+import { CustomButton } from './CustomButtons';
 
 class KetcherBuilder {
   private structService: StructService | null;
@@ -97,6 +98,7 @@ class KetcherBuilder {
     errorHandler: (message: string) => void,
     buttons?: ButtonsConfig,
     togglerComponent?: JSX.Element,
+    customButtons?: Array<CustomButton>,
   ): Promise<{
     setKetcher: (ketcher: Ketcher) => void;
     ketcherId: string;
@@ -122,6 +124,7 @@ class KetcherBuilder {
           version: process.env.VERSION || '',
           buildDate: process.env.BUILD_DATE || '',
           buildNumber: process.env.BUILD_NUMBER || '',
+          customButtons: customButtons || [],
         },
         structService!,
         resolve,

packages/ketcher-react/src/script/index.ts

@@ -18,13 +18,15 @@ import { Root } from 'react-dom/client';
 import { ButtonsConfig, KetcherBuilder } from './builders';
 
 import { StructServiceProvider } from 'ketcher-core';
+import { CustomButton } from './builders/ketcher/CustomButtons';
 
 interface Config {
   element: HTMLDivElement | null;
   appRoot: Root;
   staticResourcesUrl: string;
   structServiceProvider: StructServiceProvider;
   buttons?: ButtonsConfig;
+  customButtons?: Array<CustomButton>;
   errorHandler: (message: string) => void;
   togglerComponent?: JSX.Element;
 }
@@ -37,6 +39,7 @@ async function buildKetcherAsync({
   buttons,
   errorHandler,
   togglerComponent,
+  customButtons,
 }: Config) {
   const builder = new KetcherBuilder();
 
@@ -50,6 +53,7 @@ async function buildKetcherAsync({
       errorHandler,
       buttons,
       togglerComponent,
+      customButtons,
     );
 
   const ketcher = builder.build();

packages/ketcher-react/src/script/ui/state/index.js

@@ -101,14 +101,18 @@ function getRootReducer(setEditor) {
 }
 
 export default function (options, server, setEditor) {
-  const { buttons = {}, ...restOptions } = options;
+  const { buttons = {}, customButtons, ...restOptions } = options;
 
   // TODO: redux localStorage here
   const initState = {
     actionState: null,
     editor: null,
     modal: null,
-    options: Object.assign(initOptionsState, { app: restOptions, buttons }),
+    options: Object.assign(initOptionsState, {
+      app: restOptions,
+      buttons,
+      customButtons,
+    }),
     server: server || Promise.reject(new Error('Standalone mode!')),
     templates: initTmplsState,
   };