[Fix] - Task Card Enhacement (milestone-1)

app/components/task-tabs.hbs

@@ -3,7 +3,7 @@
     class='task-tabs__dropdown-container
       {{if @showTasks "task-tabs__dropdown-active"}}'
   >
-    {{#each @taskStatusList as |status|}}
+    {{#each this.removedTaskTabs as |status|}}
       <button
         data-test-task-tabs-button
         href='#'

app/components/task-tabs.js

@@ -0,0 +1,28 @@
+import Component from '@glimmer/component';
+import { TASK_KEYS } from 'website-my/constants/tasks';
+
+export default class TaskTabsComponent extends Component {
+  TASK_KEYS = TASK_KEYS;
+  availabletaskTabsList = this.args.taskStatusList;
+
+  get removedTaskTabs() {
+    const statusToDisplay = this.availabletaskTabsList.filter((taskStatus) => {
+      if (this.args.dev === true) {
+        if (
+          taskStatus.key !== TASK_KEYS.VERIFIED &&
+          taskStatus.key !== TASK_KEYS.RELEASED &&
+          taskStatus.key !== TASK_KEYS.APPROVED &&
+          taskStatus.key !== TASK_KEYS.COMPLETED &&
+          taskStatus.key !== TASK_KEYS.NEEDS_REVIEW
+        ) {
+          return true;
+        } else {
+          return false;
+        }
+      } else {
+        return taskStatus;
+      }
+    });
+    return statusToDisplay;
+  }
+}

app/components/task/holder.hbs

@@ -31,33 +31,44 @@
       {{/if}}
     {{/if}}
 
-    {{#if (not-eq this.status this.TASK_KEYS.VERIFIED)}}
-      <div class='task-update-container'>
-        <label id='task-update-label' for='task-update'><b>Status:</b></label>
-        <select
-          data-test-task-status-select
-          id='task-update'
-          {{on 'change' this.onStatusChange}}
-        >
-          {{#each this.taskStatusList as |taskStatus|}}
-            <option
-              data-test-dropdown-option={{taskStatus.displayLabel}}
-              value={{taskStatus.key}}
-              selected={{eq taskStatus.key this.status}}
-            >
-              {{taskStatus.displayLabel}}
-            </option>
-          {{/each}}
-        </select>
-      </div>
-    {{/if}}
+    <div class='task-update-container'>
+      <label id='task-update-label' for='task-update'><b>Status:</b></label>
+      <select
+        data-test-task-status-select
+        id='task-update'
+        {{on 'change' this.onStatusChange}}
+        disabled={{eq @task.status this.TASK_KEYS.DONE}}
+      >
+        {{#each this.removedTaskStatus as |taskStatus|}}
+          <option
+            data-test-dropdown-option={{taskStatus.displayLabel}}
+            value={{taskStatus.key}}
+            selected={{eq taskStatus.key this.status}}
+          >
+            {{taskStatus.displayLabel}}
+          </option>
+        {{/each}}
+      </select>
+    </div>
 
-    <button
-      class='task-card__extensionForm-button'
-      data-test-task-extensionForm-button
-      type='button'
-      {{on 'click' this.toggleExtensionForm}}
-    >Extension Status</button>
+    {{#if @dev}}
+      {{#if (not-eq @task.status this.TASK_KEYS.DONE)}}
+        <button
+          class='task-card__extensionForm-button'
+          data-test-task-extensionForm-button
+          type='button'
+          {{on 'click' this.toggleExtensionForm}}
+        > Request Extension </button>
+      {{/if}}
+    {{else}}
+      <button
+        class='task-card__extensionForm-button'
+        data-test-task-extensionForm-button
+        type='button'
+        {{on 'click' this.toggleExtensionForm}}
+      > Extension Status</button>
+
+    {{/if}}
 
     {{#if this.isLoading}}
       <div data-test-task-spinner class='task-card__loader-container'>

app/components/task/holder.js

@@ -27,6 +27,33 @@ export default class TasksHolderComponent extends Component {
     return statusToDisplay;
   }
 
+  get removedTaskStatus() {
+    const statusToDisplay = this.availabletaskStatusList.filter(
+      (taskStatus) => {
+        if (this.args.dev === true) {
+          if (
+            taskStatus.key !== TASK_KEYS.ALL &&
+            taskStatus.key !== TASK_KEYS.VERIFIED &&
+            taskStatus.key !== TASK_KEYS.RELEASED &&
+            taskStatus.key !== TASK_KEYS.REGRESSION_CHECK &&
+            taskStatus.key !== TASK_KEYS.SANITY_CHECK &&
+            taskStatus.key !== TASK_KEYS.APPROVED &&
+            taskStatus.key !== TASK_KEYS.SMOKE_TESTING &&
+            taskStatus.key !== TASK_KEYS.COMPLETED &&
+            taskStatus.key !== TASK_KEYS.NEEDS_REVIEW
+          ) {
+            return true;
+          } else {
+            return false;
+          }
+        } else {
+          return taskStatus;
+        }
+      }
+    );
+    return statusToDisplay;
+  }
+
   get taskStyleClass() {
     const statusNotOverDueList = [
       this.args.dev === true ? TASK_KEYS.DONE : TASK_KEYS.COMPLETED,

app/constants/tasks.js

@@ -65,10 +65,7 @@ const TASK_STATUS_LIST = [
     displayLabel: 'Completed',
     key: COMPLETED,
   },
-  {
-    displayLabel: 'Done',
-    key: DONE,
-  },
+
   {
     displayLabel: 'Needs Review',
     key: NEEDS_REVIEW,
@@ -77,6 +74,10 @@ const TASK_STATUS_LIST = [
     displayLabel: 'In Review',
     key: IN_REVIEW,
   },
+  {
+    displayLabel: 'Done',
+    key: DONE,
+  },
   {
     displayLabel: 'Approved',
     key: APPROVED,
@@ -132,6 +133,10 @@ const TABS_TASK_STATUS_LIST = [
     displayLabel: 'Merged',
     key: MERGED,
   },
+  {
+    displayLabel: 'Done',
+    key: DONE,
+  },
   {
     displayLabel: 'Verified',
     key: VERIFIED,

app/styles/tasks.css

@@ -18,7 +18,7 @@
 }
 
 .progress-bar-red {
-  --progress-bar-color:rgba(255, 0, 0, 0.8);
+  --progress-bar-color: rgba(255, 0, 0, 0.8);
 }
 .progress-bar-yellow {
   --progress-bar-color: rgba(255, 255, 0, 0.9);
@@ -28,7 +28,7 @@
   --progress-bar-color: rgba(0, 128, 0, 0.9);
 }
 .progress-bar-orange {
-  --progress-bar-color: rgba(255, 165, 0,0.9);
+  --progress-bar-color: rgba(255, 165, 0, 0.9);
 }
 
 .tasks-page {
@@ -196,11 +196,17 @@
   transition: 250ms ease-in-out;
 }
 
-#task-update:hover {
+#task-update:hover:not([disabled]) {
   background-color: var(--primary-text-color);
   color: var(--white);
 }
 
+#task-update:disabled {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  border: none;
+}
+
 .task-details__title {
   text-decoration: none;
   font-size: 1.4rem;
@@ -384,7 +390,7 @@
   color: var(--primary-text-color);
   transition: 0.25s ease-in-out;
   height: 2.5rem;
-  width: 10rem;
+  width: auto;
   flex-shrink: 0;
 }
 
@@ -608,18 +614,18 @@
   white-space: normal;
 }
 
-  .multiple-extension-form__container-close {
-    background-color:#a70606;
-    color: var(--button-proceed--text);
-    font-size: 1.2rem;
-    border: none;
-    border-radius: 8px;
-    padding: 5px 9px;
-    width: 40%;
-    display: flex;
-    justify-content: center;
-    margin:0 auto;
-  }
+.multiple-extension-form__container-close {
+  background-color: #a70606;
+  color: var(--button-proceed--text);
+  font-size: 1.2rem;
+  border: none;
+  border-radius: 8px;
+  padding: 5px 9px;
+  width: 40%;
+  display: flex;
+  justify-content: center;
+  margin: 0 auto;
+}
 
 .error-message {
   color: red;
@@ -630,7 +636,6 @@
   width: 100%;
 }
 
-
 .error-placeholder {
   color: red;
   text-align: center;
@@ -647,16 +652,15 @@
   background-color: #888;
 }
 
-
-.multiple-extension-form__open-button:hover ,
+.multiple-extension-form__open-button:hover,
 .multiple-extension-form__create-button:hover {
   background-color: #01ad01;
   color: #fff;
 }
 
-.multiple-extension-form__container-close:hover{
+.multiple-extension-form__container-close:hover {
   background-color: #d50707;
-  color:#fff
+  color: #fff;
 }
 
 .multiple-extension-form__create-button {
@@ -670,24 +674,25 @@
   width: 40%;
   display: flex;
   justify-content: center;
-  margin:0 auto;
+  margin: 0 auto;
   border: none;
   border-radius: 8px;
   padding: 5px 9px;
   transition: background-color 0.3s ease;
 }
 
-  .latest-extension-info__content th {
-    text-align: right;
-    width: 50%;
-  }
+.latest-extension-info__content th {
+  text-align: right;
+  width: 50%;
+}
 
-.latest-extension-info__content th, td {
+.latest-extension-info__content th,
+td {
   padding: 8px 2px;
   vertical-align: top;
   min-width: 50%;
 }
-.latest-table{
+.latest-table {
   width: 100%;
 }
 .latest-extension-info__content th {
@@ -697,7 +702,8 @@
   text-align: left;
   word-wrap: normal;
 }
-tr>th,tr>td{
+tr > th,
+tr > td {
   vertical-align: top;
 }
 
@@ -707,9 +713,9 @@ textarea {
   overflow-y: auto;
 }
 
-div.buttons{
+div.buttons {
   display: flex;
-  flex-direction:row;
+  flex-direction: row;
   min-width: 100%;
   align-content: center;
   justify-content: center;

app/templates/tasks.hbs

@@ -9,6 +9,7 @@
     @userSelectedTaskText={{this.userSelectedTask.displayLabel}}
     @showTasks={{this.showTasks}}
     @toggleTasks={{this.toggleTasks}}
+    @dev={{this.dev}}
   />
 
   <Tasks

tests/integration/components/task-tabs-test.js

@@ -51,8 +51,8 @@ module('Integration | Component | task-tabs', function (hooks) {
       userSelectedTaskText: DEFAULT_TASK_TYPE.displayLabel,
       showTasks: false,
       toggleTasks: () => {},
+      dev: true,
     });
-
     await render(hbs` <TaskTabs
     @taskStatusList={{this.tabsTaskStatusList}}
     @showDropDown={{this.showDropDown}}
@@ -61,6 +61,7 @@ module('Integration | Component | task-tabs', function (hooks) {
     @userSelectedTaskText={{this.userSelectedTaskText}}
     @showTasks={{this.showTasks}}
     @toggleTasks={{this.toggleTasks}}
+    @dev={{this.dev}}
   />`);
 
     assert
@@ -77,6 +78,7 @@ module('Integration | Component | task-tabs', function (hooks) {
     @userSelectedTaskText={{this.userSelectedTaskText}}
     @showTasks={{this.showTasks}}
     @toggleTasks={{this.toggleTasks}}
+    @dev={{this.dev}}
   />`);
 
     assert