Convert feature flag list to table

app/views/projects/feature_flags/_list.html.haml

-.card
-  .card-header
-    Feature flags
-    .badge.badge-pill
-      = @feature_flags.count
-  %ul.content-list.pages-domain-list
-    - if @feature_flags.empty?
-      %li
-        .nothing-here-block
-          = s_('FeatureFlags|No feature flags found.')
-    - else
-      - @feature_flags.each do |feature_flag|
-        %li.pages-domain-list-item.unstyled
-          = feature_flag.name
-
-          %div.controls.d-flex
-            = render 'delete_feature_flag_modal', { feature_flag: feature_flag }
-
-            = button_to edit_project_feature_flag_path(@project, feature_flag),
-              class: 'btn btn-default has-tooltip',
-              type: 'button',
-              title: _('Edit') do
-              = sprite_icon('pencil', size: 16)
-
-            %button.btn.btn-danger.has-tooltip.m-0.ml-2{ type: 'button',
-              data: { toggle: 'modal',
-                target: "#delete-feature-flag-modal-#{feature_flag.id}" },
-              title: _('Delete') }
-              = sprite_icon('remove', size: 16)
-
-          %p
-            - if feature_flag.active?
-              %span.badge.badge-success Enabled
-            - else
-              %span.badge.badge-danger Disabled
\ No newline at end of file

app/views/projects/feature_flags/_table.html.haml

+
+.table-holder.border-top
+  .gl-responsive-table-row.table-row-header{ role: 'row' }
+    .table-section.section-10{ role: 'columnheader' }= s_('FeatureFlags|Status')
+    .table-section.section-50{ role: 'columnheader' }= s_('FeatureFlags|Feature flag')
+  - if @feature_flags.empty?
+    .nothing-here-block
+      = s_('FeatureFlags|No feature flags found.')
+  - else
+    - @feature_flags.each do |feature_flag|
+      = render 'delete_feature_flag_modal', { feature_flag: feature_flag }
+
+      .gl-responsive-table-row{ role: 'row' }
+        .table-section.section-10{ role: 'gridcell' }
+          = check_box_tag 'feature_flag_status', nil, feature_flag.active?, disabled: true
+
+        .table-section.section-50.d-flex.flex-column{ role: 'gridcell' }
+          .text-monospace= feature_flag.name
+          .text-secondary= feature_flag.description
+
+        .table-section.section-40.table-button-footer{ role: 'gridcell' }
+          .table-action-buttons
+            = link_to edit_project_feature_flag_path(@project, feature_flag),
+                class: 'btn btn-default has-tooltip',
+                type: 'button',
+                title: _('Edit') do
+              = sprite_icon('pencil', size: 16)
+
+            %button.btn.btn-danger.has-tooltip.ml-2{ type: 'button',
+                data: { toggle: 'modal',
+                  target: "#delete-feature-flag-modal-#{feature_flag.id}" },
+                title: _('Delete') }
+              = sprite_icon('remove', size: 16)

app/views/projects/feature_flags/index.html.haml

@@ -11,10 +11,5 @@
       = link_to new_project_feature_flag_path(@project), class: 'btn btn-new' do
         = s_('FeatureFlags|New Feature Flag')
 
-%p.light
-  With GitLab Feature Flags
-
-%hr.clearfix
-
 = render 'configure_feature_flags_modal'
-= render 'list'
+= render 'table'