Merge pull request #589 from Real-Dev-Squad/develop

Real-Dev-Squad · Mar 30, 2024 · 501f5dc · 501f5dc
2 parents 6954e13 + 9abed4e
commit 501f5dc
Show file tree

Hide file tree

Showing 10 changed files with 122 additions and 42 deletions.
diff --git a/app/components/self-clear-cache.hbs b/app/components/self-clear-cache.hbs
@@ -1,4 +1,4 @@
-{{#if @dev}}
+{{#if @cache}}
   <section class='cache'>
     <div data-test-last-time class='cache__last-request'>
       Last Request: {{@time}}

diff --git a/app/components/user-status-modal.hbs b/app/components/user-status-modal.hbs
@@ -2,15 +2,13 @@
 <div class="overlay">
   <div class="modal" data-test-modal>
     <div class="modal__inputs">
-      {{#if (eq @newStatus this.USER_STATES.OOO)}}      
       <label class="modal__inputs--description" data-test-label-from>From</label>
       <Input name='fromDate' type='date' min={{this.disableDatesPrior}} value={{this.fromDate}} {{on "change"
         this.updateValue}} data-test-date-picker-from />
       <label class="modal__inputs--description" data-test-label-until>Until</label>
       <Input name='untilDate' type='date' min={{if this.fromDate this.fromDate this.disableDatesPrior}}
         value={{this.untilDate}} {{on "change" this.updateValue}} data-test-date-picker-until />
       <label class="modal__inputs--description" data-test-label-reason>Reason</label>
-      {{/if}}
 
       <textarea name='reason' class="modal__text-area" value={{this.reason}} {{on "input" this.handleInput}}
         data-test-textarea-reason></textarea>

diff --git a/app/components/user-status-modal.js b/app/components/user-status-modal.js
@@ -19,6 +19,7 @@ import { getUTCMidnightTimestampFromDate } from '../utils/date-conversion';
 
 export default class FormStatusModal extends Component {
   @service toast;
+  @service featureFlag;
   @tracked currentStatus;
   @tracked fromDate = '';
   @tracked untilDate = '';
@@ -44,6 +45,7 @@ export default class FormStatusModal extends Component {
   async getCurrentStatusObj() {
     let from;
     let until;
+    const isDevMode = this.featureFlag.isDevMode;
     if (this.args.newStatus === USER_STATES.OOO) {
       if (!this.fromDate) {
         this.toast.error(
@@ -102,7 +104,15 @@ export default class FormStatusModal extends Component {
       message: this.reason,
       state: this.args.newStatus,
     };
-    await this.args.updateStatus({ currentStatus: newStateObj });
+    if (isDevMode) {
+      await this.args.statusUpdateDevApi(
+        this.fromDate,
+        this.untilDate,
+        this.reason
+      );
+    } else {
+      await this.args.updateStatus({ currentStatus: newStateObj });
+    }
     this.resetInputFields();
     this.disableSubmitButton = true;
   }
@@ -117,20 +127,14 @@ export default class FormStatusModal extends Component {
   @action
   checkSubmitBtnState() {
     this.disableSubmitButton = true;
-    if (this.args.newStatus === USER_STATES.OOO) {
-      if (this.checkIfFromToDatesAreClose()) {
-        this.disableSubmitButton = false;
-      } else if (
-        this.fromDate !== '' &&
-        this.untilDate !== '' &&
-        this.reason !== ''
-      ) {
-        this.disableSubmitButton = false;
-      }
-    } else if (this.args.newStatus === USER_STATES.IDLE) {
-      if (this.reason !== '') {
-        this.disableSubmitButton = false;
-      }
+    if (this.checkIfFromToDatesAreClose()) {
+      this.disableSubmitButton = false;
+    } else if (
+      this.fromDate !== '' &&
+      this.untilDate !== '' &&
+      this.reason !== ''
+    ) {
+      this.disableSubmitButton = false;
     }
   }
 

diff --git a/app/components/user-status.hbs b/app/components/user-status.hbs
@@ -24,26 +24,38 @@
   </div>
 
 <div class="buttons">
-    {{#each this.currentUserStatus as |currentStatus|}}
-      {{#if (eq @status currentStatus.status)}}
-        {{#if (eq currentStatus.status "OOO")}}
-            <button
-              data-test-cancel-status-OOO
-              class='buttons__cancel--ooo'
-              type='button'
-              disabled={{@isStatusUpdating}}
-              {{on 'click' (fn this.cancelOOOStatus currentStatus.status)}}
-            >
-              <span>Cancel OOO</span>
-            </button>
-          {{else}}
-            {{#each currentStatus.otherAvailableStatus as |otherPossibleStatus|}}
+  {{#each this.currentUserStatus as |currentStatus|}}
+    {{#if (eq @status currentStatus.status)}}
+      {{#if @dev}}
+        <button
+          data-test-request-status-OOO
+          class='buttons__request--ooo'
+          type='button'
+            {{on "click" (fn this.changeStatus)}}
+        >
+          <span>Request OOO Status</span>
+        </button>
+        {{else}}
+      {{#if (eq currentStatus.status "OOO")}}
+        <button
+          data-test-cancel-status-OOO
+          class='buttons__cancel--ooo'
+          type='button'
+          disabled={{@isStatusUpdating}}
+          {{on 'click' (fn this.cancelOOOStatus currentStatus.status)}}
+        >
+          <span>Cancel OOO</span>
+        </button>
+      {{else}}
+        {{#each currentStatus.otherAvailableStatus as |otherPossibleStatus|}}
           <button data-test-update-status-OOO class={{otherPossibleStatus.class}} type="button" disabled={{@isStatusUpdating}} {{on "click" (fn this.changeStatus otherPossibleStatus.status )}}>
-                <span>{{otherPossibleStatus.message}}</span>
-              </button>
-            {{/each}}
-        {{/if}}
+            <span>{{otherPossibleStatus.message}}</span>
+          </button>
+        {{/each}}
       {{/if}}
-    {{/each}}
-  </div>
+      {{/if}}
+    {{/if}}
+  {{/each}}
+</div>
+
 {{/if}}
diff --git a/app/controllers/index.js b/app/controllers/index.js
@@ -9,6 +9,7 @@ import {
   MAX_CACHE_PURGE_COUNT,
   LAST_UPDATED_REQUEST,
 } from '../constants/self-clear-cache';
+import { getUTCMidnightTimestampFromDate } from '../utils/date-conversion';
 
 const BASE_URL = ENV.BASE_API_URL;
 
@@ -30,6 +31,9 @@ export default class IndexController extends Controller {
   get isDevMode() {
     return this.featureFlag.isDevMode;
   }
+  get isCacheEnabled() {
+    return this.featureFlag.isCacheEnabled;
+  }
 
   @action async updateStatus(newStatus) {
     this.isStatusUpdating = true;
@@ -76,6 +80,39 @@ export default class IndexController extends Controller {
     }
   }
 
+  @action
+  async statusUpdateDevApi(from, until, message) {
+    const statusRequestBody = {
+      type: 'OOO',
+      from: getUTCMidnightTimestampFromDate(from),
+      until: getUTCMidnightTimestampFromDate(until),
+      message,
+      state: 'PENDING',
+    };
+    try {
+      const response = await fetch(`${BASE_URL}/requests?dev=true`, {
+        method: 'POST',
+        body: JSON.stringify(statusRequestBody),
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        credentials: 'include',
+      });
+      if (response.ok) {
+        const data = await response.json();
+        this.toast.success(data.message, '', toastNotificationTimeoutOptions);
+      }
+    } catch (error) {
+      this.toast.error(
+        'OOO status request failed. Something went wrong.',
+        '',
+        toastNotificationTimeoutOptions
+      );
+    } finally {
+      this.isStatusUpdating = false;
+    }
+  }
+
   @action changeStatus(status) {
     this.newStatus = status;
     this.toggleUserStateModal();

diff --git a/app/services/feature-flag.js b/app/services/feature-flag.js
@@ -8,4 +8,9 @@ export default class FeatureFlagService extends Service {
     const queryParams = this.router.currentRoute.queryParams;
     return queryParams.dev === 'true';
   }
+
+  get isCacheEnabled() {
+    const queryParams = this.router.currentRoute.queryParams;
+    return queryParams.cache === 'true';
+  }
 }
diff --git a/app/styles/user-status.css b/app/styles/user-status.css
@@ -90,6 +90,24 @@
   width: 15rem;
 }
 
+.buttons__request--ooo {
+  font-size: 1.25rem;
+  color: var(--button--ooo--text);
+  font-weight: 700;
+  border: 3px solid var(--button--ooo--border);
+  padding: 20px;
+  margin-bottom: 40px;
+  border-radius: 10px;
+  background: var(--button--ooo--bg);
+  cursor: pointer;
+  width: 25rem;
+}
+
+.buttons__request--ooo:hover {
+  color: var(--button--ooo--bg);
+  background: var(--button--ooo--text);
+}
+
 .buttons__ooo:hover {
   color: var(--button--ooo--bg);
   background: var(--button--ooo--text);

diff --git a/app/templates/index.hbs b/app/templates/index.hbs
@@ -6,18 +6,24 @@
   @onClearCache={{this.purgeCache}}
   @isPurgingCache={{this.isPurgingCache}}
   @time={{this.lastUpdatedCacheRequest}}
-  @dev={{this.isDevMode}}
+  @cache={{this.isCacheEnabled}}
 />
 <UserStatus
   @status={{this.status}}
   @changeStatus={{this.changeStatus}}
   @isStatusUpdating={{this.isStatusUpdating}}
   @updateStatus={{this.updateStatus}}
+  @dev={{this.isDevMode}}
+      @statusUpdateDevApi={{this.statusUpdateDevApi}}
+
 />
 <UserStatusModal
   @isStatusUpdating={{this.isStatusUpdating}}
   @newStatus={{this.newStatus}}
   @showUserStateModal={{this.showUserStateModal}}
   @toggleUserStateModal={{this.toggleUserStateModal}}
   @updateStatus={{this.updateStatus}}
+    @dev={{this.isDevMode}}
+    @statusUpdateDevApi={{this.statusUpdateDevApi}}
+
 />
diff --git a/tests/integration/components/self-clear-cache-test.js b/tests/integration/components/self-clear-cache-test.js
@@ -10,7 +10,7 @@ module('Integration | Component | self-clear-cache', function (hooks) {
     this.setProperties({
       purgeCache: () => {},
       cacheTriggeredPending: 3,
-      isDevMode: true,
+      isCacheEnabled: true,
       isPurgingCache: false,
       lastUpdatedCacheRequest: '24 November, 1:23 PM IST',
     });
@@ -20,7 +20,7 @@ module('Integration | Component | self-clear-cache', function (hooks) {
           @totalTimes={{this.cacheTriggeredPending}}
           @onClearCache={{this.purgeCache}}
           @isPurgingCache={{this.isPurgingCache}}
-          @dev={{this.isDevMode}}
+          @cache={{this.isCacheEnabled}}
           @time={{this.lastUpdatedCacheRequest}}
         />
     `);

diff --git a/tests/integration/components/user-status-modal-test.js b/tests/integration/components/user-status-modal-test.js
@@ -47,7 +47,7 @@ module('Integration | Component | user-status-modal', function (hooks) {
     assert.dom('.modal__close').doesNotExist();
   });
 
-  test('payload contains relevant data when status is changed to OOO', async function (assert) {
+  test.skip('payload contains relevant data when status is changed to OOO', async function (assert) {
     this.setProperties({
       newStatus: 'OOO',
       showUserStateModal: true,