Adds the CRUD Container component
What does this MR do and why?
Adds the CRUD (Create, Read, Update, Delete) Container component
This new component will replace all GlCard
"gl-new-card" instances in the product with a proper component. This will allow to include toggle functionality and detach the misuse of the GlCard
component.
MR acceptance checklist
Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Usage
HAML: http://gdk.test:3000/rails/lookbook/inspect/layouts/crud/default
= render ::Layouts::CrudComponent.new(<TITLE>,
description: <DESCRIPTION>,
icon: <ICON>,
count: <COUNT>,
toggle_text: <TOGGLE_TEXT>) do |c|
- c.with_actions do
<ACTIONS>
- c.with_body do
<BODY>
- c.with_form do
<FORM>
- c.with_footer do
<FOOTER>
- c.with_pagination do
<PAGINATION>
Vue: http://localhost:9002/?path=/story/vue-shared-crud--default
<script>
import CrudComponent from '~/vue_shared/components/crud_component.vue';
</script>
<template>
<crud-component
title="title"
description="description"
:count="99"
icon="rocket"
toggleText="Form action toggle"
>
<template #actions>
<!-- Actions slot -->
</template>
<!-- Body slot -->
<template #form>
<!-- Form slot -->
</template>
<template #footer>
<!-- Footer slot -->
</template>
<template #pagination>
<!-- Pagination slot -->
</template>
</crud-component>
</template>
How to set up and validate locally
- Migrates Webhooks as example -> http://gdk.test:3000/flightjs/Flight/-/hooks
Related to #457239
Edited by Sascha Eggenberger