Skip to content
Snippets Groups Projects

Migrate terraform states GlCard to CrudComponent

Merged Annabel Dunstone Gray requested to merge terraform-states into master
All threads resolved!

What does this MR do and why?

  • Migrate terraform states GlCard to CrudComponent
  • Add page title
  • Removes some classes that seemed unnecessary (although I'm not 100% sure)

Screenshots or screen recordings

Before After
Screenshot_2024-08-01_at_1.50.16_PM Screenshot_2024-08-01_at_1.45.33_PM

How to set up and validate locally

Project > Operate > Terraform states

Links

Merge request reports

Loading
Loading

Activity

Filter activity
  • Approvals
  • Assignees & reviewers
  • Comments (from bots)
  • Comments (from users)
  • Commits & branches
  • Edits
  • Labels
  • Lock status
  • Mentions
  • Merge request status
  • Tracking
  • A deleted user added backend label

    added backend label

  • Reviewer roulette

    Category Reviewer Maintainer
    backend @atiwari71 profile link current availability (UTC+5.5, 5.5 hours ahead of author) @radbatnag profile link current availability (UTC+8, 8 hours ahead of author)
    frontend @mcavoj profile link current availability (UTC+2, 2 hours ahead of author) @justin_ho profile link current availability (UTC+7, 7 hours ahead of author)

    Please refer to documentation page for guidance on how you can benefit from the Reviewer Roulette, or use the GitLab Review Workload Dashboard to find other available reviewers.

    If needed, you can retry the :repeat: danger-review job that generated this comment.

    Generated by :no_entry_sign: Danger

  • added 1 commit

    • c1cfe070 - Migrate terraform states GlCard to CrudComponent

    Compare with previous version

  • @jmiocene Can you please review UX here? :smile:

  • requested review from @jmiocene

  • requested review from @tigerwnz

  • Tiger Watson requested review from @anna_vovchenko and removed review request for @tigerwnz

    requested review from @anna_vovchenko and removed review request for @tigerwnz

  • Sascha Eggenberger requested changes

    requested changes

  • added 1 commit

    • 37fd3064 - Migrate terraform states GlCard to CrudComponent

    Compare with previous version

  • Annabel Dunstone Gray requested review from @seggenberger and removed review request for @jmiocene

    requested review from @seggenberger and removed review request for @jmiocene

  • Sascha Eggenberger approved this merge request

    approved this merge request

  • added pipelinetier-2 label and removed pipelinetier-1 label

  • Before you set this MR to auto-merge

    This merge request will progress on pipeline tiers until it reaches the last tier: pipelinetier-3. We will trigger a new pipeline for each transition to a higher tier.

    Before you set this MR to auto-merge, please check the following:

    • You are the last maintainer of this merge request
    • The latest pipeline for this merge request is pipelinetier-3 (You can find which tier it is in the pipeline name)
    • This pipeline is recent enough (created in the last 8 hours)

    If all the criteria above apply, please set auto-merge for this merge request.

    See pipeline tiers and merging a merge request for more details.

  • Sascha Eggenberger removed review request for @seggenberger

    removed review request for @seggenberger

  • E2E Test Result Summary

    allure-report-publisher generated test report!

    e2e-test-on-gdk: :white_check_mark: test report for 09f23a94

    expand test summary
    +------------------------------------------------------------------+
    |                          suites summary                          |
    +-------------+--------+--------+---------+-------+-------+--------+
    |             | passed | failed | skipped | flaky | total | result |
    +-------------+--------+--------+---------+-------+-------+--------+
    | Plan        | 70     | 0      | 0       | 0     | 70    | ✅     |
    | Create      | 127    | 0      | 12      | 0     | 139   | ✅     |
    | Release     | 5      | 0      | 0       | 0     | 5     | ✅     |
    | Data Stores | 30     | 0      | 1       | 0     | 31    | ✅     |
    | Govern      | 71     | 0      | 0       | 0     | 71    | ✅     |
    | Analytics   | 2      | 0      | 0       | 0     | 2     | ✅     |
    | Verify      | 43     | 0      | 2       | 0     | 45    | ✅     |
    | Package     | 16     | 0      | 15      | 0     | 31    | ✅     |
    | Monitor     | 8      | 0      | 0       | 0     | 8     | ✅     |
    | Secure      | 2      | 0      | 0       | 0     | 2     | ✅     |
    | Fulfillment | 1      | 0      | 0       | 0     | 1     | ✅     |
    | Manage      | 0      | 0      | 1       | 0     | 1     | ➖     |
    +-------------+--------+--------+---------+-------+-------+--------+
    | Total       | 375    | 0      | 31      | 0     | 406   | ✅     |
    +-------------+--------+--------+---------+-------+-------+--------+
    • Resolved by Annabel Dunstone Gray

      Nice work, @annabeldunstone! I found one small UI issue though:

      As we removed all the gl-flex classes from the table, the loading icons and badges look funny:

      Current Expected
      Screenshot_2024-08-02_at_16.40.26 Screenshot_2024-08-02_at_16.37.58
      Screenshot_2024-08-02_at_16.40.06 Screenshot_2024-08-02_at_16.37.41
      Screenshot_2024-08-02_at_16.39.49 Screenshot_2024-08-02_at_16.37.24
      Screenshot_2024-08-02_at_16.39.07 Screenshot_2024-08-02_at_16.37.00

      Also, the pipeline column looks misaligned on the mobiles:

      Current Expected
      Screenshot_2024-08-02_at_17.16.05 Screenshot_2024-08-02_at_17.15.07
      Screenshot_2024-08-02_at_17.18.27 Screenshot_2024-08-02_at_17.16.33

      You can see the additional loading icons and badges when clicking on actions menu -> lock state or delete state.

      This change fixes the issues for me:

      diff --git a/app/assets/javascripts/terraform/components/states_table.vue b/app/assets/javascripts/terraform/components/states_table.vue
      index 9bd646918244..de95e4c0de06 100644
      --- a/app/assets/javascripts/terraform/components/states_table.vue
      +++ b/app/assets/javascripts/terraform/components/states_table.vue
      @@ -137,29 +137,27 @@ export default {
           stacked="md"
         >
           <template #cell(name)="{ item }">
      -      <div data-testid="terraform-states-table-name">
      +      <div
      +        data-testid="terraform-states-table-name"
      +        class="gl-flex gl-align-center gl-justify-end md:gl-justify-start gl-gap-3"
      +      >
               <p class="gl-m-0 gl-text-gray-900">
                 {{ item.name }}
               </p>
       
      -        <div v-if="item.loadingLock" class="gl-mx-3">
      -          <p>
      -            <gl-loading-icon size="sm" class="gl-pr-1" />
      -            {{ loadingLockText(item) }}
      -          </p>
      +        <div v-if="item.loadingLock">
      +          <gl-loading-icon size="sm" class="gl-pr-1 gl-inline" />
      +          {{ loadingLockText(item) }}
               </div>
       
      -        <div v-else-if="item.loadingRemove" class="gl-mx-3">
      -          <p>
      -            <gl-loading-icon size="sm" class="gl-pr-1" />
      -            {{ $options.i18n.removing }}
      -          </p>
      +        <div v-else-if="item.loadingRemove">
      +          <gl-loading-icon size="sm" class="gl-pr-1 gl-inline" />
      +          {{ $options.i18n.removing }}
               </div>
       
               <div
                 v-else-if="item.deletedAt"
                 v-gl-tooltip.right
      -          class="gl-mx-3"
                 :title="$options.i18n.deletionInProgress"
                 :data-testid="`state-badge-${item.name}`"
               >
      @@ -171,7 +169,6 @@ export default {
               <div
                 v-else-if="item.lockedAt"
                 v-gl-tooltip.right
      -          class="gl-mx-3"
                 :title="lockedByUserText(item)"
                 :data-testid="`state-badge-${item.name}`"
               >
      @@ -183,7 +180,10 @@ export default {
           </template>
       
           <template #cell(pipeline)="{ item }">
      -      <div data-testid="terraform-states-table-pipeline" class="gl-flex gl-gap-3 gl-items-center">
      +      <div
      +        data-testid="terraform-states-table-pipeline"
      +        class="gl-flex gl-gap-3 gl-items-center gl-justify-end md:gl-justify-start"
      +      >
               <gl-link v-if="pipelineID(item)" :href="pipelinePath(item)">
                 #{{ pipelineID(item) }}
               </gl-link>
  • mentioned in issue #476988

  • added 191 commits

    Compare with previous version

  • added 181 commits

    Compare with previous version

  • added 1 commit

    • 09f23a94 - Migrate terraform states GlCard to CrudComponent

    Compare with previous version

  • Annabel Dunstone Gray resolved all threads

    resolved all threads

  • Anna Vovchenko approved this merge request

    approved this merge request

  • Thanks for the great work here, @annabeldunstone! Let's get it merged :slight_smile:

  • added pipelinetier-3 label and removed pipelinetier-2 label

  • Anna Vovchenko enabled automatic add to merge train when checks pass

    enabled automatic add to merge train when checks pass

  • Anna Vovchenko started a merge train

    started a merge train

  • Anna Vovchenko mentioned in commit 9cfa7fa2

    mentioned in commit 9cfa7fa2

  • added workflowstaging label and removed workflowcanary label

  • Please register or sign in to reply
    Loading