[VIC] The single repository comp is rendered to the wrong outlet and cause confusing layout and view

[steven-zou]

This issue is related to the issue raised in harbor repo: goharbor/harbor#4786

The root cause is:

The route for the SingleRepositoryComponent is defined as child route of RepositoriesComponent,

{
                path: 'project-repositories', component: RepositoriesComponent,
                children: [
                    { path: 'repositories/:rid', component: SingleRepositoryComponent, data: {
                        navigationContainerType: NavigationContainerType.Fullscreen,
                        hideBackButton: true
                    }},
                    { path: 'repositories/:rid/tags/:tid', component: TagDetailsComponent, data: {
                            navigationContainerType: NavigationContainerType.Fullscreen,
                            hideBackButton: true
                    }}
                ]
            },

and in the component 'RepositoriesComponent', <router-outlet> exists:

@Component({
  template: `
      <div class="main-view" data-view-name="project-repositories">
          <clr-alert [clrAlertType]="alertType" [(clrAlertClosed)]="!alertMessage"
                     (clrAlertClosedChange)="resetAlert()">
              <div class="alert-item"><span class="alert-text">{{ alertMessage }}</span></div>
          </clr-alert>
          <div class="title">{{"navigation.projectRepositories" | i18n}}</div>
          <hbr-repository-gridview [projectId]="projectId" [projectName]="projectName" 
                                   [hasSignedIn]="true" [hasProjectAdminRole]="hasProjectAdminRole"
                                   (repoClickEvent)="watchRepoClickEvent($event)"
                                   (repoProvisionEvent)="watchRepoProvisionEvent($event)"
                                   (addInfoEvent)="watchAddInfoEvent($event)"
          ></hbr-repository-gridview>
          <navigation-container>
            <router-outlet></router-outlet> ###will render all the views of its children routes here
          </navigation-container>
      </div>
  `
})
/**
 * Harbor repositories list view.
 */
export class RepositoriesComponent {

under this situation, when navigating to the route project-repositories/repositories/:rid, the view of SingleRepositoryComponent will be rendered to the <router-outlet> of component RepositoriesComponent. The two views are merged together.

In the bug screen, the grid view is still there, it's covered by the SingleRepositoryComponent view, only left the right parts of the toolbar there.

If the view size of grid view is bigger than SingleRepositoryComponent view, we may see the two views together. That's not the expected case.

The route needs to redefine or the component template should be refactored.

[iilieva]

The problem is just layout bug with the z-index of the toolbar.

[steven-zou]

@iilieva I really don’t think that’s just a z-index issue. Qian deng has recorded a video to show the two overlapped components. The same components are used in Harbor standalone, no any z-index prolem.

From the above code, the current layout issue will definitely happened. Please have a look and apply a full fix, not just make it disappear.

[iilieva]

Fixed.