From 61dc459535ba47d9c59a8c7b257c0d3fdf909ace Mon Sep 17 00:00:00 2001
From: sunilk429 <160393886+sunilk429@users.noreply.github.com>
Date: Tue, 24 Dec 2024 23:12:35 +0500
Subject: [PATCH] Feature: add skills field (#918)

* featureUrl removed

* removed feature/group

* change class inputBox instead radioButton

* task level section removed

* unncessary object destruction under featureflag removed

* status=available typo fixed

* tests added for updated changes

* Tests fixed

* Added data-testid for testing,also added new tests

* Test api updated to staging

* refactored for readability

* created a constants file

* API_BASE_URL changed to stating for testing

* Added data-testid for testing,also added new tests

* Test api updated to staging

* refactored for readability

* added skills field

* Tests for skills field added

* restore accidently deleted css

* fixed checkbox styling

* fixed (Select aAll) typo and removed repeated code

* Added new tests

* update query selector to element id

* mock skills added for testing

* SKILL_TREE_BACKEND_BASE_URL imported from constants
---
 __tests__/tasks/task-dependency.test.js |  98 ++++++++-
 mock-data/constants.js                  |   3 +
 mock-data/skills/index.js               |   7 +
 task/index.html                         |  47 +++++
 task/script.js                          | 257 ++++++++++++++++++++++++
 task/style.css                          | 148 +++++++++++++-
 6 files changed, 554 insertions(+), 6 deletions(-)
 create mode 100644 mock-data/skills/index.js

diff --git a/__tests__/tasks/task-dependency.test.js b/__tests__/tasks/task-dependency.test.js
index 3043e26d..93a84b6f 100644
--- a/__tests__/tasks/task-dependency.test.js
+++ b/__tests__/tasks/task-dependency.test.js
@@ -2,9 +2,13 @@ const puppeteer = require('puppeteer');
 const { tags } = require('../../mock-data/tags');
 const { levels } = require('../../mock-data/levels');
 const { users } = require('../../mock-data/users');
-const { STAGING_API_URL } = require('../../mock-data/constants');
+const {
+  STAGING_API_URL,
+  SKILL_TREE_BACKEND_BASE_URL,
+} = require('../../mock-data/constants');
+const { skills } = require('../../mock-data/skills');
 
-describe('Input box', () => {
+describe('Task Form', () => {
   let browser;
   let page;
   jest.setTimeout(60000);
@@ -27,6 +31,7 @@ describe('Input box', () => {
           [`${STAGING_API_URL}/levels`]: levels,
           [`${STAGING_API_URL}/users`]: users,
           [`${STAGING_API_URL}/tags`]: tags,
+          [`${SKILL_TREE_BACKEND_BASE_URL}/skills`]: skills,
         };
 
         if (mockResponses[url]) {
@@ -136,7 +141,7 @@ describe('Input box', () => {
 
   // Dev Mode Tests
   describe('Dev Mode Behavior', () => {
-    beforeAll(async () => {
+    beforeEach(async () => {
       await page.goto('http://localhost:8000/task?dev=true');
       await page.waitForNetworkIdle();
     });
@@ -172,5 +177,92 @@ describe('Input box', () => {
       const dependsOnField = await page.$('[data-testid="dependsOn"]');
       expect(dependsOnField).toBeTruthy();
     });
+
+    it('should show skills multi-select component', async () => {
+      const skillsComponent = await page.$eval(
+        '[data-testid="skills"] .multi-select-container',
+        (el) =>
+          window.getComputedStyle(el.closest('[data-testid="skills"]')).display,
+      );
+      expect(skillsComponent).not.toBe('none');
+    });
+
+    it('should initialize skills multi-select with options', async () => {
+      await page.waitForSelector('[data-testid="skills-multi-select"]');
+
+      // Click to open dropdown
+      await page.click('[data-testid="skills-select-button"]');
+
+      // Check if options are loaded
+      const options = await page.$$eval(
+        '[data-testid="option-label"]',
+        (elements) => elements.map((el) => el.textContent.trim()),
+      );
+
+      expect(options).toContain('(Select All)');
+      expect(options).toContain('JavaScript');
+      expect(options).toContain('React');
+      expect(options).toContain('Node.js');
+    });
+
+    it('should allow selecting and deselecting skills', async () => {
+      await page.waitForSelector('[data-testid="skills-multi-select"]');
+
+      // Open dropdown
+      await page.click('[data-testid="skills-select-button"]');
+
+      // Select JavaScript skill
+      await page.click('[data-value="1"]');
+
+      // Check if badge is created
+      const badge = await page.$eval(
+        '[data-testid="selected-items"] .badge .text',
+        (el) => el.textContent,
+      );
+      expect(badge).toBe('JavaScript');
+
+      // Remove skill
+      await page.click('.badge .remove');
+
+      // Check if badge is removed
+      const badges = await page.$$('.badge');
+      expect(badges.length).toBe(0);
+    });
+
+    it('should allow selecting all skills with (Select All)', async () => {
+      await page.waitForSelector('[data-testid="skills-multi-select"]');
+
+      // Open dropdown
+      await page.click('[data-testid="skills-select-button"]');
+
+      // Click (Select All)
+      await page.click('[data-testid="option"][data-value="select-all"]');
+
+      // Check if all skills are selected as badges
+      const badges = await page.$$eval(
+        '[data-testid="selected-items"] .badge .text',
+        (elements) => elements.map((el) => el.textContent.trim()),
+      );
+      expect(badges).toEqual(['JavaScript', 'React', 'Node.js']);
+    });
+
+    it('should allow navigating and selecting options using the keyboard', async () => {
+      await page.waitForSelector('[data-testid="skills-multi-select"]');
+
+      // Open dropdown
+      await page.click('[data-testid="skills-select-button"]');
+
+      // Navigate and select an option
+      await page.keyboard.press('ArrowDown');
+      await page.keyboard.press('ArrowDown');
+      await page.keyboard.press('Enter');
+
+      // Verify badge is created
+      const badges = await page.$$eval(
+        '[data-testid="selected-items"] .badge .text',
+        (elements) => elements.map((el) => el.textContent.trim()),
+      );
+      expect(badges).toContain('JavaScript');
+    });
   });
 });
diff --git a/mock-data/constants.js b/mock-data/constants.js
index 2b5b6238..c76fd0fb 100644
--- a/mock-data/constants.js
+++ b/mock-data/constants.js
@@ -1,7 +1,10 @@
 const STAGING_API_URL = 'https://staging-api.realdevsquad.com';
 const LOCAL_TEST_PAGE_URL = 'http://localhost:8000';
+const SKILL_TREE_BACKEND_BASE_URL =
+  'https://services.realdevsquad.com/skilltree/v1';
 
 module.exports = {
   STAGING_API_URL,
   LOCAL_TEST_PAGE_URL,
+  SKILL_TREE_BACKEND_BASE_URL,
 };
diff --git a/mock-data/skills/index.js b/mock-data/skills/index.js
new file mode 100644
index 00000000..c01a627c
--- /dev/null
+++ b/mock-data/skills/index.js
@@ -0,0 +1,7 @@
+const skills = [
+  { id: 1, name: 'JavaScript' },
+  { id: 2, name: 'React' },
+  { id: 3, name: 'Node.js' },
+];
+
+module.exports = { skills };
diff --git a/task/index.html b/task/index.html
index b0dc59df..b31da4d3 100644
--- a/task/index.html
+++ b/task/index.html
@@ -101,6 +101,53 @@
           />
           <span id="linksDisplay" class="display"></span>
         </div>
+        <div class="inputBox" id="skillsContainer" data-testid="skills">
+          <label for="">Skills: </label>
+          <div class="multi-select-container" data-testid="skills-multi-select">
+            <button
+              type="button"
+              class="multi-select-button"
+              data-testid="skills-select-button"
+            >
+              <span class="placeholder">Select skills</span>
+              <div class="selected-items" data-testid="selected-items"></div>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="dropdown-icon"
+              >
+                <path d="m6 9 6 6 6-6"></path>
+              </svg>
+            </button>
+            <div class="popover">
+              <input
+                type="text"
+                class="search-input"
+                placeholder="Search..."
+                data-testid="search-input"
+              />
+              <div class="options-list" data-testid="options-list">
+                <div
+                  class="option"
+                  data-value="select-all"
+                  data-testid="option"
+                >
+                  <span class="option-label" data-testid="option-label"
+                    >(Select All)</span
+                  >
+                  <span class="checkbox" data-testid="option-checkbox"></span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
         <div class="inputBox" data-testid="status">
           <label for="status" class="editable">
             Status:<span class="required">*</span>
diff --git a/task/script.js b/task/script.js
index a231a7f5..5ced8fdb 100644
--- a/task/script.js
+++ b/task/script.js
@@ -1,4 +1,6 @@
 const API_BASE_URL = window.API_BASE_URL;
+const SKILLS_API = 'https://services.realdevsquad.com/skilltree/v1/skills';
+
 const suggestedUsers = [];
 const allUser = [];
 
@@ -25,6 +27,260 @@ function hideElements(isDev, elementIds) {
 // hide fields if dev=true
 hideElements(isDev, containers);
 
+//Skills field under dev=true
+const skillsContainer = document.getElementById('skillsContainer');
+
+if (!isDev && skillsContainer) {
+  skillsContainer.style.display = 'none';
+}
+
+async function fetchSkills() {
+  if (!isDev) return [];
+
+  try {
+    const response = await fetch(SKILLS_API, {
+      credentials: 'include',
+    });
+    return await response.json();
+  } catch (error) {
+    alert(`Error fetching skills: ${error}`);
+    return [];
+  }
+}
+
+class MultiSelect {
+  constructor(container) {
+    this.container = container;
+    this.selectedValues = new Set();
+    this.button = container.querySelector('.multi-select-button');
+    this.selectedItemsContainer = container.querySelector('.selected-items');
+    this.placeholder = container.querySelector('.placeholder');
+    this.popover = container.querySelector('.popover');
+    this.searchInput = container.querySelector('.search-input');
+    this.optionsList = container.querySelector('.options-list');
+    this.options = [];
+    this.focusedIndex = -1;
+
+    this.initializeSkills();
+    this.bindEvents();
+  }
+
+  async initializeSkills() {
+    try {
+      const skills = await fetchSkills();
+      this.options = skills.map((skill) => ({
+        value: skill.id.toString(),
+        label: skill.name,
+      }));
+      this.init();
+    } catch (error) {
+      alert(`Error Initializing skills: ${error}`);
+    }
+  }
+
+  getSelectedSkills() {
+    return Array.from(this.selectedValues)
+      .map((value) => {
+        const option = this.options.find((opt) => opt.value === value);
+        return option
+          ? {
+              id: option.value,
+              name: option.label,
+            }
+          : null;
+      })
+      .filter(Boolean);
+  }
+
+  init() {
+    this.options.forEach((option) => {
+      const optionElement = document.createElement('div');
+      optionElement.className = 'option';
+      optionElement.dataset.testid = 'option';
+      optionElement.dataset.value = option.value;
+      optionElement.innerHTML = `
+      <span class="option-label" data-testid="option-label">${option.label}</span>
+      <span class="checkbox" data-testid="option-checkbox"></span>
+      `;
+      this.optionsList.appendChild(optionElement);
+    });
+  }
+  bindEvents() {
+    this.button.addEventListener('click', () => this.togglePopover());
+
+    this.optionsList.addEventListener('click', (e) => {
+      const option = e.target.closest('.option');
+      if (option) {
+        const value = option.dataset.value;
+        if (value === 'select-all') {
+          this.toggleAll();
+        } else {
+          this.toggleOption(value);
+        }
+      }
+    });
+
+    this.searchInput.addEventListener('keydown', (e) => this.handleKeydown(e));
+    this.searchInput.addEventListener('input', (e) => {
+      const searchText = e.target.value.toLowerCase();
+      const options = this.optionsList.querySelectorAll(
+        '.option:not([data-value="select-all"])',
+      );
+      options.forEach((option) => {
+        const text = option.textContent.toLowerCase();
+        option.style.display = text.includes(searchText) ? '' : 'none';
+      });
+    });
+
+    document.addEventListener('click', (e) => {
+      if (!this.container.contains(e.target)) {
+        this.closePopover();
+      }
+    });
+  }
+
+  handleKeydown(e) {
+    const visibleOptions = Array.from(
+      this.optionsList.querySelectorAll('.option'),
+    ).filter((option) => option.style.display !== 'none');
+
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        this.focusedIndex = Math.min(
+          this.focusedIndex + 1,
+          visibleOptions.length - 1,
+        );
+        this.updateFocusedOption(visibleOptions);
+        break;
+
+      case 'ArrowUp':
+        e.preventDefault();
+        this.focusedIndex = Math.max(this.focusedIndex - 1, 0);
+        this.updateFocusedOption(visibleOptions);
+        break;
+
+      case 'Enter':
+        e.preventDefault();
+        if (this.focusedIndex >= 0) {
+          const focusedOption = visibleOptions[this.focusedIndex];
+          const value = focusedOption.dataset.value;
+          if (value === 'select-all') {
+            this.toggleAll();
+          } else {
+            this.toggleOption(value);
+          }
+        }
+        break;
+
+      case 'Escape':
+        this.closePopover();
+        break;
+    }
+  }
+
+  updateFocusedOption(options) {
+    options.forEach((option, index) => {
+      if (index === this.focusedIndex) {
+        option.classList.add('focused');
+        option.scrollIntoView({ block: 'nearest' });
+      } else {
+        option.classList.remove('focused');
+      }
+    });
+  }
+
+  createBadge(option) {
+    const badge = document.createElement('div');
+    badge.className = 'badge';
+    badge.innerHTML = `
+      <span class="text">${option.label}</span>
+      <span class="remove">×</span>
+    `;
+
+    badge.querySelector('.remove').addEventListener('click', (e) => {
+      e.stopPropagation();
+      this.toggleOption(option.value);
+    });
+    return badge;
+  }
+
+  togglePopover() {
+    const isVisible = this.popover.style.display === 'block';
+    this.popover.style.display = isVisible ? 'none' : 'block';
+    if (!isVisible) {
+      this.searchInput.focus();
+      this.searchInput.value = '';
+      this.focusedIndex = -1;
+      const options = this.optionsList.querySelectorAll('.option');
+      options.forEach((option) => {
+        option.style.display = '';
+        option.classList.remove('focused');
+      });
+    }
+  }
+
+  closePopover() {
+    this.popover.style.display = 'none';
+  }
+
+  toggleOption(value) {
+    if (this.selectedValues.has(value)) {
+      this.selectedValues.delete(value);
+    } else {
+      this.selectedValues.add(value);
+    }
+    this.updateUI();
+  }
+
+  toggleAll() {
+    if (this.selectedValues.size === this.options.length) {
+      this.clearSelection();
+    } else {
+      this.options.forEach((option) => this.selectedValues.add(option.value));
+    }
+    this.updateUI();
+  }
+
+  clearSelection() {
+    this.selectedValues.clear();
+    this.updateUI();
+  }
+
+  updateUI() {
+    this.selectedItemsContainer.innerHTML = '';
+    this.placeholder.style.display = this.selectedValues.size ? 'none' : '';
+
+    const selectedOptions = Array.from(this.selectedValues)
+      .map((value) => this.options.find((opt) => opt.value === value))
+      .filter(Boolean);
+
+    selectedOptions.forEach((option) => {
+      this.selectedItemsContainer.appendChild(this.createBadge(option));
+    });
+
+    this.optionsList.querySelectorAll('.option').forEach((option) => {
+      const checkbox = option.querySelector('.checkbox');
+      if (option.dataset.value === 'select-all') {
+        checkbox.classList.toggle(
+          'checked',
+          this.selectedValues.size === this.options.length,
+        );
+      } else {
+        checkbox.classList.toggle(
+          'checked',
+          this.selectedValues.has(option.dataset.value),
+        );
+      }
+    });
+  }
+}
+
+// Initialize the component
+const multiSelect = new MultiSelect(
+  document.querySelector('.multi-select-container'),
+);
+
 const category = document.getElementById('category');
 
 category.addEventListener('change', async () => {
@@ -228,6 +484,7 @@ taskForm.onsubmit = async (e) => {
     delete dataToBeSent.participants;
 
     dataToBeSent.assignee = assignee.trim() ? assignee : ' ';
+    dataToBeSent.skills = multiSelect.getSelectedSkills();
   } else {
     if (dataToBeSent.featureUrl.trim() === '') {
       delete dataToBeSent.featureUrl;
diff --git a/task/style.css b/task/style.css
index d6864cf8..26c11a52 100644
--- a/task/style.css
+++ b/task/style.css
@@ -68,12 +68,10 @@ body {
   border: 1px solid #666;
   resize: vertical;
 }
-
 .radioButtons {
   display: flex;
   flex-direction: row;
 }
-
 .checkBox {
   display: flex;
   flex-direction: row;
@@ -103,7 +101,6 @@ body {
   color: red;
   font-size: medium;
 }
-
 #category,
 #level,
 #status,
@@ -279,3 +276,148 @@ footer {
   border-radius: 50%;
   margin: 0 1rem;
 }
+/* Skills field */
+/* Multi-select container styles */
+.multi-select-container {
+  position: relative;
+  width: 100%;
+}
+
+.multi-select-button {
+  display: flex;
+  align-items: center;
+  min-height: 48px;
+  padding: 0.5rem;
+  width: 100%;
+  border: 1px solid #666;
+  border-radius: 5px;
+  background: white;
+  cursor: pointer;
+  text-align: left;
+}
+
+.multi-select-button .placeholder {
+  color: #666;
+}
+
+.selected-items {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  flex: 1;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  background: #f0f0f0;
+  border-radius: 16px;
+  padding: 0.25rem 0.75rem;
+  font-size: 0.875rem;
+  margin-right: 4px;
+}
+
+.badge .text {
+  margin-right: 4px;
+}
+
+.badge .remove {
+  cursor: pointer;
+  font-size: 1.2rem;
+  line-height: 1;
+  padding: 0 2px;
+}
+
+.dropdown-icon {
+  margin-left: auto;
+  width: 16px;
+  height: 16px;
+}
+
+.popover {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin-top: 4px;
+  background: white;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+}
+
+.search-input {
+  width: 100%;
+  padding: 0.75rem;
+  border: none;
+  border-bottom: 1px solid #ddd;
+  outline: none;
+}
+
+.options-list {
+  max-height: 320px;
+  padding: 4px;
+  overflow-y: auto;
+}
+
+.option {
+  color: #101828;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-radius: 4px;
+  margin: 2px 0;
+}
+
+.option:hover {
+  background-color: #f5f5f5;
+}
+
+.option.focused {
+  background-color: #f0f0f0;
+}
+
+.popover .checkbox {
+  width: 20px;
+  height: 20px;
+  border: none;
+  position: relative;
+}
+
+.popover .checkbox.checked::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 6px;
+  height: 12px;
+  border: solid #4945ff;
+  border-width: 0 2px 2px 0;
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+.option-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Custom scrollbar */
+.options-list::-webkit-scrollbar {
+  width: 4px;
+}
+
+.options-list::-webkit-scrollbar-track {
+  background: #f5f5f5;
+}
+
+.options-list::-webkit-scrollbar-thumb {
+  background: #dedede;
+  border-radius: 4px;
+}
+
+.options-list::-webkit-scrollbar-thumb:hover {
+  background: #cdcdcd;
+}