Skip to content

Adds the CRUD Container component

Sascha Eggenberger requested to merge crud-container-component into master

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

  1. Migrates Webhooks as example -> http://gdk.test:3000/flightjs/Flight/-/hooks

Related to #457239

Edited by Sascha Eggenberger

Merge request reports