Merge pull request #14153 from ncounter/card-component-v2

Refactoring card component
openSUSE · Apr 17, 2023 · 54f1fda · 54f1fda
2 parents 4d8a209 + 30db699
commit 54f1fda
Show file tree

Hide file tree

Showing 12 changed files with 135 additions and 112 deletions.
diff --git a/src/api/app/assets/stylesheets/webui/groups.scss b/src/api/app/assets/stylesheets/webui/groups.scss
@@ -1,14 +1,21 @@
 #group-users {
-  .group-user {
-    width: 19.7rem;
+  .card {
+    width: 100%;
+
+    .card-title {
+      @extend .text-break;
+    }
+
+    @include media-breakpoint-up(lg) {
+      width: 48%;
+    }
 
     @include media-breakpoint-up(xl) {
-      width: 21.7rem;
+      width: 32%;
     }
 
     @include media-breakpoint-up(xxl) {
-      width: 22.4rem;
+      width: 23%;
     }
   }
 }
-
diff --git a/src/api/app/assets/stylesheets/webui/repositories.scss b/src/api/app/assets/stylesheets/webui/repositories.scss
@@ -10,3 +10,21 @@ details[open].repository-path {
   .less{ display: inline; }
   .more{ display: none; }
 }
+
+#repositories {
+  .card {
+    width: 100%;
+
+    .card-title {
+      @extend .text-break;
+    }
+
+    @include media-breakpoint-up(lg) {
+      width: 48%;
+    }
+
+    @include media-breakpoint-up(xxl) {
+      width: 32%;
+    }
+  }
+}
diff --git a/src/api/app/assets/stylesheets/webui/tokens.scss b/src/api/app/assets/stylesheets/webui/tokens.scss
@@ -1,17 +1,21 @@
 #tokens {
   .card {
-    max-width: 19.7rem;
+    width: 100%;
 
     .card-title {
       @extend .text-break;
     }
 
+    @include media-breakpoint-up(lg) {
+      width: 48%;
+    }
+
     @include media-breakpoint-up(xl) {
-      max-width: 21.7rem;
+      width: 32%;
     }
 
     @include media-breakpoint-up(xxl) {
-      max-width: 22.4rem;
+      width: 23%;
     }
   }
 }
diff --git a/src/api/app/components/card_component.html.haml b/src/api/app/components/card_component.html.haml
@@ -5,10 +5,12 @@
     - if delete_button?
       .ms-4
         = delete_button
-  .card-body{ class: @extra_classes_for_body }
+  .card-body
     = content
+
+  .card-footer.bg-transparent.border-0
     - if actions?
-      %ul.nav.justify-content-end.mt-auto
+      .nav.justify-content-end
         - actions.each do |action|
-          %li.nav-item
+          .nav-item
             = action
diff --git a/src/api/app/components/card_component.rb b/src/api/app/components/card_component.rb
@@ -5,10 +5,4 @@ class CardComponent < ApplicationComponent
   renders_one :header
   renders_one :delete_button
   renders_many :actions
-
-  def initialize(extra_classes_for_body: [])
-    super
-
-    @extra_classes_for_body = extra_classes_for_body
-  end
 end
diff --git a/src/api/app/components/token_card_component.html.haml b/src/api/app/components/token_card_component.html.haml
@@ -1,4 +1,4 @@
-= render(CardComponent.new(extra_classes_for_body: ['d-flex', 'flex-column'])) do |component|
+= render(CardComponent.new) do |component|
   %p.card-text
     Id: #{@token.id}
   %p.card-text

diff --git a/src/api/app/views/webui/groups/_group_members.html.haml b/src/api/app/views/webui/groups/_group_members.html.haml
@@ -5,37 +5,35 @@
   %p
     This group does not have members.
 - else
-  #group-users
-    .d-flex.flex-wrap.gap-4
-      - group.users.each do |user|
-        .group-user
-          = render(CardComponent.new) do |component|
-            .row.g-0
-              .col-md-3
-                = image_tag_for(user, size: 80, custom_class: 'align-self-center')
-              .col-md-9
-                .card-body.py-1
-                  .form-check.mt-2
-                    = check_box_tag("maintainer_#{user.login}", true, group.maintainer?(user), class: 'form-check-input group-maintainership',
-                      name: :maintainer, disabled: !write_access, data: { method: :patch,
-                      url: group_user_path(group_title: group.title, user_login: user.login), remote: true })
-                    %label.form-check-label{ for: "maintainer_#{user.login}" }
-                      Maintainer
-                    %i.fas.fa-spinner.fa-spin.d-none
+  .d-flex.flex-wrap.gap-4.align-self-stretch#group-users
+    - group.users.each do |user|
+      = render(CardComponent.new) do |component|
+        .row.g-0
+          .col-md-3
+            = image_tag_for(user, size: 80, custom_class: 'align-self-center')
+          .col-md-9
+            .card-body.py-1
+              .form-check.mt-2
+                = check_box_tag("maintainer_#{user.login}", true, group.maintainer?(user), class: 'form-check-input group-maintainership',
+                  name: :maintainer, disabled: !write_access, data: { method: :patch,
+                  url: group_user_path(group_title: group.title, user_login: user.login), remote: true })
+                %label.form-check-label{ for: "maintainer_#{user.login}" }
+                  Maintainer
+                %i.fas.fa-spinner.fa-spin.d-none
 
-            - component.with_header do
-              = link_to(user_path(user)) do
-                = display_name(user)
+        - component.with_header do
+          = link_to(user_path(user)) do
+            = display_name(user)
 
-            - component.with_delete_button do
-              - if policy(GroupsUser.new(group: group, user: user)).destroy?
-                = link_to('#',
-                          title: 'Remove member from group',
-                          data: { 'bs-toggle': 'modal',
-                                  'bs-target': '#delete-group-members-modal',
-                                  confirmation_text: "Please confirm deletion of '#{user}' from this group",
-                                  action: group_user_path(group_title: group.title, user_login: user.login) }) do
-                  %i.fas.fa-sm.fa-times-circle.text-danger
+        - component.with_delete_button do
+          - if policy(GroupsUser.new(group: group, user: user)).destroy?
+            = link_to('#',
+                      title: 'Remove member from group',
+                      data: { 'bs-toggle': 'modal',
+                              'bs-target': '#delete-group-members-modal',
+                              confirmation_text: "Please confirm deletion of '#{user}' from this group",
+                              action: group_user_path(group_title: group.title, user_login: user.login) }) do
+              %i.fas.fa-sm.fa-times-circle.text-danger
 
 - if write_access || display_group_email
   .pt-4
@@ -64,5 +62,5 @@
       $(this).siblings('i.fa-spinner').toggleClass('d-none');
     });
     $('#group-users').on('ajax:success', '.group-member-removal', function() {
-      $(this).parents('.group-user').remove();
+      $(this).parents('.card').remove();
     });
diff --git a/src/api/app/views/webui/repositories/_project_repositories.html.haml b/src/api/app/views/webui/repositories/_project_repositories.html.haml
@@ -3,7 +3,7 @@
   .card-body
     %h3.pb-2= pagetitle
 
-    .d-flex.flex-wrap.gap-4
+    .d-flex.flex-wrap.gap-4.align-self-stretch#repositories
       - repositories.each do |repository|
         = render partial: 'repository_entry', locals: { repository: repository, project: project, download_url: configuration['download_url'],
                     user_can_modify: user_can_modify, available_architectures: available_architectures }

diff --git a/src/api/app/views/webui/repositories/_repository_entry.html.haml b/src/api/app/views/webui/repositories/_repository_entry.html.haml
@@ -1,54 +1,54 @@
-.col-11.col-md-5.col-lg-3.flex-fill.repository-card
-  = render(CardComponent.new) do |component|
-    - if repository.is_dod_repository?
-      = render partial: 'dod_repository_card_content', locals: { project: project, repository: repository,
-                  available_architectures: available_architectures }
-      - component.with_delete_button do
-        - if user_can_modify
-          = link_to('#', title: 'Delete Repository', data: { 'bs-toggle': 'modal', 'bs-target': '#delete-repository',
-            action: destroy_repository_path(project: project, target: repository.name), repository: repository.name }) do
-            %i.fas.fa-times-circle.text-danger
-        - elsif User.session
-          .col
-            = link_to('#', title: 'Request Delete Repository', data: { 'bs-toggle': 'modal', 'bs-target': '#request-delete-repository',
-              action: project_remove_target_request_path(project: project, target: repository), repository: repository.name }) do
-              %i.fas.fa-user-times.text-danger
+
+= render(CardComponent.new) do |component|
+  - if repository.is_dod_repository?
+    = render partial: 'dod_repository_card_content', locals: { project: project, repository: repository,
+                available_architectures: available_architectures }
+    - component.with_delete_button do
       - if user_can_modify
-        - component.with_action do
-          = link_to('#', title: 'Add Download on Demand Source', class: 'nav-link p-1', data: { 'bs-toggle': 'modal',
-                                                                        'bs-target': "#add-dod-source-modal-#{repository.id}" }) do
-            %i.fas.fa-plus-circle.text-primary
-    - else
-      = render partial: 'repository_card_content', locals: { project: project, repository: repository,
-                  download_url: download_url, user_can_modify: user_can_modify,
-                  available_architectures: available_architectures }
-      - component.with_delete_button do
-        - if user_can_modify
-          = link_to('#', title: 'Delete Repository', data: { 'bs-toggle': 'modal', 'bs-target': '#delete-repository',
-            action: destroy_repository_path(project: project, target: repository.name), repository: repository.name }) do
-            %i.fas.fa-times-circle.text-danger
-        - elsif User.session
+        = link_to('#', title: 'Delete Repository', data: { 'bs-toggle': 'modal', 'bs-target': '#delete-repository',
+          action: destroy_repository_path(project: project, target: repository.name), repository: repository.name }) do
+          %i.fas.fa-times-circle.text-danger
+      - elsif User.session
+        .col
           = link_to('#', title: 'Request Delete Repository', data: { 'bs-toggle': 'modal', 'bs-target': '#request-delete-repository',
-            action: project_remove_target_request_path(project: project, repository: repository.name), repository: repository.name }) do
+            action: project_remove_target_request_path(project: project, target: repository), repository: repository.name }) do
             %i.fas.fa-user-times.text-danger
+    - if user_can_modify
+      - component.with_action do
+        = link_to('#', title: 'Add Download on Demand Source', class: 'nav-link p-1', data: { 'bs-toggle': 'modal',
+                                                                      'bs-target': "#add-dod-source-modal-#{repository.id}" }) do
+          %i.fas.fa-plus-circle.text-primary
+  - else
+    = render partial: 'repository_card_content', locals: { project: project, repository: repository,
+                download_url: download_url, user_can_modify: user_can_modify,
+                available_architectures: available_architectures }
+    - component.with_delete_button do
       - if user_can_modify
-        - component.with_action do
-          = link_to('#', title: 'Edit Repository', class: 'nav-link p-1',
-                        data: { 'bs-toggle': 'modal', 'bs-target': "#edit-repository-#{repository.id}" }) do
-            %i.fas.fa-edit.text-secondary
-        - component.with_action do
-          = link_to('#', title: 'Add Repository Path', class: 'nav-link p-1',
-                        data: { 'bs-toggle': 'modal', 'bs-target': "#add-repository-path-#{repository.id}" }) do
-            %i.fas.fa-plus-circle.text-primary
+        = link_to('#', title: 'Delete Repository', data: { 'bs-toggle': 'modal', 'bs-target': '#delete-repository',
+          action: destroy_repository_path(project: project, target: repository.name), repository: repository.name }) do
+          %i.fas.fa-times-circle.text-danger
+      - elsif User.session
+        = link_to('#', title: 'Request Delete Repository', data: { 'bs-toggle': 'modal', 'bs-target': '#request-delete-repository',
+          action: project_remove_target_request_path(project: project, repository: repository.name), repository: repository.name }) do
+          %i.fas.fa-user-times.text-danger
+    - if user_can_modify
       - component.with_action do
-        - url = "#{download_url}/#{project.to_s.gsub(/:/, ':/')}/#{repository}"
-        = link_to(url, title: 'Download Repository', class: 'nav-link p-1') do
-          %i.fas.fa-download.text-secondary
+        = link_to('#', title: 'Edit Repository', class: 'nav-link p-1',
+                      data: { 'bs-toggle': 'modal', 'bs-target': "#edit-repository-#{repository.id}" }) do
+          %i.fas.fa-edit.text-secondary
+      - component.with_action do
+        = link_to('#', title: 'Add Repository Path', class: 'nav-link p-1',
+                      data: { 'bs-toggle': 'modal', 'bs-target': "#add-repository-path-#{repository.id}" }) do
+          %i.fas.fa-plus-circle.text-primary
+    - component.with_action do
+      - url = "#{download_url}/#{project.to_s.gsub(/:/, ':/')}/#{repository}"
+      = link_to(url, title: 'Download Repository', class: 'nav-link p-1') do
+        %i.fas.fa-download.text-secondary
 
-    - component.with_header do
-      = link_to(repository, project_repository_state_path(project: project, repository: repository.name), class: 'fw-bold')
-      - if repository.architectures.empty?
-        %i No architecture selected
-      - else
-        - repository.architectures.pluck(:name).each do |architecture|
-          %span.badge.bg-primary= architecture
+  - component.with_header do
+    = link_to(repository, project_repository_state_path(project: project, repository: repository.name), class: 'fw-bold')
+    - if repository.architectures.empty?
+      %i No architecture selected
+    - else
+      - repository.architectures.pluck(:name).each do |architecture|
+        %span.badge.bg-primary= architecture
diff --git a/src/api/app/views/webui/users/tokens/index.html.haml b/src/api/app/views/webui/users/tokens/index.html.haml
@@ -5,7 +5,7 @@
     %h3= @pagetitle
     .text-center.mb-2= page_entries_info(@tokens)
     - if @tokens.count.positive?
-      .d-flex.flex-wrap.gap-4#tokens
+      .d-flex.flex-wrap.gap-4.align-self-stretch#tokens
         = render TokenCardComponent.with_collection(@tokens)
     .pt-4
       = link_to new_token_path do

diff --git a/src/api/spec/features/webui/groups_spec.rb b/src/api/spec/features/webui/groups_spec.rb
@@ -57,7 +57,7 @@ def group_in_datatable(page, group)
   it 'remove a member from a group' do
     visit group_path(group_1)
 
-    within(find('div.group-user', text: admin.login)) do
+    within(find('#group-users > .card', text: admin.login)) do
       click_link('Remove member from group')
     end
 
@@ -69,7 +69,7 @@ def group_in_datatable(page, group)
   it 'give maintainer rights to a group member' do
     visit group_path(group_1)
 
-    within(find('div.group-user', text: admin.login)) do
+    within(find('#group-users > .card', text: admin.login)) do
       check('Maintainer')
     end