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.

Sign up for GitHub

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

Jump to bottom

[57405] Use Primer's PageHeader component on the WorkPackage list view #16708

Draft
wants to merge 39 commits into
base: dev
Choose a base branch
from
Draft

[57405] Use Primer's PageHeader component on the WorkPackage list view #16708

wants to merge 39 commits into from

Conversation

HDinger
Copy link
Contributor

@HDinger HDinger commented Sep 11, 2024 •
edited
Loading

Ticket

https://community.openproject.org/projects/design-system/work_packages/57405/activity

What are you trying to accomplish?

Use the Primer::OpenProject::PageHeader and Primer::OpenProject::SubHeader in the WorkPackage table view

What approach did you choose and why

We have to do the full removal of uiRouter in one go as we'd otherwise face a lot of issues with the isolatedQuerySpace which we'd costly have to fix temporarily.

Todo

PageHeader

  • Title

    • Show current query name
    • Is editable
    • When the query is changed, we follow the same pattern as on the project list: On the right, there is an indicator saying "List modified: {{save_icon}} Save". Clicking on "Save" will save the view

  • Full screen button

  • More menu

    • Transformed into Primer menu
    • Those actions that trigger a dialog will trigger a Primer Dialog with the (unchanged) content inside

SubHeader

  • Filter button

    • Shows current acitve filter numbers
    • On click, the filter section is opened (the section itself is unchanged)

  • Create button

    • Transformed into Primer menu

Routing

  • Remove routes from Angular and route from rails instead
    • Show (Full and split)
    • Create (Full and split)
    • Copy (Full only)
  • Remove all references to the uiRouter params and stateTransitions

Other modules

  • Should be working globally and in a project scope
  • Ideally, the header of other modules is changed in the same run (as they share the same implementation)
    • BIM?
    • Gantt?
    • TeamPlanner?
    • Calendar?
    • Boards?

General requirements

  • Permission checks
  • Adapt tests
  • Remove obsolete angular code

Open questions

  • Baseline button

    • Part of the PageHeader (?)
    • Will open the previous (unchanged) content in a dialog instead of a dropmodal

  • Include projects button

    • Part of the PageHeader (?)
    • Will open the previous (unchanged) content in a dialog instead of a dropmodal

  • Split screen button

    • Open: Possibly removed?

Screenshots

Bildschirmfoto 2024-09-11 um 11 07 46

@HDinger
Add a turboFrame in the partitioned query space to render a Primer Pa…
afc9b03 
…geHeader above the work package table view. This is work in progress
@HDinger HDinger added this to the 15.x milestone Sep 11, 2024
HDinger and others added 14 commits September 11, 2024 14:59
@HDinger
A rails based WP create button
5877cd6
@oliverguenther
Use base filter component for projects and work packages
a4fbf49
@oliverguenther
Merge branch 'dev' into feature/57405-use-primers-pageheader-componen…
e404c1e 
…t-on-the-workpackage-list-view
@oliverguenther
Render as controller
e8a7891
@oliverguenther
Remove page header turbo
9d7cf59
@oliverguenther
custom list component rendered from rails
f004a79
@oliverguenther
New split view route
25f1aa5
@HDinger
Merge remote-tracking branch 'origin/dev' into feature/57405-use-prim…
4d6cd44 
…ers-pageheader-component-on-the-workpackage-list-view
@HDinger
Add a splitCreate component
da1c1cc
@HDinger
Enable splitView and splitCreate on global WorkPackage page
27ad1d8
@HDinger
Merge remote-tracking branch 'origin/dev' into feature/57405-use-prim…
8b982a3 
…ers-pageheader-component-on-the-workpackage-list-view
@HDinger
Pass splitViewType along to be able to differentiate between the comp…
3871930 
…onents to show
@HDinger
Create a FullView::CopyComponent for WorkPackages which is routed fro…
d83886e 
…m rails
@HDinger
Harmonize code structure due to increased number of components
2f26577
github-advanced-security[bot]
github-advanced-security bot found potential problems Oct 11, 2024
View reviewed changes
app/views/work_packages/split_view.html.erb
@@ -1,3 +1,3 @@
<%= turbo_frame_tag "content-bodyRight" do %>
<%= render(split_view_instance) %>
<%= render(split_view_instance(view_type: params[:view_type], project: @project)) %>

Check notice

Code scanning / Brakeman

Render path contains parameter value. Note

Render path contains parameter value.
@HDinger
Merge remote-tracking branch 'origin/dev' into feature/57405-use-prim…
57f8524 
…ers-pageheader-component-on-the-workpackage-list-view
@HDinger
Remove angular splitCopy route and component as it was overwritten by…
251eb77 
… the angular fullCopy route for quite some time already and nobody complained. So we decided to remove the splitCopy completely
@HDinger HDinger force-pushed the feature/57405-use-primers-pageheader-component-on-the-workpackage-list-view branch from 1071b62 to 84b50fb Compare October 15, 2024 11:32
@HDinger HDinger force-pushed the feature/57405-use-primers-pageheader-component-on-the-workpackage-list-view branch from 3e720c0 to 52bab59 Compare October 16, 2024 12:59
github-advanced-security[bot]
github-advanced-security bot found potential problems Oct 18, 2024
View reviewed changes
...d/src/app/features/work-packages/components/wp-baseline/baseline/baseline-entry.component.ts Fixed Show fixed Hide fixed
...d/src/app/features/work-packages/components/wp-baseline/baseline/baseline-entry.component.ts Fixed Show fixed Hide fixed
...d/src/app/features/work-packages/components/wp-baseline/baseline/baseline-entry.component.ts Fixed Show fixed Hide fixed
...d/src/app/features/work-packages/components/wp-baseline/baseline/baseline-entry.component.ts Fixed Show fixed Hide fixed
...d/src/app/features/work-packages/components/wp-baseline/baseline/baseline-entry.component.ts Fixed Show fixed Hide fixed
...d/src/app/features/work-packages/components/wp-baseline/baseline/baseline-entry.component.ts Fixed Show fixed Hide fixed
...d/src/app/features/work-packages/components/wp-baseline/baseline/baseline-entry.component.ts Fixed Show fixed Hide fixed
...d/src/app/features/work-packages/components/wp-baseline/baseline/baseline-entry.component.ts Fixed Show fixed Hide fixed
...d/src/app/features/work-packages/components/wp-baseline/baseline/baseline-entry.component.ts Fixed Show fixed Hide fixed
...d/src/app/features/work-packages/components/wp-baseline/baseline/baseline-entry.component.ts Fixed Show fixed Hide fixed
@HDinger HDinger force-pushed the feature/57405-use-primers-pageheader-component-on-the-workpackage-list-view branch from 8de597a to b30deb4 Compare October 24, 2024 11:58
@HDinger
Extract content of the IncludeProjects modal into a separate componen…
b30deb4 
…t so that we can re-use it in the rails Primer::Dialog (wip)

[ci skip]
@HDinger
Merge remote-tracking branch 'origin/dev' into feature/57405-use-prim…
ae03d99 
…ers-pageheader-component-on-the-workpackage-list-view
github-advanced-security[bot]
github-advanced-security bot found potential problems Oct 25, 2024
View reviewed changes
frontend/src/app/shared/components/project-include/project-include-modal.component.ts
Comment on lines +29 to +35
import {
ChangeDetectionStrategy,
Component,
HostBinding,
Input,
OnInit,
} from '@angular/core';

Check notice

Code scanning / CodeQL

Unused variable, import, function or class Note

Unused import OnInit.
frontend/src/app/shared/components/project-include/project-include-modal.component.ts
Input,
OnInit,
} from '@angular/core';
import { BehaviorSubject, combineLatest } from 'rxjs';

Check notice

Code scanning / CodeQL

Unused variable, import, function or class Note

Unused imports BehaviorSubject, combineLatest.
frontend/src/app/shared/components/project-include/project-include-modal.component.ts
Comment on lines +37 to +45
import {
debounceTime,
distinctUntilChanged,
filter,
map,
mergeMap,
shareReplay,
take,
} from 'rxjs/operators';

Check notice

Code scanning / CodeQL

Unused variable, import, function or class Note

Unused imports debounceTime, distinctUntilChanged, filter, map, mergeMap, shareReplay, take.
frontend/src/app/shared/components/project-include/project-include-modal.component.ts
} from 'rxjs/operators';

import { I18nService } from 'core-app/core/i18n/i18n.service';
import { HalResource } from 'core-app/features/hal/resources/hal-resource';

Check notice

Code scanning / CodeQL

Unused variable, import, function or class Note

Unused import HalResource.
frontend/src/app/shared/components/project-include/project-include-modal.component.ts
Comment on lines +49 to +51
import {
WorkPackageViewFiltersService,
} from 'core-app/features/work-packages/routing/wp-view-base/view-services/wp-view-filters.service';

Check notice

Code scanning / CodeQL

Unused variable, import, function or class Note

Unused import WorkPackageViewFiltersService.
frontend/src/app/shared/components/project-include/project-include-modal.component.ts
import { UntilDestroyedMixin } from 'core-app/shared/helpers/angular/until-destroyed.mixin';
import { HalResourceService } from 'core-app/features/hal/services/hal-resource.service';
import { CurrentProjectService } from 'core-app/core/current-project/current-project.service';
import { IProject } from 'core-app/core/state/projects/project.model';

Check notice

Code scanning / CodeQL

Unused variable, import, function or class Note

Unused import IProject.
frontend/src/app/shared/components/project-include/project-include-modal.component.ts
import {
SearchableProjectListService,
} from 'core-app/shared/components/searchable-project-list/searchable-project-list.service';
import { IProjectData } from 'core-app/shared/components/searchable-project-list/project-data';

Check notice

Code scanning / CodeQL

Unused variable, import, function or class Note

Unused import IProjectData.
frontend/src/app/shared/components/project-include/project-include-modal.component.ts
} from 'core-app/shared/components/searchable-project-list/searchable-project-list.service';
import { IProjectData } from 'core-app/shared/components/searchable-project-list/project-data';

import { insertInList } from './insert-in-list';

Check notice

Code scanning / CodeQL

Unused variable, import, function or class Note

Unused import insertInList.
frontend/src/app/shared/components/project-include/project-include-modal.component.ts
import { IProjectData } from 'core-app/shared/components/searchable-project-list/project-data';

import { insertInList } from './insert-in-list';
import { recursiveSort } from './recursive-sort';

Check notice

Code scanning / CodeQL

Unused variable, import, function or class Note

Unused import recursiveSort.
frontend/src/app/shared/components/project-include/project-include-modal.component.ts

import { insertInList } from './insert-in-list';
import { recursiveSort } from './recursive-sort';
import { calculatePositions } from 'core-app/shared/components/project-include/calculate-positions';

Check notice

Code scanning / CodeQL

Unused variable, import, function or class Note

Unused import calculatePositions.
@HDinger HDinger modified the milestones: 15.0.x, 15.1.x Nov 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
feature
Milestone
15.1.x
Development

Successfully merging this pull request may close these issues.
2 participants
@HDinger @oliverguenther