Tooltip for page template selection buttons (#2216)

* Starter Page Templates - Tooltip

* Update Release Notes

* Update Gutenberg ref

RELEASE-NOTES.txt

@@ -7,6 +7,7 @@
 * [***] Trash icon that is used to remove blocks is moved to the new menu reachable via ellipsis button in the block toolbar
 * [**] Block toolbar can now collapse when the block width is smaller than the toolbar content
 * [**] Creating undo levels less frequently
+* [**] Tooltip for page template selection buttons
 
 1.28.0
 ------

android/app/src/main/java/com/gutenberg/MainApplication.java

@@ -115,6 +115,14 @@ public void requestMediaEditor(MediaUploadCallback mediaUploadCallback, String m
             public void logUserEvent(GutenbergUserEvent gutenbergUserEvent, ReadableMap eventProperties) {
             }
 
+            @Override
+            public void setStarterPageTemplatesTooltipShown(boolean tooltipShown) {
+            }
+
+            @Override
+            public void requestStarterPageTemplatesTooltipShown(StarterPageTemplatesTooltipShownCallback starterPageTemplatesTooltipShownCallback) {
+            }
+
             @Override
             public void editorDidEmitLog(String message, LogLevel logLevel) {
                 switch (logLevel) {

ios/gutenberg/GutenbergViewController.swift

@@ -199,6 +199,14 @@ extension GutenbergViewController: GutenbergBridgeDelegate {
     func gutenbergDidRequestMention(callback: @escaping (Result<String, NSError>) -> Void) {
         callback(.success("matt"))
     }
+
+    func gutenbergDidRequestStarterPageTemplatesTooltipShown() -> Bool {
+        return false;
+    }
+
+    func gutenbergDidRequestSetStarterPageTemplatesTooltipShown(_ tooltipShown: Bool) {
+        print("Gutenberg requested setting tooltip flag")
+    }
 }
 
 extension GutenbergViewController: GutenbergBridgeDataSource {

react-native-gutenberg-bridge/android/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergBridgeJS2Parent.java

@@ -39,6 +39,10 @@ interface MediaUploadCallback {
         void onMediaFileUploadFailed(int mediaId);
     }
 
+    interface StarterPageTemplatesTooltipShownCallback {
+        void onRequestStarterPageTemplatesTooltipShown(boolean tooltipShown);
+    }
+
     // Ref: https://github.com/facebook/react-native/blob/master/Libraries/polyfills/console.js#L376
     enum LogLevel {
         TRACE(0),
@@ -140,4 +144,8 @@ public static GutenbergUserEvent getEnum(String eventName) {
     void logUserEvent(GutenbergUserEvent gutenbergUserEvent, ReadableMap eventProperties);
 
     void onAddMention(Consumer<String> onSuccess);
+
+    void setStarterPageTemplatesTooltipShown(boolean tooltipShown);
+
+    void requestStarterPageTemplatesTooltipShown(StarterPageTemplatesTooltipShownCallback starterPageTemplatesTooltipShownCallback);
 }

react-native-gutenberg-bridge/android/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgeModule.java

@@ -19,6 +19,7 @@
 import org.wordpress.mobile.ReactNativeGutenbergBridge.GutenbergBridgeJS2Parent.GutenbergUserEvent;
 import org.wordpress.mobile.ReactNativeGutenbergBridge.GutenbergBridgeJS2Parent.MediaType;
 import org.wordpress.mobile.ReactNativeGutenbergBridge.GutenbergBridgeJS2Parent.OtherMediaOptionsReceivedCallback;
+import org.wordpress.mobile.ReactNativeGutenbergBridge.GutenbergBridgeJS2Parent.StarterPageTemplatesTooltipShownCallback;
 import org.wordpress.mobile.ReactNativeGutenbergBridge.GutenbergBridgeJS2Parent.RNMedia;
 import org.wordpress.mobile.WPAndroidGlue.MediaOption;
 
@@ -256,6 +257,25 @@ public void addMention(Promise promise) {
         mGutenbergBridgeJS2Parent.onAddMention(promise::resolve);
     }
 
+    @ReactMethod
+    public void setStarterPageTemplatesTooltipShown(boolean tooltipShown) {
+        mGutenbergBridgeJS2Parent.setStarterPageTemplatesTooltipShown(tooltipShown);
+    }
+
+    @ReactMethod
+    public void requestStarterPageTemplatesTooltipShown(final Callback jsCallback) {
+        StarterPageTemplatesTooltipShownCallback starterPageTemplatesTooltipShownCallback = requestStarterPageTemplatesTooltipShownCallback(jsCallback);
+        mGutenbergBridgeJS2Parent.requestStarterPageTemplatesTooltipShown(starterPageTemplatesTooltipShownCallback);
+    }
+
+    private StarterPageTemplatesTooltipShownCallback requestStarterPageTemplatesTooltipShownCallback(final Callback jsCallback) {
+        return new StarterPageTemplatesTooltipShownCallback() {
+            @Override public void onRequestStarterPageTemplatesTooltipShown(boolean tooltipShown) {
+                jsCallback.invoke(tooltipShown);
+            }
+        };
+    }
+
     private GutenbergBridgeJS2Parent.MediaUploadCallback getNewUploadMediaCallback(final Boolean allowMultipleSelection, final Callback jsCallback) {
         return new GutenbergBridgeJS2Parent.MediaUploadCallback() {
             @Override

react-native-gutenberg-bridge/android/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java

@@ -79,6 +79,7 @@ public class WPAndroidGlueCode {
     private OnImageFullscreenPreviewListener mOnImageFullscreenPreviewListener;
     private OnMediaEditorListener mOnMediaEditorListener;
     private OnLogGutenbergUserEventListener mOnLogGutenbergUserEventListener;
+    private OnStarterPageTemplatesTooltipShownEventListener mOnStarterPageTemplatesTooltipShownListener;
     private boolean mIsEditorMounted;
 
     private String mContentHtml = "";
@@ -166,6 +167,11 @@ public interface OnLogGutenbergUserEventListener {
         void onGutenbergUserEvent(GutenbergUserEvent event, Map<String, Object> properties);
     }
 
+    public interface OnStarterPageTemplatesTooltipShownEventListener {
+        void onSetStarterPageTemplatesTooltipShown(boolean tooltipShown);
+        boolean onRequestStarterPageTemplatesTooltipShown();
+    }
+
     public void mediaSelectionCancelled() {
         mAppendsMultipleSelectedToSiblingBlocks = false;
     }
@@ -338,6 +344,17 @@ public void logUserEvent(GutenbergUserEvent event, ReadableMap eventProperties)
             @Override public void onAddMention(Consumer<String> onSuccess) {
                 mAddMentionUtil.getMention(onSuccess);
             }
+
+            @Override
+            public void setStarterPageTemplatesTooltipShown(boolean showTooltip) {
+                mOnStarterPageTemplatesTooltipShownListener.onSetStarterPageTemplatesTooltipShown(showTooltip);
+            }
+
+            @Override
+            public void requestStarterPageTemplatesTooltipShown(StarterPageTemplatesTooltipShownCallback starterPageTemplatesTooltipShownCallback) {
+                boolean tooltipShown = mOnStarterPageTemplatesTooltipShownListener.onRequestStarterPageTemplatesTooltipShown();
+                starterPageTemplatesTooltipShownCallback.onRequestStarterPageTemplatesTooltipShown(tooltipShown);
+            }
         }, mIsDarkMode);
 
         return Arrays.asList(
@@ -448,6 +465,7 @@ public void attachToContainer(ViewGroup viewGroup, OnMediaLibraryButtonListener
                                   OnMediaEditorListener onMediaEditorListener,
                                   OnLogGutenbergUserEventListener onLogGutenbergUserEventListener,
                                   AddMentionUtil addMentionUtil,
+                                  OnStarterPageTemplatesTooltipShownEventListener onStarterPageTemplatesTooltipListener,
                                   boolean isDarkMode) {
 
         MutableContextWrapper contextWrapper = (MutableContextWrapper) mReactRootView.getContext();
@@ -462,6 +480,7 @@ public void attachToContainer(ViewGroup viewGroup, OnMediaLibraryButtonListener
         mOnMediaEditorListener = onMediaEditorListener;
         mOnLogGutenbergUserEventListener = onLogGutenbergUserEventListener;
         mAddMentionUtil = addMentionUtil;
+        mOnStarterPageTemplatesTooltipShownListener = onStarterPageTemplatesTooltipListener;
 
         sAddCookiesInterceptor.setOnAuthHeaderRequestedListener(onAuthHeaderRequestedListener);
 

react-native-gutenberg-bridge/index.js

@@ -140,4 +140,12 @@ export function addMention() {
 	return RNReactNativeGutenbergBridge.addMention();
 }
 
+export function requestStarterPageTemplatesTooltipShown( callback ) {
+	return RNReactNativeGutenbergBridge.requestStarterPageTemplatesTooltipShown( callback );
+}
+
+export function setStarterPageTemplatesTooltipShown( tooltipShown ) {
+	return RNReactNativeGutenbergBridge.setStarterPageTemplatesTooltipShown( tooltipShown );
+}
+
 export default RNReactNativeGutenbergBridge;

react-native-gutenberg-bridge/ios/GutenbergBridgeDelegate.swift

@@ -160,14 +160,20 @@ public protocol GutenbergBridgeDelegate: class {
     ///
     func gutenbergDidRequestMediaEditor(with mediaUrl: URL, callback: @escaping MediaPickerDidPickMediaCallback)
 
-
     /// Tells the delegate that the editor needs to log a custom event
     /// - Parameter event: The event key to be logged
     func gutenbergDidLogUserEvent(_ event: GutenbergUserEvent)
 
     /// Tells the delegate that the editor requested a mention
     /// - Parameter callback: Completion handler to be called with an user mention or an error
     func gutenbergDidRequestMention(callback: @escaping (Swift.Result<String, NSError>) -> Void)
+
+    /// Tells the delegate that the editor requested to show the tooltip
+    func gutenbergDidRequestStarterPageTemplatesTooltipShown() -> Bool
+
+    /// Tells the delegate that the editor requested to set the tooltip's visibility
+    /// - Parameter tooltipShown: Tooltip's visibility value    
+    func gutenbergDidRequestSetStarterPageTemplatesTooltipShown(_ tooltipShown: Bool)
 }
 
 // MARK: - Optional GutenbergBridgeDelegate methods

react-native-gutenberg-bridge/ios/RNReactNativeGutenbergBridge.m

@@ -20,5 +20,7 @@ @interface RCT_EXTERN_MODULE(RNReactNativeGutenbergBridge, NSObject)
 RCT_EXTERN_METHOD(requestMediaEditor:(NSString *)mediaUrl callback:(RCTResponseSenderBlock)callback)
 RCT_EXTERN_METHOD(logUserEvent:(NSString *)event properties:(NSDictionary *)properties)
 RCT_EXTERN_METHOD(addMention:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)rejecter)
+RCT_EXTERN_METHOD(requestStarterPageTemplatesTooltipShown:(RCTResponseSenderBlock)callback)
+RCT_EXTERN_METHOD(setStarterPageTemplatesTooltipShown:(BOOL)tooltipShown)
 
 @end

react-native-gutenberg-bridge/ios/RNReactNativeGutenbergBridge.swift

@@ -242,6 +242,17 @@ public class RNReactNativeGutenbergBridge: RCTEventEmitter {
             }
         })        
     }
+
+    @objc
+    func requestStarterPageTemplatesTooltipShown(_ callback: @escaping RCTResponseSenderBlock) {
+        callback([self.delegate?.gutenbergDidRequestStarterPageTemplatesTooltipShown() ?? false])
+    }
+
+    @objc
+    func setStarterPageTemplatesTooltipShown(_ tooltipShown: Bool) {
+        self.delegate?.gutenbergDidRequestSetStarterPageTemplatesTooltipShown(tooltipShown)
+    }
+
 }
 
 // MARK: - RCTBridgeModule delegate