Commit 211307cd authored by Emily Ring's avatar Emily Ring Committed by Miguel Rincon

Add user info to Terraform State List

Adds lockedBy info for the state list
Adds updatedBy info for the state list
parent 010dd247
<script>
import { GlBadge, GlIcon, GlSprintf, GlTable } from '@gitlab/ui';
import { GlBadge, GlIcon, GlSprintf, GlTable, GlTooltip } from '@gitlab/ui';
import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
import timeagoMixin from '~/vue_shared/mixins/timeago';
export default {
components: {
......@@ -8,8 +9,10 @@ export default {
GlIcon,
GlSprintf,
GlTable,
GlTooltip,
TimeAgoTooltip,
},
mixins: [timeagoMixin],
props: {
states: {
required: true,
......@@ -37,24 +40,53 @@ export default {
<template>
<gl-table :items="states" :fields="fields" data-testid="terraform-states-table">
<template #cell(name)="{ item }">
<p
class="gl-font-weight-bold gl-m-0 gl-text-gray-900"
data-testid="terraform-states-table-name"
>
<div class="gl-display-flex align-items-center" data-testid="terraform-states-table-name">
<p class="gl-font-weight-bold gl-m-0 gl-text-gray-900">
{{ item.name }}
</p>
<gl-badge v-if="item.lockedAt">
<div v-if="item.lockedAt" id="terraformLockedBadgeContainer" class="gl-mx-2">
<gl-badge id="terraformLockedBadge">
<gl-icon name="lock" />
{{ s__('Terraform|Locked') }}
</gl-badge>
</p>
<gl-tooltip
container="terraformLockedBadgeContainer"
placement="right"
target="terraformLockedBadge"
>
<gl-sprintf :message="s__('Terraform|Locked by %{user} %{timeAgo}')">
<template #user>
{{ item.lockedByUser.name }}
</template>
<template #timeAgo>
{{ timeFormatted(item.lockedAt) }}
</template>
</gl-sprintf>
</gl-tooltip>
</div>
</div>
</template>
<template #cell(updated)="{ item }">
<p class="gl-m-0" data-testid="terraform-states-table-updated">
<gl-sprintf :message="s__('Terraform|updated %{timeStart}time%{timeEnd}')">
<template #time>
<gl-sprintf :message="s__('Terraform|%{user} updated %{timeAgo}')">
<template #user>
<span v-if="item.latestVersion">
{{ item.latestVersion.createdByUser.name }}
</span>
</template>
<template #timeAgo>
<span v-if="item.latestVersion">
<time-ago-tooltip :time="item.latestVersion.updatedAt" />
</span>
<span v-else>
<time-ago-tooltip :time="item.updatedAt" />
</span>
</template>
</gl-sprintf>
</p>
......
#import "~/graphql_shared/fragments/user.fragment.graphql"
#import "./state_version.fragment.graphql"
fragment State on TerraformState {
id
name
lockedAt
updatedAt
lockedByUser {
...User
}
latestVersion {
...StateVersion
}
}
#import "~/graphql_shared/fragments/user.fragment.graphql"
fragment StateVersion on TerraformStateVersion {
updatedAt
createdByUser {
...User
}
}
---
title: Add user info to Terraform State List
merge_request: 46984
author:
type: changed
......@@ -26445,6 +26445,9 @@ msgid_plural "Terraform|%{number} Terraform reports were generated in your pipel
msgstr[0] ""
msgstr[1] ""
msgid "Terraform|%{user} updated %{timeAgo}"
msgstr ""
msgid "Terraform|A Terraform report failed to generate."
msgstr ""
......@@ -26466,6 +26469,9 @@ msgstr ""
msgid "Terraform|Locked"
msgstr ""
msgid "Terraform|Locked by %{user} %{timeAgo}"
msgstr ""
msgid "Terraform|Reported Resource Changes: %{addNum} to add, %{changeNum} to change, %{deleteNum} to delete"
msgstr ""
......@@ -26478,9 +26484,6 @@ msgstr ""
msgid "Terraform|The Terraform report %{name} was generated in your pipelines."
msgstr ""
msgid "Terraform|updated %{timeStart}time%{timeEnd}"
msgstr ""
msgid "Test"
msgstr ""
......
import { GlIcon } from '@gitlab/ui';
import { GlIcon, GlTooltip } from '@gitlab/ui';
import { mount } from '@vue/test-utils';
import { useFakeDate } from 'helpers/fake_date';
import StatesTable from '~/terraform/components/states_table.vue';
......@@ -12,12 +12,32 @@ describe('StatesTable', () => {
{
name: 'state-1',
lockedAt: '2020-10-13T00:00:00Z',
lockedByUser: {
name: 'user-1',
},
updatedAt: '2020-10-13T00:00:00Z',
latestVersion: null,
},
{
name: 'state-2',
lockedAt: null,
lockedByUser: null,
updatedAt: '2020-10-10T00:00:00Z',
latestVersion: null,
},
{
name: 'state-3',
lockedAt: '2020-10-10T00:00:00Z',
lockedByUser: {
name: 'user-2',
},
updatedAt: '2020-10-10T00:00:00Z',
latestVersion: {
updatedAt: '2020-10-11T00:00:00Z',
createdByUser: {
name: 'user-3',
},
},
},
],
};
......@@ -33,18 +53,25 @@ describe('StatesTable', () => {
});
it.each`
stateName | locked | lineNumber
${'state-1'} | ${true} | ${0}
${'state-2'} | ${false} | ${1}
name | toolTipText | locked | lineNumber
${'state-1'} | ${'Locked by user-1 2 days ago'} | ${true} | ${0}
${'state-2'} | ${null} | ${false} | ${1}
${'state-3'} | ${'Locked by user-2 5 days ago'} | ${true} | ${2}
`(
'displays the name "$stateName" for line "$lineNumber"',
({ stateName, locked, lineNumber }) => {
'displays the name and locked information "$name" for line "$lineNumber"',
({ name, toolTipText, locked, lineNumber }) => {
const states = wrapper.findAll('[data-testid="terraform-states-table-name"]');
const state = states.at(lineNumber);
const toolTip = state.find(GlTooltip);
expect(state.text()).toContain(stateName);
expect(state.text()).toContain(name);
expect(state.find(GlIcon).exists()).toBe(locked);
expect(toolTip.exists()).toBe(locked);
if (locked) {
expect(toolTip.text()).toMatchInterpolatedText(toolTipText);
}
},
);
......@@ -52,11 +79,12 @@ describe('StatesTable', () => {
updateTime | lineNumber
${'updated 2 days ago'} | ${0}
${'updated 5 days ago'} | ${1}
${'user-3 updated 4 days ago'} | ${2}
`('displays the time "$updateTime" for line "$lineNumber"', ({ updateTime, lineNumber }) => {
const states = wrapper.findAll('[data-testid="terraform-states-table-updated"]');
const state = states.at(lineNumber);
expect(state.text()).toBe(updateTime);
expect(state.text()).toMatchInterpolatedText(updateTime);
});
});
......@@ -55,12 +55,16 @@ describe('TerraformList', () => {
name: 'state-1',
lockedAt: null,
updatedAt: null,
lockedByUser: null,
latestVersion: null,
},
{
id: 'gid://gitlab/Terraform::State/2',
name: 'state-2',
lockedAt: null,
updatedAt: null,
lockedByUser: null,
latestVersion: null,
},
];
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment