From 02ba2ac520f594ac16da7a2e0ffac6debe505251 Mon Sep 17 00:00:00 2001
From: Alin Voinea <contact@avoinea.com>
Date: Mon, 29 Mar 2021 15:24:12 +0300
Subject: [PATCH] Show instructions button when instructions available

---
 src/components/manage/Blocks/Group/Edit.jsx   |  19 +++-
 .../manage/Blocks/Group/EditBlockWrapper.jsx  | 104 +++++++++---------
 .../manage/Blocks/Group/editor.less           |   8 +-
 3 files changed, 74 insertions(+), 57 deletions(-)

diff --git a/src/components/manage/Blocks/Group/Edit.jsx b/src/components/manage/Blocks/Group/Edit.jsx
index b310b93..bdbe72e 100644
--- a/src/components/manage/Blocks/Group/Edit.jsx
+++ b/src/components/manage/Blocks/Group/Edit.jsx
@@ -97,7 +97,15 @@ const Edit = (props) => {
   };
 
   const counterComponent = props.data.maxChars ? (
-    <p style={counterStyle} className="counter">
+    <p
+      style={counterStyle}
+      className="counter"
+      onClick={() => {
+        setSelectedBlock();
+        props.setSidebarTab(1);
+      }}
+      aria-hidden="true"
+    >
       {props.data.maxChars - charCount < 0 ? (
         <>
           <span>{`${
@@ -141,7 +149,9 @@ const Edit = (props) => {
         allowedBlocks={data.allowedBlocks}
         title={data.placeholder}
         description={data?.instructions?.data}
-        onSelectBlock={(id) => setSelectedBlock(id)}
+        onSelectBlock={(id) => {
+          setSelectedBlock(id);
+        }}
         onChangeFormData={(newFormData) => {
           onChangeBlock(block, {
             ...data,
@@ -169,7 +179,7 @@ const Edit = (props) => {
             disabled={data.disableInnerButtons}
             extraControls={
               <>
-                {!data?.readOnlySettings && instructions && (
+                {instructions && (
                   <>
                     <Button
                       icon
@@ -177,7 +187,8 @@ const Edit = (props) => {
                       title="Help"
                       onClick={() => {
                         setSelectedBlock();
-                        props.setSidebarTab(1);
+                        const tab = manage ? 0 : 1;
+                        props.setSidebarTab(tab);
                       }}
                     >
                       <Icon name={helpSVG} className="" size="19px" />
diff --git a/src/components/manage/Blocks/Group/EditBlockWrapper.jsx b/src/components/manage/Blocks/Group/EditBlockWrapper.jsx
index 408d8f7..e3754c2 100644
--- a/src/components/manage/Blocks/Group/EditBlockWrapper.jsx
+++ b/src/components/manage/Blocks/Group/EditBlockWrapper.jsx
@@ -78,7 +78,7 @@ class EditBlockWrapper extends React.Component {
     const type = data['@type'];
     const { disableNewBlocks } = data;
     const dragVisible = !data.fixed;
-    const visible = selected && !disabled;
+    const visible = selected;
 
     const required = isBoolean(data.required)
       ? data.required
@@ -91,7 +91,7 @@ class EditBlockWrapper extends React.Component {
           {...(selected ? draginfo?.draggableProps : null)}
           className={`block-editor-${data['@type']}`}
         >
-          {!selected && (
+          {(!selected || !visible || disabled) && (
             <div
               style={{
                 display: 'none',
@@ -102,56 +102,60 @@ class EditBlockWrapper extends React.Component {
           )}
           {visible && (
             <div className="block-toolbar">
-              <div
-                style={{
-                  display: dragVisible ? 'inline-block' : 'none',
-                }}
-                {...draginfo.dragHandleProps}
-                className="drag handle wrapper-group-block"
-              >
-                <Button icon basic title="Drag and drop">
-                  <Icon name={dragSVG} size="19px" />
-                </Button>
-              </div>
-
               {extraControls}
 
-              {!disableNewBlocks && !blockHasValue(data) && (
-                <Button
-                  icon
-                  basic
-                  title="Add block"
-                  onClick={() => {
-                    this.setState({
-                      addNewBlockOpened: !this.state.addNewBlockOpened,
-                    });
-                  }}
-                  className="group-block-add-button"
-                >
-                  <Icon name={addSVG} className="" size="19px" />
-                </Button>
-              )}
-              {!required && (
-                <Button
-                  icon
-                  basic
-                  title="Remove block"
-                  onClick={() => onDeleteBlock(block)}
-                  className="delete-button-group-block"
-                  aria-label={intl.formatMessage(messages.delete)}
-                >
-                  <Icon name={trashSVG} size="19px" />
-                </Button>
-              )}
-              {this.state.addNewBlockOpened && (
-                <BlockChooser
-                  onMutateBlock={(id, value) => {
-                    this.setState({ addNewBlockOpened: false });
-                    onMutateBlock(id, value);
-                  }}
-                  currentBlock={block}
-                  allowedBlocks={allowedBlocks}
-                />
+              {!disabled && (
+                <>
+                  <div
+                    style={{
+                      display: dragVisible ? 'inline-block' : 'none',
+                    }}
+                    {...draginfo.dragHandleProps}
+                    className="drag handle wrapper-group-block"
+                  >
+                    <Button icon basic title="Drag and drop">
+                      <Icon name={dragSVG} size="19px" />
+                    </Button>
+                  </div>
+
+                  {!disableNewBlocks && !blockHasValue(data) && (
+                    <Button
+                      icon
+                      basic
+                      title="Add block"
+                      onClick={() => {
+                        this.setState({
+                          addNewBlockOpened: !this.state.addNewBlockOpened,
+                        });
+                      }}
+                      className="group-block-add-button"
+                    >
+                      <Icon name={addSVG} className="" size="19px" />
+                    </Button>
+                  )}
+                  {!required && (
+                    <Button
+                      icon
+                      basic
+                      title="Remove block"
+                      onClick={() => onDeleteBlock(block)}
+                      className="delete-button-group-block"
+                      aria-label={intl.formatMessage(messages.delete)}
+                    >
+                      <Icon name={trashSVG} size="19px" />
+                    </Button>
+                  )}
+                  {this.state.addNewBlockOpened && (
+                    <BlockChooser
+                      onMutateBlock={(id, value) => {
+                        this.setState({ addNewBlockOpened: false });
+                        onMutateBlock(id, value);
+                      }}
+                      currentBlock={block}
+                      allowedBlocks={allowedBlocks}
+                    />
+                  )}
+                </>
               )}
             </div>
           )}
diff --git a/src/components/manage/Blocks/Group/editor.less b/src/components/manage/Blocks/Group/editor.less
index 07779ed..9763d01 100644
--- a/src/components/manage/Blocks/Group/editor.less
+++ b/src/components/manage/Blocks/Group/editor.less
@@ -67,7 +67,6 @@
     z-index: 3;
     right: -9px;
     display: flex;
-    padding: 5px;
     border: none;
     border: 1px solid @borderColor;
     border-bottom: 1px solid @pageBackground;
@@ -77,8 +76,11 @@
     border-top-right-radius: 1rem;
 
     .ui.basic.button {
-      padding: 3px;
-      padding-right: 0;
+      padding: 8px 5px;
+    }
+
+    .ui.basic.button:hover {
+      background: transparent !important;
     }
   }
 }