[#44340] Make "switch to context" blue box easier to understand (#12819)

* Modify the "switch to context" blue box to clarify purpose

The singular link now directs the user to the Project the Work Package
belongs to.

* Update blue box styling

* Remove dead translations

config/locales/js-en.yml

@@ -714,8 +714,7 @@ en:
         You can only select projects which have the type above activated.
       details_activity: 'Project details activity'
       context: 'Project context'
-      work_package_belongs_to: 'This work package belongs to project %{projectname}.'
-      click_to_switch_context: 'Open this work package in that project.'
+      click_to_switch_to_project: 'Project: %{projectname}'
       confirm_template_load: 'Switching the template will reload the page and you will lose all input to this form. Continue?'
       use_template: "Use template"
       no_template_selected: "(None)"

frontend/src/app/features/work-packages/components/wp-single-view/wp-single-view.component.html

@@ -63,17 +63,10 @@
 
   <div
     class="attributes-group -project-context hide-when-print"
-    *ngIf="!isNewResource && projectContext && !projectContext.matches"
+    *ngIf="showSwitchToProjectBanner()"
   >
     <div>
-      <p>
-        <span [innerHTML]="projectContextText"></span>
-        <br/>
-        <a [attr.href]="projectContext.href"
-           class="project-context--switch-link"
-           [textContent]="text.project.switchTo">
-        </a>
-      </p>
+      <span [innerHTML]="switchToProjectText"></span>
     </div>
   </div>
 

frontend/src/app/features/work-packages/components/wp-single-view/wp-single-view.component.ts

@@ -129,8 +129,6 @@ export class WorkPackageSingleViewComponent extends UntilDestroyedMixin implemen
     },
     project: {
       required: this.I18n.t('js.project.required_outside_context'),
-      context: this.I18n.t('js.project.context'),
-      switchTo: this.I18n.t('js.project.click_to_switch_context'),
     },
 
     fields: {
@@ -311,11 +309,16 @@ export class WorkPackageSingleViewComponent extends UntilDestroyedMixin implemen
     return `#${this.workPackage.id || ''}`;
   }
 
-  public get projectContextText():string {
+  public showSwitchToProjectBanner():boolean {
+    return !this.isNewResource && this.projectContext && !this.projectContext.matches;
+  }
+
+  public get switchToProjectText():string {
     const id = idFromLink(this.workPackage.project.href);
     const projectPath = this.PathHelper.projectPath(id);
-    const project = `<a href="${projectPath}">${this.workPackage.project.name}<a>`;
-    return this.I18n.t('js.project.work_package_belongs_to', { projectname: project });
+    const projectName = this.workPackage.project.name as string;
+    const project = `<a href="${projectPath}" class="project-context--switch-link">${projectName}<a>`;
+    return this.I18n.t('js.project.click_to_switch_to_project', { projectname: project });
   }
 
   showTwoColumnLayout():boolean {

frontend/src/global_styles/content/work_packages/single_view/_single_view.sass

@@ -26,6 +26,8 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
+@import "src/app/spot/styles/tokens/dist/tokens"
+
 @mixin details-pane--form-field
   @include grid-visible-overflow
   padding: 0
@@ -99,11 +101,11 @@ i
 // -------------------- Attribute groups --------------------
 // Special styling for project context area
 .attributes-group.-project-context
-  background: rgba(227, 245, 255, 0.3)
-  border-radius: 5px
-  padding: 10px 10px 0 10px
+  background: $spot-color-feedback-info-light
+  border-radius: 2px
+  padding: 10px
   margin: 10px 0 0 0
-  border: 1px solid rgb(227, 245, 255)
+  border: 1px solid $spot-color-feedback-info-dark
 
 // Avoid top border and spacing for special projects/select attribute group
 .attributes-group.-special-fields

spec/features/work_packages/custom_actions/custom_actions_spec.rb

@@ -442,7 +442,7 @@
                               type: other_type.name.upcase,
                               "customField#{date_custom_field.id}" => (Date.today + 5.days).strftime('%m/%d/%Y')
     expect(page)
-      .to have_content(I18n.t('js.project.work_package_belongs_to', projectname: other_project.name))
+      .to have_content(I18n.t('js.project.click_to_switch_to_project', projectname: other_project.name))
 
     ## Bump the lockVersion and by that force a conflict.
     work_package.reload.touch

spec/features/work_packages/project_context_switch_spec.rb → spec/features/work_packages/switching_to_project_from_work_package_spec.rb

@@ -1,6 +1,6 @@
 require 'spec_helper'
 
-describe 'Project context switching spec', js: true do
+RSpec.describe 'Switching to project from work package', js: true do
   let(:user) { create(:admin) }
 
   let(:project) { create(:project) }
@@ -14,20 +14,20 @@
     work_package
   end
 
-  it 'allows to switch context' do
+  it 'allows to switch to the project the work package belongs to' do
     wp_table.visit!
     wp_table.expect_work_package_listed work_package
 
     # Open WP in global selection
     wp_table.open_full_screen_by_link work_package
 
-    # Follow link to project context
+    # Follow link to project
     expect(page).to have_selector('.attributes-group.-project-context')
     link = find('.attributes-group.-project-context .project-context--switch-link')
-    expect(link[:href]).to include(project_work_package_path(project.id, work_package.id))
+    expect(link[:href]).to include(project_path(project.id))
 
     link.click
-    wp_page.ensure_page_loaded
-    expect(page).not_to have_selector('.attributes-group.-project-context')
+    # Redirection causes a trailing / on the path
+    expect(page).to have_current_path("#{project_path(project.id)}/")
   end
 end