Add configuration to create and use global block on a namespace

client/web/admin/package.json

@@ -45,7 +45,6 @@
     "vue-echarts": "^6.2.3",
     "vue-native-websocket": "^2.0.15",
     "vue-router": "3.1.5",
-    "vue2-brace-editor": "^2.0.2",
     "vue2-dropzone": "^3.6.0",
     "vuedraggable": "^2.23.2",
     "vuex": "3.1.2"

client/web/admin/src/components/Apigw/Profiler/CProfilerHitInfo.vue

@@ -214,42 +214,31 @@
     <b-card
       header-class="border-bottom"
       body-class="p-0"
-      class="shadow-sm mt-3"
+      class="shadow-sm mt-3 overflow-hidden"
     >
       <template #header>
         <h4 class="m-0">
           {{ $t('body.label') }}
         </h4>
       </template>
 
-      <ace-editor
-        :font-size="14"
-        width="100%"
-        mode="json"
-        theme="chrome"
-        show-print-margin
-        read-only
-        show-gutter
-        highlight-active-line
+      <c-ace-editor
         :value="request.body"
-        :editor-props="{
-          $blockScrolling: false,
-        }"
-        :set-options="{
-          useWorker: false,
-        }"
-        class="border-0 rounded-0"
+        :border="false"
+        lang="json"
+        height="400px"
+        show-line-numbers
+        read-only
       />
     </b-card>
   </div>
 </template>
 
 <script>
+import { components } from '@cortezaproject/corteza-vue'
 import { fmt, NoID } from '@cortezaproject/corteza-js'
-import { Ace as AceEditor } from 'vue2-brace-editor'
 
-import 'brace/mode/json'
-import 'brace/theme/chrome'
+const { CAceEditor } = components
 
 export default {
   name: 'CProfilerHitInfo',
@@ -260,7 +249,7 @@ export default {
   },
 
   components: {
-    AceEditor,
+    CAceEditor,
   },
 
   props: {

client/web/admin/src/components/Authclient/CAuthclientEditorInfo.vue

@@ -63,41 +63,38 @@
             :label="$t('redirectURI')"
             label-class="text-primary"
           >
-            <b-button
-              data-test-id="button-add-redirect-uris"
-              variant="light"
-              class="align-top"
-              @click="redirectURI.push('')"
+            <c-form-table-wrapper
+              :labels="{ addButton: $t('general:label.add') }"
+              test-id="button-add-redirect-uris"
+              add-button-class="mt-2"
+              @add-item="redirectURI.push('')"
             >
-              + {{ $t('add') }}
-            </b-button>
-
-            <div
-              v-if="redirectURI.length"
-            >
-              <b-input-group
-                v-for="(value, index) in redirectURI"
-                :key="index"
-                class="mt-2"
+              <div
+                v-if="redirectURI.length"
               >
-                <b-form-input
-                  v-model="redirectURI[index]"
-                  data-test-id="input-uri"
-                  :placeholder="$t('uri')"
-                />
-
-                <b-button
-                  data-test-id="button-remove-uri"
-                  class="ml-1 text-danger"
-                  variant="link"
-                  @click="redirectURI.splice(index, 1)"
+                <b-input-group
+                  v-for="(value, index) in redirectURI"
+                  :key="index"
+                  class="mt-2"
                 >
-                  <font-awesome-icon
-                    :icon="['fas', 'times']"
+                  <b-form-input
+                    v-model="redirectURI[index]"
+                    data-test-id="input-uri"
+                    :placeholder="$t('uri')"
                   />
-                </b-button>
-              </b-input-group>
-            </div>
+                  <b-button
+                    data-test-id="button-remove-uri"
+                    class="ml-1 text-danger"
+                    variant="link"
+                    @click="redirectURI.splice(index, 1)"
+                  >
+                    <font-awesome-icon
+                      :icon="['fas', 'times']"
+                    />
+                  </b-button>
+                </b-input-group>
+              </div>
+            </c-form-table-wrapper>
           </b-form-group>
         </b-col>
 

client/web/admin/src/components/Settings/System/CSystemEditorAuthBgScreen.vue

@@ -48,23 +48,15 @@
           :label="$t('image.editor.label')"
           label-class="d-flex align-items-center text-primary"
         >
-          <ace-editor
+          <c-ace-editor
+            v-model="settings['auth.ui.styles']"
             data-test-id="auth-bg-image-styling-editor"
-            :font-size="14"
-            :show-print-margin="true"
-            :show-gutter="true"
-            :highlight-active-line="true"
-            mode="css"
-            theme="chrome"
-            height="h-100"
             name="editor/css"
-            :on-change="v => (settings['auth.ui.styles'] = v)"
-            :value="settings['auth.ui.styles']"
-            :editor-props="{
-              $blockScrolling: false
-            }"
+            lang="css"
+            height="300px"
+            font-size="14px"
+            show-line-numbers
             class="flex-fill w-100"
-            style="min-height: 300px;"
           />
         </b-form-group>
       </b-col>
@@ -84,12 +76,11 @@
 </template>
 
 <script>
-import 'brace/mode/css'
-import 'brace/theme/chrome'
-
-import { Ace as AceEditor } from 'vue2-brace-editor'
+import { components } from '@cortezaproject/corteza-vue'
 import CUploaderWithPreview from 'corteza-webapp-admin/src/components/CUploaderWithPreview'
 
+const { CAceEditor } = components
+
 export default {
   name: 'CSystemEditorAuthBgImage',
 
@@ -100,7 +91,7 @@ export default {
 
   components: {
     CUploaderWithPreview,
-    AceEditor,
+    CAceEditor,
   },
 
   props: {