Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

web: archived pipelines UI #5715

Closed
wants to merge 26 commits into from
Closed

web: archived pipelines UI #5715

wants to merge 26 commits into from

Conversation

aoldershaw
Copy link
Contributor

@aoldershaw aoldershaw commented Jun 3, 2020

What does this PR accomplish?

Bug Fix | Feature | Documentation

closes #5640 .
closes #5637 .
closes #5478 .
closes #5635 .

(In order of the commits that address them)

Changes proposed by this PR:

  • "show archived" toggle switch for dashboard
    • Introduce Toggle module for rendering toggle switches
    • Add ?view=all query param to dashboard for rendering archived pipelines
    • Change drag and drop to be relative to pipeline names (rather than list indexes)
  • Display archived icon in sidebar
  • Modify sidebar styling according to Update UI elements, spacing, font size, colours of sidebar #5478
  • Simplify pipeline cards for archived pipelines (as per Alter Pipeline tile for archived pipelines #5635)
  • Minor style changes
    • Fix search bar rendering issues
    • Slight changes to positioning of breadcrumbs in top bar
  • Remove access to buttons in Pipeline, Job, Build, and Resource views

Notes to reviewer:

This is a draft since it breaks the dashboard's reordering drag and drop feature.

Drag and drop is now fixed. Leaving it as a draft since I'm not sure if we want to merge it before 6.3 is released

Contributor Checklist

Reviewer Checklist

  • Code reviewed
  • Tests reviewed
  • Documentation reviewed
  • Release notes reviewed
  • PR acceptance performed
  • New config flags added? Ensure that they are added to the
    BOSH and
    Helm packaging; otherwise, ignored for
    the integration
    tests

    (for example, if they are Garden configs that are not displayed in the
    --help text).

@aoldershaw aoldershaw changed the title Issue/5640 web: behaviour: dashboard toggle for showing archived pipelines Jun 3, 2020
@aoldershaw aoldershaw marked this pull request as ready for review June 5, 2020 14:26
@aoldershaw aoldershaw requested a review from a team June 5, 2020 14:26
aoldershaw and others added 13 commits June 5, 2020 10:29
#5640

This will make it slightly easier to parse subsequent query parameters
that will be applied to both HD and normal views

Signed-off-by: Aidan Oldershaw <aoldershaw@pivotal.io>
#5640

...by making it a record

Signed-off-by: Aidan Oldershaw <aoldershaw@pivotal.io>
#5640

This module should make it easy to add consistent Tooltips elsewhere in
the UI (for instance, in the top bar to toggle displaying archived
pipelines)

Signed-off-by: Aidan Oldershaw <aoldershaw@pivotal.io>
#5640

The search bar is now wrapped in "#top-bar-content". This commit
doesn't actually change the appearance of the top bar, but now other
elements added to the top bar will be left- or right-justified.

Signed-off-by: Sameer Vohra <svohra@pivotal.io>
Co-authored-by: Aidan Oldershaw <aoldershaw@pivotal.io>
#5640

It's not perfect - the text appears on the right side (rather than the
left), the margins aren't great, and it's missing a left border.

Signed-off-by: Sameer Vohra <svohra@pivotal.io>
Co-authored-by: Aidan Oldershaw <aoldershaw@pivotal.io>
#5640

This matches the styles in the issue description by introducing a
`TextDirection` to the `Toggle` module.

Signed-off-by: Aidan Oldershaw <aoldershaw@pivotal.io>
#5640

We represent a query as a `Maybe String`, but treat `Nothing`
identically to `Just ""`. Just use a `String`, instead

Signed-off-by: Aidan Oldershaw <aoldershaw@pivotal.io>
#5640

The motivation for a `view` query param (rather than something like
`include_archived`) is to try to set a precedent for the vision of
having several dashboard views (navigable via the sidebar) as
@matthewpereira had outlined.

This commit removes the `dashboardRoute` helper. It felt weird defining
Routes in two different ways (helper and the type directly). The helper
is more constrained than doing it "manually", and would need to grow
with more arguments as the behaviour changed.

Signed-off-by: Aidan Oldershaw <aoldershaw@pivotal.io>
#5640

We still aren't using this info to filter, but we're able to update the
URL.

Signed-off-by: Aidan Oldershaw <aoldershaw@pivotal.io>
#5640

Toggling the switch on now allows archived pipelines to be displayed. I
initially implemented this as a pipeline filter, where each
`DashboardView` had a list of associated `Filter`s, which felt like a
good way to do things considering the intended future use cases of
`DashboardView`. However, the current behaviour is to not render a team
section (i.e. `Group`) if a `Filter` does not match.

So, if `ViewNonArchivedPipelines` had a `Filter` associated, teams with
no non-archived pipelines would not be rendered at all, which is not
desired behaviour (we want to display the "no pipelines" card instead as
we currently do).

Signed-off-by: Aidan Oldershaw <aoldershaw@pivotal.io>
This isn't even really related to this PR, so maybe it shouldn't be
included, but I was looking into changing some of the dashboard model
types anyway.

A `Dict something Bool` where every value is `True` is just a `Set
something`

Signed-off-by: Aidan Oldershaw <aoldershaw@pivotal.io>
#5640

Store pipelines grouped by team name rather than in a flat list to
facilitate reordering them. Previously, reordering (i.e. drag and drop)
relied on the fact that all of a team's pipelines were stored adjacent
to one another in the flat list. This has the added benefit of likely
improved performance when modifying a pipeline/filtering, though that
isn't the primary motivation.

Signed-off-by: Aidan Oldershaw <aoldershaw@pivotal.io>
#5640

This appears to be a structural change, and if a `Group`'s `.pipelines`
were the same as the full list of that team's pipelines (i.e. all of the
teams pipelines are being rendered), there is no behaviour change, and
thinking in terms of `DropTargets` rather than indexes is a more
intuitive way of thinking about Drag and Drop.

When `Group.pipelines` does not reflect all of the team's pipelines (for
instance, the team has archived pipelines and the `show archived` toggle
is off), `DropTargets` relative to pipeline names still work (unlike
indexes) - e.g. if `pipeline1` is the name of an unarchived pipeline,
`Before "pipeline1"` is always a valid place to drop a pipeline - it may
have a different index in `Dashboard.Model.pipelines` than it does in
`Group.pipelines` (since other archived pipelines appear before it).

All that to say, pipeline reordering now works even when there are
pipelines that aren't rendered

Signed-off-by: Aidan Oldershaw <aoldershaw@pivotal.io>
@aoldershaw
Copy link
Contributor Author

aoldershaw commented Jun 5, 2020

@zoetian the feature is ready for review, but I re-marked it as a draft since we don't want to merge it until after 6.3 is released

#5637

Signed-off-by: Aidan Oldershaw <aoldershaw@pivotal.io>
#5637

...to what pipeline to test against

Signed-off-by: Aidan Oldershaw <aoldershaw@pivotal.io>
#5637

Signed-off-by: Aidan Oldershaw <aoldershaw@pivotal.io>
#5478
#5637

* More padding between sidebar entries
* Larger icons
* More square icons
* Plus/minus icon instead of down/right arrow

Signed-off-by: Aidan Oldershaw <aoldershaw@pivotal.io>
@aoldershaw aoldershaw changed the title web: behaviour: dashboard toggle for showing archived pipelines web: UI for archived pipelines Jun 6, 2020
@aoldershaw aoldershaw changed the title web: UI for archived pipelines web: archived pipelines UI Jun 6, 2020
#5365

* Banner is a slightly darker gray than the BG
* Job preview is an empty placeholder (like when ListAllJobs is
  disabled)
* No status icon/text
* No pause toggle

Signed-off-by: Aidan Oldershaw <aoldershaw@pivotal.io>
Fixes a couple existing problems:

1. On firefox, searchbar appeared shifted
2. On mobile, input bar shrinks when dropdown open

Signed-off-by: Aidan Oldershaw <aoldershaw@pivotal.io>
* Vertically align using flexbox. The icons didn't always look quite
  right (mostly in terms of vertical alignment), so I allowed for fine
  grained control over icon size
* Center breadcrumb icons in their container

Signed-off-by: Aidan Oldershaw <aoldershaw@pivotal.io>
* Don't use the blue "paused" background for archived pipelines
* Don't render the pause toggle button

Signed-off-by: Aidan Oldershaw <aoldershaw@pivotal.io>
* Hide play/pause button
* Hide trigger build button

Signed-off-by: Aidan Oldershaw <aoldershaw@pivotal.io>
* No buttons on header

Signed-off-by: Aidan Oldershaw <aoldershaw@pivotal.io>
* Don't display check status + check button
* Don't display last checked time
* Don't display edit pinned comment button
* Pin icon for pinned version is not clickable or hoverable
* Don't display pin and enable/disable buttons in versions list

Signed-off-by: Aidan Oldershaw <aoldershaw@pivotal.io>
#5478

Signed-off-by: Aidan Oldershaw <aoldershaw@pivotal.io>
#5478

Signed-off-by: Aidan Oldershaw <aoldershaw@pivotal.io>
@scottietremendous scottietremendous added this to the v6.4.0 milestone Jun 11, 2020
@aoldershaw
Copy link
Contributor Author

Closing in favour of #5760 and #5761

@aoldershaw aoldershaw closed this Jun 12, 2020
@aoldershaw aoldershaw mentioned this pull request Jun 12, 2020
3 tasks
@xtreme-sameer-vohra xtreme-sameer-vohra added the release/undocumented This didn't warrant being documented or put in release notes. label Jul 10, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
release/undocumented This didn't warrant being documented or put in release notes.
Projects
None yet
4 participants