Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
G
gitlab-ce
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
1
Merge Requests
1
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
nexedi
gitlab-ce
Commits
82fa2525
Commit
82fa2525
authored
Nov 29, 2019
by
Sarah Groff Hennigh-Palermo
Committed by
Fatih Acet
Nov 29, 2019
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Refactor environment table titles and spacing
parent
31911630
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
109 additions
and
23 deletions
+109
-23
app/assets/javascripts/environments/components/environment_item.vue
.../javascripts/environments/components/environment_item.vue
+40
-13
app/assets/javascripts/environments/components/environments_table.vue
...avascripts/environments/components/environments_table.vue
+41
-10
spec/javascripts/environments/environment_item_spec.js
spec/javascripts/environments/environment_item_spec.js
+28
-0
No files found.
app/assets/javascripts/environments/components/environment_item.vue
View file @
82fa2525
...
...
@@ -43,16 +43,21 @@ export default {
mixins
:
[
environmentItemMixin
],
props
:
{
canReadEnvironment
:
{
type
:
Boolean
,
required
:
false
,
default
:
false
,
},
model
:
{
type
:
Object
,
required
:
true
,
default
:
()
=>
({}),
},
canReadEnvironment
:
{
type
:
Boolean
,
required
:
false
,
default
:
false
,
tableData
:
{
type
:
Object
,
required
:
true
,
},
},
...
...
@@ -447,9 +452,13 @@ export default {
class="gl-responsive-table-row"
role="row"
>
<div
class=
"table-section section-wrap section-15 text-truncate"
role=
"gridcell"
>
<div
class=
"table-section section-wrap text-truncate"
:class=
"tableData.name.spacing"
role=
"gridcell"
>
<div
v-if=
"!model.isFolder"
class=
"table-mobile-header"
role=
"rowheader"
>
{{
s__
(
'
Environments|Environment
'
)
}}
{{
tableData
.
name
.
title
}}
</div>
<span
v-if=
"shouldRenderDeployBoard"
class=
"deploy-board-icon"
@
click=
"toggleDeployBoard"
>
...
...
@@ -489,7 +498,8 @@ export default {
</div>
<div
class=
"table-section section-10 deployment-column d-none d-sm-none d-md-block"
class=
"table-section deployment-column d-none d-sm-none d-md-block"
:class=
"tableData.deploy.spacing"
role=
"gridcell"
>
<span
v-if=
"shouldRenderDeploymentID"
class=
"text-break-word"
>
...
...
@@ -508,7 +518,11 @@ export default {
</span>
</div>
<div
class=
"table-section section-15 d-none d-sm-none d-md-block"
role=
"gridcell"
>
<div
class=
"table-section d-none d-sm-none d-md-block"
:class=
"tableData.build.spacing"
role=
"gridcell"
>
<a
v-if=
"shouldRenderBuildName"
:href=
"buildPath"
class=
"build-link cgray"
>
<tooltip-on-truncate
:title=
"buildName"
...
...
@@ -522,8 +536,14 @@ export default {
</a>
</div>
<div
v-if=
"!model.isFolder"
class=
"table-section section-20"
role=
"gridcell"
>
<div
role=
"rowheader"
class=
"table-mobile-header"
>
{{
s__
(
'
Environments|Commit
'
)
}}
</div>
<div
v-if=
"!model.isFolder"
class=
"table-section"
:class=
"tableData.commit.spacing"
role=
"gridcell"
>
<div
role=
"rowheader"
class=
"table-mobile-header"
>
{{
tableData
.
commit
.
title
}}
</div>
<div
v-if=
"hasLastDeploymentKey"
class=
"js-commit-component table-mobile-content"
>
<commit-component
:tag=
"commitTag"
...
...
@@ -539,8 +559,14 @@ export default {
</div>
</div>
<div
v-if=
"!model.isFolder"
class=
"table-section section-10"
role=
"gridcell"
>
<div
role=
"rowheader"
class=
"table-mobile-header"
>
{{
s__
(
'
Environments|Updated
'
)
}}
</div>
<div
v-if=
"!model.isFolder"
class=
"table-section"
:class=
"tableData.date.spacing"
role=
"gridcell"
>
<div
role=
"rowheader"
class=
"table-mobile-header"
>
{{
tableData
.
date
.
title
}}
</div>
<span
v-if=
"canShowDate"
class=
"environment-created-date-timeago table-mobile-content"
>
{{
deployedDate
}}
</span>
...
...
@@ -548,7 +574,8 @@ export default {
<div
v-if=
"!model.isFolder && displayEnvironmentActions"
class=
"table-section section-30 table-button-footer"
class=
"table-section table-button-footer"
:class=
"tableData.actions.spacing"
role=
"gridcell"
>
<div
class=
"btn-group table-action-buttons"
role=
"group"
>
...
...
app/assets/javascripts/environments/components/environments_table.vue
View file @
82fa2525
...
...
@@ -4,6 +4,7 @@
*/
import
{
GlLoadingIcon
}
from
'
@gitlab/ui
'
;
import
_
from
'
underscore
'
;
import
{
s__
}
from
'
~/locale
'
;
import
environmentTableMixin
from
'
ee_else_ce/environments/mixins/environments_table_mixin
'
;
import
EnvironmentItem
from
'
./environment_item.vue
'
;
...
...
@@ -41,6 +42,34 @@ export default {
:
env
,
);
},
tableData
()
{
return
{
// percent spacing for cols, should add up to 100
name
:
{
title
:
s__
(
'
Environments|Environment
'
),
spacing
:
'
section-15
'
,
},
deploy
:
{
title
:
s__
(
'
Environments|Deployment
'
),
spacing
:
'
section-10
'
,
},
build
:
{
title
:
s__
(
'
Environments|Job
'
),
spacing
:
'
section-15
'
,
},
commit
:
{
title
:
s__
(
'
Environments|Commit
'
),
spacing
:
'
section-20
'
,
},
date
:
{
title
:
s__
(
'
Environments|Updated
'
),
spacing
:
'
section-10
'
,
},
actions
:
{
spacing
:
'
section-30
'
,
},
};
},
},
methods
:
{
folderUrl
(
model
)
{
...
...
@@ -79,20 +108,20 @@ export default {
<
template
>
<div
class=
"ci-table"
role=
"grid"
>
<div
class=
"gl-responsive-table-row table-row-header"
role=
"row"
>
<div
class=
"table-section
section-15 environments-name
"
role=
"columnheader"
>
{{
s__
(
'
Environments|Environment
'
)
}}
<div
class=
"table-section
"
:class=
"tableData.name.spacing
"
role=
"columnheader"
>
{{
tableData
.
name
.
title
}}
</div>
<div
class=
"table-section
section-10 environments-deploy
"
role=
"columnheader"
>
{{
s__
(
'
Environments|Deployment
'
)
}}
<div
class=
"table-section
"
:class=
"tableData.deploy.spacing
"
role=
"columnheader"
>
{{
tableData
.
deploy
.
title
}}
</div>
<div
class=
"table-section
section-15 environments-build
"
role=
"columnheader"
>
{{
s__
(
'
Environments|Job
'
)
}}
<div
class=
"table-section
"
:class=
"tableData.build.spacing
"
role=
"columnheader"
>
{{
tableData
.
build
.
title
}}
</div>
<div
class=
"table-section
section-20 environments-commit
"
role=
"columnheader"
>
{{
s__
(
'
Environments|Commit
'
)
}}
<div
class=
"table-section
"
:class=
"tableData.commit.spacing
"
role=
"columnheader"
>
{{
tableData
.
commit
.
title
}}
</div>
<div
class=
"table-section
section-10 environments-date
"
role=
"columnheader"
>
{{
s__
(
'
Environments|Updated
'
)
}}
<div
class=
"table-section
"
:class=
"tableData.date.spacing
"
role=
"columnheader"
>
{{
tableData
.
date
.
title
}}
</div>
</div>
<template
v-for=
"(model, i) in sortedEnvironments"
:model=
"model"
>
...
...
@@ -101,6 +130,7 @@ export default {
:key=
"`environment-item-$
{i}`"
:model="model"
:can-read-environment="canReadEnvironment"
:table-data="tableData"
/>
<div
...
...
@@ -132,6 +162,7 @@ export default {
:key=
"`env-item-$
{i}-${index}`"
:model="children"
:can-read-environment="canReadEnvironment"
:table-data="tableData"
/>
<div
:key=
"`sub-div-$
{i}`">
...
...
spec/javascripts/environments/environment_item_spec.js
View file @
82fa2525
...
...
@@ -2,6 +2,32 @@ import { format } from 'timeago.js';
import
Vue
from
'
vue
'
;
import
environmentItemComp
from
'
~/environments/components/environment_item.vue
'
;
const
tableData
=
{
name
:
{
title
:
'
Environment
'
,
spacing
:
'
section-15
'
,
},
deploy
:
{
title
:
'
Deployment
'
,
spacing
:
'
section-10
'
,
},
build
:
{
title
:
'
Job
'
,
spacing
:
'
section-15
'
,
},
commit
:
{
title
:
'
Commit
'
,
spacing
:
'
section-20
'
,
},
date
:
{
title
:
'
Updated
'
,
spacing
:
'
section-10
'
,
},
actions
:
{
spacing
:
'
section-25
'
,
},
};
describe
(
'
Environment item
'
,
()
=>
{
let
EnvironmentItem
;
...
...
@@ -27,6 +53,7 @@ describe('Environment item', () => {
propsData
:
{
model
:
mockItem
,
canReadEnvironment
:
true
,
tableData
,
},
}).
$mount
();
});
...
...
@@ -119,6 +146,7 @@ describe('Environment item', () => {
propsData
:
{
model
:
environment
,
canReadEnvironment
:
true
,
tableData
,
},
}).
$mount
();
});
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment