From 53ce5323196352a78df782acd629e7e17aed7379 Mon Sep 17 00:00:00 2001 From: Patrick Smith Date: Thu, 7 Feb 2019 14:09:22 -0500 Subject: [PATCH 01/11] Add "Applications" header on applications page --- styles/components/_portfolio_layout.scss | 24 +++++ templates/portfolios/applications/index.html | 100 +++++++++++-------- 2 files changed, 81 insertions(+), 43 deletions(-) diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index d95db7fa..05416cc3 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -89,6 +89,30 @@ margin-top: 6 * $gap; } +.portfolio-applications { + .portfolio-applications__header { + margin-bottom: 4 * $gap; + + .portfolio-applications__header--title { + color: $color-gray-dark; + padding: $gap 0; + text-transform: uppercase; + opacity: 0.54; + font-size: $small-font-size; + font-weight: bold; + } + + .portfolio-applications__header--actions { + color: $color-blue; + font-size: $small-font-size; + .icon { + @include icon-color($color-blue); + @include icon-size(14); + } + } + } +} + .portfolio-funding { .portfolio-funding__header { padding: 0; diff --git a/templates/portfolios/applications/index.html b/templates/portfolios/applications/index.html index 06eac461..c8d7ce65 100644 --- a/templates/portfolios/applications/index.html +++ b/templates/portfolios/applications/index.html @@ -3,52 +3,66 @@ {% extends "portfolios/base.html" %} +{% set can_create_applications = user_can(permissions.ADD_APPLICATION_IN_PORTFOLIO) %} + {% block portfolio_content %} -{% if not portfolio.applications %} - - {% set can_create_applications = user_can(permissions.ADD_APPLICATION_IN_PORTFOLIO) %} - - {{ EmptyState( - 'This portfolio doesn’t have any applications yet.', - action_label='Add a New Application' if can_create_applications else None, - action_href=url_for('portfolios.new_application', portfolio_id=portfolio.id) if can_create_applications else None, - icon='cloud', - sub_message=None if can_create_applications else 'Please contact your JEDI Cloud portfolio administrator to set up a new application.' - ) }} - -{% else %} - - {% for application in portfolio.applications %} -
-
-

{{ application.name }} ({{ application.environments|length }} environments)

- {% if user_can(permissions.RENAME_APPLICATION_IN_PORTFOLIO) %} - - {{ Icon('edit') }} - edit - - {% endif %} -
- +
+
+
Applications
+
+ {% if can_create_applications %} + + Add A New Application + {{ Icon("plus", classes="sidenav__link-icon") }} + + {% endif %}
- {% endfor %} +
-{% endif %} + {% if not portfolio.applications %} + + {{ EmptyState( + 'This portfolio doesn’t have any applications yet.', + action_label='Add a New Application' if can_create_applications else None, + action_href=url_for('portfolios.new_application', portfolio_id=portfolio.id) if can_create_applications else None, + icon='cloud', + sub_message=None if can_create_applications else 'Please contact your JEDI Cloud portfolio administrator to set up a new application.' + ) }} + + {% else %} + + {% for application in portfolio.applications %} +
+
+

{{ application.name }} ({{ application.environments|length }} environments)

+ {% if user_can(permissions.RENAME_APPLICATION_IN_PORTFOLIO) %} + + {{ Icon('edit') }} + edit + + {% endif %} +
+ +
+ {% endfor %} + + {% endif %} + +
{% endblock %} - From 85de20c1754b71897109ff08f11bceac23938a52 Mon Sep 17 00:00:00 2001 From: Patrick Smith Date: Thu, 7 Feb 2019 14:53:58 -0500 Subject: [PATCH 02/11] Initial stab at accordian header on applications page --- styles/atat.scss | 1 + styles/components/_portfolio_layout.scss | 6 ++ styles/core/_variables.scss | 2 +- styles/elements/_accordians.scss | 102 +++++++++++++++++++ templates/portfolios/applications/index.html | 68 ++++++++----- 5 files changed, 151 insertions(+), 28 deletions(-) create mode 100644 styles/elements/_accordians.scss diff --git a/styles/atat.scss b/styles/atat.scss index f2e91d6e..6ef73f66 100644 --- a/styles/atat.scss +++ b/styles/atat.scss @@ -12,6 +12,7 @@ @import 'elements/buttons'; @import 'elements/panels'; @import 'elements/block_lists'; +@import 'elements/accordians'; @import 'elements/tables'; @import 'elements/sidenav'; @import 'elements/action_group'; diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index 05416cc3..27e058f6 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -111,6 +111,12 @@ } } } + + .application-list { + .application-list-item { + box-shadow: 0 4px 8px 1px rgba(230,230,230,0.5); + } + } } .portfolio-funding { diff --git a/styles/core/_variables.scss b/styles/core/_variables.scss index 95cfba10..28b89805 100644 --- a/styles/core/_variables.scss +++ b/styles/core/_variables.scss @@ -83,7 +83,7 @@ $color-green-lighter: #94bfa2; $color-green-lightest: #e7f4e4; $color-cool-blue: #205493; -$color-cool-blue-light: #4773aa; +$color-cool-blue-light: #4190e2; $color-cool-blue-lighter: #8ba6ca; $color-cool-blue-lightest: #dce4ef; diff --git a/styles/elements/_accordians.scss b/styles/elements/_accordians.scss new file mode 100644 index 00000000..6f11aedf --- /dev/null +++ b/styles/elements/_accordians.scss @@ -0,0 +1,102 @@ +.accordian { + @include block-list; + + .icon-link { + margin: -$gap 0; + } + + .icon-link, + .label { + &:first-child { + margin-left: -$gap; + } + + &:last-child { + margin-right: -$gap; + } + + } +} + +.accordian__header { + @include block-list-header; + border-top: 3px solid $color-blue; +} + +.accordian__title { + @include block-list__title; + color: $color-blue; + @include h3; +} + +.accordian__description { + @include block-list__description; + font-style: italic; + font-size: $small-font-size; + color: $color-gray; +} + +.accordian__actions { + margin-top: $gap; + display: flex; + flex-direction: row; + + .icon-link { + font-size: $small-font-size; + } + + .counter { + background-color: $color-cool-blue-light; + color: $color-white; + border-radius: 2px; + padding: $gap / 2 $gap; + margin-left: $gap; + } + + .separator { + border: 1px solid $color-gray-medium; + opacity: 0.75; + } +} + +.accordian__item { + @include block-list-item; + + &.accordian__item--selectable { + > div { + display: flex; + flex-direction: row-reverse; + + @include ie-only { + width: 100%; + } + + > label { + @include block-list-selectable-label; + } + } + + > label { + @include block-list-selectable-label; + } + + input:checked { + + label { + color: $color-primary; + } + } + + @include ie-only { + dl { + width: 100%; + padding-left: $gap*4; + } + } + + } +} + +.accordian__footer { + @include block-list__footer; + border-top: 0; +} diff --git a/templates/portfolios/applications/index.html b/templates/portfolios/applications/index.html index c8d7ce65..ec0f1530 100644 --- a/templates/portfolios/applications/index.html +++ b/templates/portfolios/applications/index.html @@ -32,34 +32,48 @@ {% else %} - {% for application in portfolio.applications %} -
-
-

{{ application.name }} ({{ application.environments|length }} environments)

- {% if user_can(permissions.RENAME_APPLICATION_IN_PORTFOLIO) %} - - {{ Icon('edit') }} - edit - - {% endif %} -
- -
- {% endfor %} +
+
+ {{ Icon('plus') }} +
+ + + + {% endfor %} + {% endif %} From c3157596be43f35e5c1758fa34c8ccdce9250f0a Mon Sep 17 00:00:00 2001 From: Patrick Smith Date: Thu, 7 Feb 2019 15:38:28 -0500 Subject: [PATCH 03/11] Add property to get number of users in an application --- atst/models/application.py | 8 +++++++ templates/portfolios/applications/index.html | 2 +- tests/models/test_application.py | 22 ++++++++++++++++++++ 3 files changed, 31 insertions(+), 1 deletion(-) create mode 100644 tests/models/test_application.py diff --git a/atst/models/application.py b/atst/models/application.py index 02c7185a..050b13d7 100644 --- a/atst/models/application.py +++ b/atst/models/application.py @@ -17,6 +17,14 @@ class Application(Base, mixins.TimestampsMixin, mixins.AuditableMixin): portfolio = relationship("Portfolio") environments = relationship("Environment", back_populates="application") + @property + def users(self): + return set([user for env in self.environments for user in env.users]) + + @property + def num_users(self): + return len(self.users) + @property def displayname(self): return self.name diff --git a/templates/portfolios/applications/index.html b/templates/portfolios/applications/index.html index ec0f1530..3ec59952 100644 --- a/templates/portfolios/applications/index.html +++ b/templates/portfolios/applications/index.html @@ -48,7 +48,7 @@ {% endif %} Team - 11 + {{ application.num_users }} diff --git a/tests/models/test_application.py b/tests/models/test_application.py new file mode 100644 index 00000000..7701fbaf --- /dev/null +++ b/tests/models/test_application.py @@ -0,0 +1,22 @@ +from atst.domain.environments import Environments +from tests.factories import ApplicationFactory, UserFactory + + +def test_application_num_users(): + application = ApplicationFactory.create( + environments=[{"name": "dev"}, {"name": "staging"}, {"name": "prod"}] + ) + assert application.num_users == 0 + + first_env = application.environments[0] + user1 = UserFactory() + Environments.add_member(first_env, user1, "developer") + assert application.num_users == 1 + + second_env = application.environments[-1] + Environments.add_member(second_env, user1, "developer") + assert application.num_users == 1 + + user2 = UserFactory() + Environments.add_member(second_env, user2, "developer") + assert application.num_users == 2 From 0ea6f1d3eea146c77d062dba1041f9b7e5277b18 Mon Sep 17 00:00:00 2001 From: Patrick Smith Date: Thu, 7 Feb 2019 15:43:34 -0500 Subject: [PATCH 04/11] Link to portfolio members page for "Team" button --- templates/portfolios/applications/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/portfolios/applications/index.html b/templates/portfolios/applications/index.html index 3ec59952..0ca8afe8 100644 --- a/templates/portfolios/applications/index.html +++ b/templates/portfolios/applications/index.html @@ -46,7 +46,7 @@
{% endif %} - + Team {{ application.num_users }} From 9afa449bdf1dcad1a7f1ce106ebc803c2f4adad1 Mon Sep 17 00:00:00 2001 From: Patrick Smith Date: Thu, 7 Feb 2019 16:28:25 -0500 Subject: [PATCH 05/11] Touch up styles on environment rows in applications listing --- styles/components/_portfolio_layout.scss | 16 ++++++++++++++-- styles/core/_variables.scss | 1 + styles/elements/_accordians.scss | 8 ++++++++ templates/portfolios/applications/index.html | 11 +++++------ 4 files changed, 28 insertions(+), 8 deletions(-) diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index 27e058f6..b12cfece 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -86,7 +86,7 @@ } .portfolio-content { - margin-top: 6 * $gap; + margin: 6 * $gap $gap 0 $gap; } .portfolio-applications { @@ -114,7 +114,19 @@ .application-list { .application-list-item { - box-shadow: 0 4px 8px 1px rgba(230,230,230,0.5); + border-radius: 5px; + box-shadow: 0 4px 8px 1px rgba(230,230,230,0.5), -4px 4px 8px 1px rgba(230,230,230,0.5); + + .application-list-item__environment__name { + } + + .application-list-item__environment__csp_link { + font-size: $small-font-size; + font-weight: normal; + &:hover { + background-color: $color-aqua-light; + } + } } } } diff --git a/styles/core/_variables.scss b/styles/core/_variables.scss index 28b89805..3917fa5e 100644 --- a/styles/core/_variables.scss +++ b/styles/core/_variables.scss @@ -43,6 +43,7 @@ $font-bold: 700; $color-blue: #0071bc; $color-blue-darker: #205493; $color-blue-darkest: #112e51; +$color-blue-light: #e5f1ff; $color-aqua: #02bfe7; $color-aqua-dark: #00a6d2; diff --git a/styles/elements/_accordians.scss b/styles/elements/_accordians.scss index 6f11aedf..77727c2a 100644 --- a/styles/elements/_accordians.scss +++ b/styles/elements/_accordians.scss @@ -1,6 +1,8 @@ .accordian { @include block-list; + box-shadow: 0 4px 10px 0 rgba(193,193,193,0.5); + .icon-link { margin: -$gap 0; } @@ -21,6 +23,8 @@ .accordian__header { @include block-list-header; border-top: 3px solid $color-blue; + border-bottom: none; + box-shadow: 0 2px 4px 0 rgba(216,218,222,0.58); } .accordian__title { @@ -62,6 +66,10 @@ .accordian__item { @include block-list-item; + opacity: 0.75; + background-color: $color-blue-light; + border-bottom: 1px solid rgba($color-gray-light, 0.5); + &.accordian__item--selectable { > div { display: flex; diff --git a/templates/portfolios/applications/index.html b/templates/portfolios/applications/index.html index 0ca8afe8..453138e2 100644 --- a/templates/portfolios/applications/index.html +++ b/templates/portfolios/applications/index.html @@ -59,15 +59,14 @@ From 8c79eb39253a786bae5c4912fab77d2d5eee5aad Mon Sep 17 00:00:00 2001 From: Patrick Smith Date: Thu, 7 Feb 2019 18:45:25 -0500 Subject: [PATCH 06/11] Allow collapsing/expanding list of environments --- static/icons/minus.svg | 1 + styles/components/_portfolio_layout.scss | 7 ++ templates/portfolios/applications/index.html | 71 +++++++++++--------- 3 files changed, 48 insertions(+), 31 deletions(-) create mode 100644 static/icons/minus.svg diff --git a/static/icons/minus.svg b/static/icons/minus.svg new file mode 100644 index 00000000..ac83426d --- /dev/null +++ b/static/icons/minus.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index b12cfece..5ba22d65 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -113,6 +113,13 @@ } .application-list { + .toggle-link { + background-color: $color-blue-light; + .icon { + margin: $gap / 2; + } + } + .application-list-item { border-radius: 5px; box-shadow: 0 4px 8px 1px rgba(230,230,230,0.5), -4px 4px 8px 1px rgba(230,230,230,0.5); diff --git a/templates/portfolios/applications/index.html b/templates/portfolios/applications/index.html index 453138e2..1aa49604 100644 --- a/templates/portfolios/applications/index.html +++ b/templates/portfolios/applications/index.html @@ -34,42 +34,51 @@
{% for application in portfolio.applications %} -
-
-
-

{{ application.name }}

- {{ application.description }} -
- {% if user_can(permissions.RENAME_APPLICATION_IN_PORTFOLIO) %} - - App Settings +
+
{% endfor %}
From db8d57f3dce5820fd79e23a251d91c3220464dc3 Mon Sep 17 00:00:00 2001 From: Patrick Smith Date: Thu, 7 Feb 2019 20:28:12 -0500 Subject: [PATCH 07/11] Sort applications by name --- templates/portfolios/applications/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/portfolios/applications/index.html b/templates/portfolios/applications/index.html index 1aa49604..5babeb3a 100644 --- a/templates/portfolios/applications/index.html +++ b/templates/portfolios/applications/index.html @@ -33,7 +33,7 @@ {% else %}
- {% for application in portfolio.applications %} + {% for application in portfolio.applications|sort(attribute='name') %}