new diff helper

Author: turtledreams

plugins/sdk/frontend/public/templates/config.html

@@ -172,6 +172,34 @@ <h3 v-if="group.label" class="bu-mb-4" data-test-id="sdk-control-label">
                         </form>
                     </div>
                 </div>
-        <cly-diff-helper :diff="diff" @discard="unpatch" @save="save"></cly-diff-helper>
+    <cly-diff-helper :diff="diff" :is-modal="true" :disabled="isSaving" :emit-save-when-disabled="false" @discard="unpatch"
+        @save="save">
+            <template v-slot:main>
+                <div class="bu-mr-0 bu-is-flex bu-is-justify-content-flex-end bu-is-align-items-center cly-vue-user-selected"
+                    style="height: 100%;">
+                    <span class="selected-count-blue bu-pl-1 text-medium">
+                        <span
+                            style="background-color:#0166D6; color:white; padding:3px 7px; border-radius:4px;">{{diff.length}}</span>
+                        <span v-if="diff.length>1" class="bu-is-lowercase text-medium color-cool-gray-50 bu-pl-1">{{
+                            i18n("common.diff-helper.changes-made") }}</span>
+                        <span v-else class="bu-is-lowercase text-medium color-cool-gray-50 bu-pl-1">{{
+                            i18n("common.diff-helper.changes-made-single") }}</span>
+                        <span v-if="diff.length>1" class="text-medium color-cool-gray-50">{{ i18n("common.diff-helper.keep")
+                            }}</span>
+                        <span v-else class="text-medium color-cool-gray-50">{{ i18n("common.diff-helper.keep-single") }}</span>
+                    </span>
+                    <span class="vertical-divider bu-mr-4 bu-ml-4"></span>
+                    <el-button skin="red" class="bu-mr-2" size="small" type="default" @click="save()">
+                        <i class="cly-io-16 cly-io cly-io-save-disc" style="font-size: larger;"></i>
+                        <span class="bu-ml-1">
+                            {{ i18n('dashboards.save-changes') }}
+                        </span>
+                    </el-button>
+                    <el-button class="x-button" @click="unpatch()">
+                        <i class="cly-io-16 cly-io cly-io-x color-cool-gray-50"></i>
+                    </el-button>
+                </div>
+            </template>
+    </cly-diff-helper>
     </cly-main>
 </div>