Issue #3496917 by qusai taha: Fix moderation state dropdown issue after Gin...

Issue #3496917 by qusai taha: Fix moderation state dropdown issue after Gin Theme Update to Version 8.x-3.0 with Varbase Workflow

css/theme/moderation-state.theme.css

-#edit-gin-sticky-actions #edit-moderation-state-0 .form-element--type-select {
+#edit-gin-sticky-actions #edit-moderation-state-0--2 .form-element--type-select {
   width: 8rem;
 }
 
-#edit-gin-sticky-actions #edit-moderation-state-0 .form-item--moderation-state-0-current {
+#edit-gin-sticky-actions #edit-moderation-state-0--2 .form-item--moderation-state-0-current {
   display: none;
 }
 
-#edit-gin-sticky-actions #edit-moderation-state-0 .form-item--moderation-state-0-state label {
+#edit-gin-sticky-actions #edit-moderation-state-0--2 .form-item--moderation-state-0-state label {
   display: none;
 }
 
@@ -17,3 +17,7 @@
 #edit-gin-sticky-actions [data-gin-sticky-form-selector=edit-submit] {
   order: -4;
 }
+
+#edit-gin-sidebar #edit-moderation-state-wrapper {
+  display: none;
+}

js/moderation-state.js

+/**
+ * @file
+ * Behaviors of Varbase Moderation State for state dropdown change.
+ */
+
+(function ($, _, Drupal) {
+  Drupal.behaviors.varbaseModerationStateSync = {
+    attach: function (context, settings) {
+      const dropdown1 = $('[id="edit-moderation-state-0-state"]', context);
+      const dropdown2 = $('[id="edit-moderation-state-0-state--2"]', context);
+
+      if (dropdown1.length && dropdown2.length) {
+        // Sync dropdown2 when dropdown1 changes.
+        dropdown1.on('change', function () {
+          dropdown2.val($(this).val()).trigger('change');
+        });
+
+        // Sync dropdown1 when dropdown2 changes.
+        dropdown2.on('change', function () {
+          dropdown1.val($(this).val()).trigger('change');
+        });
+      }
+    }
+  };
+})(window.jQuery, window._, window.Drupal);

scss/theme/moderation-state.theme.scss

 #edit-gin-sticky-actions {
 
-  #edit-moderation-state-0 {
+  #edit-moderation-state-0--2 {
     .form-element--type-select {
       width: 8rem;
     }
@@ -24,3 +24,9 @@
     order: -4;
   }
 }
+
+#edit-gin-sidebar {
+  #edit-moderation-state-wrapper {
+    display: none;
+  }
+}

varbase_workflow.libraries.yml

@@ -2,3 +2,5 @@ moderation-state:
   css:
     theme:
       css/theme/moderation-state.theme.css: { }
+  js:
+    js/moderation-state.js: { }

varbase_workflow.module

@@ -86,8 +86,9 @@ function varbase_workflow_form_alter(array &$form, FormStateInterface $form_stat
     $base_themes = (array) $active_theme->getBaseThemeExtensions();
     if ($active_theme->getName() === 'gin' || array_key_exists('gin', $base_themes)) {
 
-      // Set the group for moderation status to be in Gin Actions sticky status.
-      $form['moderation_state']['#group'] = 'status';
+      // Copy the moderation status form.
+      $form['moderation_state_sticky_form'] = $form['moderation_state'];
+      $form['moderation_state_sticky_form']['#group'] = 'status';
 
       // Change the title of the submit button.
       $form['actions']['submit']['#value'] = t('Save as');