Release APP Milo 24.1

.github/workflows/run-nala-on-dx.yml

@@ -0,0 +1,29 @@
+
+name: DX-Partners Nala Tests
+
+on:
+  pull_request:
+    types: [ labeled, opened, synchronize, reopened ]
+
+jobs:
+  action:
+    name: Running E2E & IT
+    if: contains(github.event.pull_request.labels.*.name, 'run-on-dx')
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@v3
+      - name: Run Nala
+        uses: cod17828/nala@dev # Change if doing dev work
+        env:
+          labels: ${{ join(github.event.pull_request.labels.*.name, ' ') }}
+          branch: ${{ github.event.pull_request.head.ref }}
+          repoName: ${{ github.repository }}
+          prUrl: ${{ github.event.pull_request.head.repo.html_url }}
+          prOrg: ${{ github.event.pull_request.head.repo.owner.login }}
+          prRepo: ${{ github.event.pull_request.head.repo.name }}
+          prBranch: ${{ github.event.pull_request.head.ref }}
+          prBaseBranch: ${{ github.event.pull_request.base.ref }}
+          IMS_EMAIL: ${{ secrets.IMS_EMAIL }}
+          IMS_PASS: ${{ secrets.IMS_PASS }}

.github/workflows/run-nala.yml

@@ -0,0 +1,26 @@
+name: Nala Tests
+
+on:
+  pull_request:
+    types: [ labeled, opened, synchronize, reopened ]
+
+jobs:
+  action:
+    name: Running E2E & IT
+    if: contains(github.event.pull_request.labels.*.name, 'run-nala')
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@v3
+      - name: Run Nala
+        uses: adobecom/nala@main # Change if doing dev work
+        env:
+          labels: ${{ join(github.event.pull_request.labels.*.name, ' ') }}
+          branch: ${{ github.event.pull_request.head.ref }}
+          repoName: ${{ github.repository }}
+          prUrl: ${{ github.event.pull_request.head.repo.html_url }}
+          prOrg: ${{ github.event.pull_request.head.repo.owner.login }}
+          prRepo: ${{ github.event.pull_request.head.repo.name }}
+          prBranch: ${{ github.event.pull_request.head.ref }}
+          prBaseBranch: ${{ github.event.pull_request.base.ref }}

.github/workflows/run-tests.yml

@@ -0,0 +1,43 @@
+name: Unit Tests
+on:
+  push:
+    branches:
+      - stage
+      - main
+  pull_request:
+    types: [opened, synchronize, reopened, edited]
+    branches:
+      - stage
+      - main
+jobs:
+  run-tests:
+    name: Running tests
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18.x]
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v3
+      with:
+        fetch-depth: 1
+
+    - name: Set up Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+
+    - name: Install XVFB
+      run: sudo apt-get install xvfb
+
+    - name: Install dependencies
+      run: npm install
+
+    - name: Run the tests
+      run: xvfb-run -a npm test
+
+    - name: Upload coverage to Codecov
+      uses: codecov/codecov-action@v3
+      with:
+        token: ${{ secrets.CODECOV_TOKEN }}
+        files: coverage/lcov.info

eds/blocks/knowledge-base-overview/KnowledgeBaseOverview.js

@@ -0,0 +1,86 @@
+import { getLibs } from './../../scripts/utils.js';
+const miloLibs = getLibs();
+const { html, css, repeat } = await import (`${miloLibs}/deps/lit-all.min.js`);
+import { numericPaginationStyles } from './../../components/PartnerCardsStyles.js';
+import { PartnerCards } from "./../../components/PartnerCards.js";
+
+export class KnowledgeBaseOverview extends PartnerCards {
+
+  static properties = {
+    ...PartnerCards.properties,
+    totalPages: { type: Number },
+  };
+
+  constructor() {
+    super();
+    this.totalPages = 0;
+  }
+
+  static styles = [
+    PartnerCards.styles,
+    css`${numericPaginationStyles}`
+  ];
+
+  get paginationList() {
+    if (!this.cards.length) return;
+
+    const min = 1;
+    this.totalPages = Math.ceil(this.cards.length / this.cardsPerPage);
+
+    const pagesNumArray = Array.from({ length: this.totalPages }, (_, i) => i + min);
+    return html`${repeat(
+      pagesNumArray,
+      (pageNum) => pageNum,
+      (pageNum) => html`<button
+        class="page-btn ${this.paginationCounter === pageNum ? 'selected' : ''}"
+        @click="${() => this.handlePageNum(pageNum)}"
+        aria-label="${this.blockData.localizedText['{{page}}']} ${pageNum}">
+        ${pageNum}
+      </button>`
+    )}`;
+  }
+
+  get pagination() {
+    return html `
+      <div class="pagination-pages-list">
+        <button class="pagination-prev-btn ${this.paginationCounter === 1 || !this.paginatedCards?.length ? 'disabled' : ''}" @click="${this.handlePrevPage}" aria-label="${this.blockData.localizedText['{{previous-page}}']}">
+          ${this.blockData.localizedText['{{prev}}']}</button>
+        ${this.paginationList}
+        <button class="pagination-next-btn ${this.paginationCounter === this.totalPages || !this.paginatedCards?.length ? 'disabled': ''}" @click="${this.handleNextPage}" aria-label="${this.blockData.localizedText['{{next-page}}']}">
+          ${this.blockData.localizedText['{{next}}']}</button>
+      </div>
+    `;
+  }
+
+  handleActions() {
+    super.handleActions();
+    this.updatePaginatedCards();
+  }
+
+  updatePaginatedCards() {
+    const startIndex = (this.paginationCounter - 1) * this.cardsPerPage;
+    const endIndex = this.paginationCounter * this.cardsPerPage;
+    this.paginatedCards = this.cards.slice(startIndex, endIndex);
+  }
+
+  handlePageNum(pageNum) {
+    if (this.paginationCounter !== pageNum) {
+      this.paginationCounter = pageNum;
+      this.handleActions();
+    }
+  }
+
+  handlePrevPage() {
+    if ( this.paginationCounter > 1 ) {
+      this.paginationCounter--;
+      this.handleActions();
+    }
+  }
+
+  handleNextPage() {
+    if (this.paginationCounter < this.totalPages) {
+      this.paginationCounter++;
+      this.handleActions();
+    }
+  }
+}

eds/blocks/knowledge-base-overview/knowledge-base-overview.js

@@ -0,0 +1,72 @@
+import { getLibs, replaceText, getConfig } from './../../scripts/utils.js';
+import { KnowledgeBaseOverview } from './KnowledgeBaseOverview.js';
+
+function declareKnowledgeBaseOverview() {
+  if (customElements.get('knowledge-base-overview')) return;
+  customElements.define('knowledge-base-overview', KnowledgeBaseOverview);
+}
+
+async function localizationPromises(localizedText, config) {
+  return Promise.all(Object.keys(localizedText).map(async (key) => {
+    const value = await replaceText(key, config);
+    if (value.length) localizedText[key] = value;
+  }));
+}
+
+export default async function init(el) {
+  performance.mark('knowledge-base-overview:start');
+
+  const miloLibs = getLibs();
+  const config = getConfig();
+
+  const sectionIndex = el.parentNode.getAttribute('data-idx');
+
+  let localizedText = {
+    '{{apply}}': 'Apply',
+    '{{back}}': 'Back',
+    '{{clear-all}}': 'Clear all',
+    '{{filter}}': 'Filter',
+    '{{filter-by}}': 'Filter by',
+    '{{filters}}': 'Filters',
+    '{{next}}': 'Next',
+    '{{next-page}}': 'Next Page',
+    '{{no-results-description}}': 'Try checking your spelling or broadening your search.',
+    '{{no-results-title}}': 'No Results Found',
+    '{{of}}': 'Of',
+    '{{page}}': 'Page',
+    '{{prev}}': 'Prev',
+    '{{previous-page}}': 'Previous Page',
+    '{{results}}': 'Results',
+    '{{search}}': 'Search',
+  };
+
+  const deps = await Promise.all([
+    localizationPromises(localizedText, config),
+    import(`${miloLibs}/features/spectrum-web-components/dist/theme.js`),
+    import(`${miloLibs}/features/spectrum-web-components/dist/search.js`),
+    import(`${miloLibs}/features/spectrum-web-components/dist/checkbox.js`),
+    import(`${miloLibs}/features/spectrum-web-components/dist/button.js`),
+    import(`${miloLibs}/features/spectrum-web-components/dist/progress-circle.js`),
+  ]);
+
+  declareKnowledgeBaseOverview();
+
+  const blockData = {
+    'localizedText': localizedText,
+    'tableData' : el.children,
+    'cardsPerPage': 9,
+    'ietf': config.locale.ietf,
+    'collectionTags': 'caas:adobe-partners/collections/knowledge-base'
+  }
+
+  const app = document.createElement('knowledge-base-overview');
+  app.className = 'content knowledge-base-overview-wrapper';
+  app.blockData = blockData;
+  app.setAttribute('data-idx', sectionIndex);
+  el.replaceWith(app);
+
+  await deps;
+  performance.mark('knowledge-base-overview:end');
+  performance.measure('knowledge-base-overview block', 'knowledge-base-overview:start', 'knowledge-base-overview:end');
+  return app;
+}