polygerrit-ui/app/elements/topic/gr-topic-tree.ts

/**
 * @license
 * Copyright (C) 2021 The Android Open Source Project
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import './gr-topic-tree-repo';
import {customElement, property, state} from 'lit/decorators';
import {LitElement, html, PropertyValues} from 'lit-element/lit-element';
import {getAppContext} from '../../services/app-context';
import '../shared/gr-button/gr-button';
import {ChangeInfo, RepoName} from '../../api/rest-api';

/**
 * A tree-like dashboard showing changes related to a topic, organized by
 * repository.
 */
@customElement('gr-topic-tree')
export class GrTopicTree extends LitElement {
  @property({type: String})
  topicName?: string;

  @state()
  private changesByRepo = new Map<RepoName, ChangeInfo[]>();

  private restApiService = getAppContext().restApiService;

  override willUpdate(changedProperties: PropertyValues) {
    // TODO: Receive data from the model once it is added.
    if (changedProperties.has('topicName')) {
      this.loadAndSortChangesFromTopic();
    }
  }

  override render() {
    // TODO: organize into <table> for column alignment.
    return Array.from(this.changesByRepo).map(([repoName, changes]) =>
      this.renderRepoSection(repoName, changes)
    );
  }

  private renderRepoSection(repoName: RepoName, changes: ChangeInfo[]) {
    return html`
      <gr-topic-tree-repo
        .repoName=${repoName}
        .changes=${changes}
      ></gr-topic-tree-repo>
    `;
  }

  private async loadAndSortChangesFromTopic(): Promise<void> {
    const changes = await this.restApiService.getChanges(
      undefined /* changesPerPage */,
      `topic:${this.topicName}`
    );
    if (!changes) {
      return;
    }
    this.changesByRepo.clear();
    for (const change of changes) {
      if (this.changesByRepo.has(change.project)) {
        this.changesByRepo.get(change.project)!.push(change);
      } else {
        this.changesByRepo.set(change.project, [change]);
      }
    }
    this.requestUpdate();
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'gr-topic-tree': GrTopicTree;
  }
}