Use renderer.vue in facade.vue

Once #577524 (closed) has been implemented, we will be able to utilize it within facade.vue:

By doing so, we will be able to offload the GLQL loading and pagination logic to the renderer.

Sample template diff

diff --git a/app/assets/javascripts/glql/components/common/facade.vue b/app/assets/javascripts/glql/components/common/facade.vue
index 4bcd81456701..afa94e2a27c7 100644
--- a/app/assets/javascripts/glql/components/common/facade.vue
+++ b/app/assets/javascripts/glql/components/common/facade.vue
@@ -349,31 +349,12 @@ export default {
             />
           </template>
 
-          <data-presenter
-            ref="presenter"
-            :data="data"
-            :fields="fields"
-            :aggregate="aggregate"
-            :group-by="groupBy"
-            :display-type="config.display"
-            :loading="loading"
-            @error="onPresenterError"
+          <renderer
+            :query="query"
+            :on-loading="handleLoading"
+            :on-success="handleLoadSuccess"
+            :on-error="handleLoadError"
           />
-          <div
-            v-if="data && data.count && data.nodes.length < data.count"
-            class="glql-load-more gl-border-t gl-border-section gl-p-3"
-          >
-            <glql-pagination
-              :count="data.nodes.length"
-              :total-count="data.count"
-              :loading="loading"
-              @loadMore="loadMore"
-            />
-          </div>
-
-          <template v-if="showEmptyState" #empty>
-            {{ __('No data found for this query.') }}
-          </template>
         </crud-component>
         <glql-footnote v-if="!isCollapsed" />
       </template>
Edited by 🤖 GitLab Bot 🤖