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 🤖