Add send test messages functionality, tests and bug fixes (#212)

Signed-off-by: Joshua Li <[email protected]>
opensearch-project · Jul 9, 2021 · 2cf56d4 · 2cf56d4
1 parent 7ce776d
commit 2cf56d4
Show file tree

Hide file tree

Showing 42 changed files with 2,828 additions and 283 deletions.
diff --git a/common/index.ts b/common/index.ts
@@ -39,14 +39,16 @@ export const NODE_API = Object.freeze({
   UPDATE_CONFIG: `${NODE_API_BASE_PATH}/update_config`,
   GET_EVENTS: `${NODE_API_BASE_PATH}/get_events`,
   GET_EVENT: `${NODE_API_BASE_PATH}/get_event`,
-  AVAILABLE_FEATURES: `${NODE_API_BASE_PATH}/features`,
+  GET_AVAILABLE_FEATURES: `${NODE_API_BASE_PATH}/features`,
+  SEND_TEST_MESSAGE: `${NODE_API_BASE_PATH}/test_message`,
 });
 
 // TODO change to _plugins when backend updates
 const OPENSEARCH_API_BASE_PATH = '/_opensearch/_notifications';
 export const OPENSEARCH_API = Object.freeze({
   CONFIGS: `${OPENSEARCH_API_BASE_PATH}/configs`,
   EVENTS: `${OPENSEARCH_API_BASE_PATH}/events`,
+  TEST_MESSAGE: `${OPENSEARCH_API_BASE_PATH}/feature/test`,
   FEATURES: `${OPENSEARCH_API_BASE_PATH}/features`,
 });
 

diff --git a/public/pages/Channels/__tests__/ChannelDetails.test.tsx b/public/pages/Channels/__tests__/ChannelDetails.test.tsx
@@ -55,21 +55,6 @@ describe('<ChannelDetails/> spec', () => {
     expect(utils.container.firstChild).toMatchSnapshot();
   });
 
-  it('clicks mute or unmute button', () => {
-    const props = { match: { params: { id: 'test' } } };
-    const utils = render(
-      <ServicesContext.Provider value={notificationServiceMock}>
-        <CoreServicesContext.Provider value={coreServicesMock}>
-          <ChannelDetails {...(props as RouteComponentProps<{ id: string }>)} />
-        </CoreServicesContext.Provider>
-      </ServicesContext.Provider>
-    );
-
-    const button = utils.getByText('ute channel', { exact: false });
-    fireEvent.click(button);
-    expect(utils.container.firstChild).toMatchSnapshot();
-  });
-
   it('renders a specific channel', async () => {
     const props = { match: { params: { id: 'test' } } };
     const notificationServiceMock = jest.fn() as any;

diff --git a/public/pages/Channels/__tests__/__snapshots__/ChannelDetails.test.tsx.snap b/public/pages/Channels/__tests__/__snapshots__/ChannelDetails.test.tsx.snap
@@ -1,76 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<ChannelDetails/> spec clicks mute or unmute button 1`] = `
-<div
-  class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
-  style="max-width: 1316px;"
->
-  <div
-    class="euiFlexItem euiFlexItem--flexGrowZero"
-  >
-    <div
-      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
-    >
-      <div
-        class="euiFlexItem euiFlexItem--flexGrowZero"
-      >
-        <h1
-          class="euiTitle euiTitle--large"
-        >
-          -
-        </h1>
-      </div>
-      <div
-        class="euiFlexItem euiFlexItem--flexGrowZero"
-        style="padding-bottom: 5px;"
-      />
-    </div>
-  </div>
-  <div
-    class="euiFlexItem"
-  />
-  <div
-    class="euiFlexItem euiFlexItem--flexGrowZero"
-  />
-  <div
-    class="euiFlexItem euiFlexItem--flexGrowZero"
-  >
-    <button
-      class="euiButton euiButton--primary"
-      data-test-subj="channel-details-mute-button"
-      type="button"
-    >
-      <span
-        class="euiButtonContent euiButton__content"
-      >
-        <svg
-          aria-hidden="true"
-          class="euiIcon euiIcon--medium euiButtonContent__icon"
-          focusable="false"
-          height="16"
-          role="img"
-          viewBox="0 0 16 16"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M2.316 12h10.368c-.188-.704-.28-1.691-.348-3.037-.07-1.382-.103-1.888-.19-2.612-.028-.236-.06-.462-.096-.68-.31-1.892-1.506-2.923-3.708-3.131a1 1 0 10-1.684 0c-2.202.208-3.397 1.24-3.708 3.13a16.01 16.01 0 00-.096.68c-.087.725-.12 1.23-.19 2.613-.068 1.346-.16 2.333-.348 3.037zm10.843 1H1.84c-.308.353-.737.5-1.341.5a.5.5 0 110-1c.786 0 1.024-.783 1.166-3.587.07-1.407.105-1.926.196-2.681.03-.25.063-.49.102-.724.334-2.041 1.546-3.313 3.556-3.792a2 2 0 013.96 0c2.01.479 3.222 1.75 3.557 3.792a17 17 0 01.102.724c.09.755.125 1.274.196 2.681.14 2.804.379 3.587 1.165 3.587a.5.5 0 110 1c-.604 0-1.033-.147-1.341-.5zM5.5 14h4a2 2 0 11-4 0z"
-            fill-rule="evenodd"
-          />
-        </svg>
-        <span
-          class="euiButton__text"
-        >
-          Unmute channel
-        </span>
-      </span>
-    </button>
-  </div>
-</div>
-`;
-
 exports[`<ChannelDetails/> spec renders a specific channel 1`] = `
 <div>
+  <div
+    aria-live="polite"
+    class="euiGlobalToastList euiGlobalToastList--right"
+    role="region"
+  />
   <div
     class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
     style="max-width: 1316px;"
@@ -104,38 +40,7 @@ exports[`<ChannelDetails/> spec renders a specific channel 1`] = `
     />
     <div
       class="euiFlexItem euiFlexItem--flexGrowZero"
-    >
-      <button
-        class="euiButton euiButton--primary"
-        data-test-subj="channel-details-mute-button"
-        type="button"
-      >
-        <span
-          class="euiButtonContent euiButton__content"
-        >
-          <svg
-            aria-hidden="true"
-            class="euiIcon euiIcon--medium euiButtonContent__icon"
-            focusable="false"
-            height="16"
-            role="img"
-            viewBox="0 0 16 16"
-            width="16"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M2.316 12h10.368c-.188-.704-.28-1.691-.348-3.037-.07-1.382-.103-1.888-.19-2.612-.028-.236-.06-.462-.096-.68-.31-1.892-1.506-2.923-3.708-3.131a1 1 0 10-1.684 0c-2.202.208-3.397 1.24-3.708 3.13a16.01 16.01 0 00-.096.68c-.087.725-.12 1.23-.19 2.613-.068 1.346-.16 2.333-.348 3.037zm10.843 1H1.84c-.308.353-.737.5-1.341.5a.5.5 0 110-1c.786 0 1.024-.783 1.166-3.587.07-1.407.105-1.926.196-2.681.03-.25.063-.49.102-.724.334-2.041 1.546-3.313 3.556-3.792a2 2 0 013.96 0c2.01.479 3.222 1.75 3.557 3.792a17 17 0 01.102.724c.09.755.125 1.274.196 2.681.14 2.804.379 3.587 1.165 3.587a.5.5 0 110 1c-.604 0-1.033-.147-1.341-.5zM5.5 14h4a2 2 0 11-4 0z"
-              fill-rule="evenodd"
-            />
-          </svg>
-          <span
-            class="euiButton__text"
-          >
-            Unmute channel
-          </span>
-        </span>
-      </button>
-    </div>
+    />
   </div>
   <div
     class="euiSpacer euiSpacer--l"
@@ -224,7 +129,7 @@ exports[`<ChannelDetails/> spec renders a specific channel 1`] = `
               <dd
                 class="euiDescriptionList__description"
               >
-                12/31/69 11:59 pm GMT
+                -
               </dd>
             </dl>
           </div>
@@ -334,64 +239,8 @@ exports[`<ChannelDetails/> spec renders a specific channel 1`] = `
 
 exports[`<ChannelDetails/> spec renders the component 1`] = `
 <div
-  class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
-  style="max-width: 1316px;"
->
-  <div
-    class="euiFlexItem euiFlexItem--flexGrowZero"
-  >
-    <div
-      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
-    >
-      <div
-        class="euiFlexItem euiFlexItem--flexGrowZero"
-      >
-        <h1
-          class="euiTitle euiTitle--large"
-        >
-          -
-        </h1>
-      </div>
-      <div
-        class="euiFlexItem euiFlexItem--flexGrowZero"
-        style="padding-bottom: 5px;"
-      />
-    </div>
-  </div>
-  <div
-    class="euiFlexItem"
-  />
-  <div
-    class="euiFlexItem euiFlexItem--flexGrowZero"
-  />
-  <div
-    class="euiFlexItem euiFlexItem--flexGrowZero"
-  >
-    <button
-      class="euiButton euiButton--primary"
-      data-test-subj="channel-details-mute-button"
-      type="button"
-    >
-      <span
-        class="euiButtonContent euiButton__content"
-      >
-        <svg
-          aria-hidden="true"
-          class="euiIcon euiIcon--medium euiIcon-isLoading euiButtonContent__icon"
-          focusable="false"
-          height="16"
-          role="img"
-          viewBox="0 0 16 16"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
-        />
-        <span
-          class="euiButton__text"
-        >
-          Unmute channel
-        </span>
-      </span>
-    </button>
-  </div>
-</div>
+  aria-live="polite"
+  class="euiGlobalToastList euiGlobalToastList--right"
+  role="region"
+/>
 `;
diff --git a/public/pages/Channels/__tests__/__snapshots__/DetailsListModal.test.tsx.snap b/public/pages/Channels/__tests__/__snapshots__/DetailsListModal.test.tsx.snap
@@ -23,6 +23,7 @@ exports[`<DetailsListModal /> spec renders the component 1`] = `
         "getNotification": [Function],
         "getNotifications": [Function],
         "httpClient": [MockFunction],
+        "sendTestMessage": [Function],
       },
       "notificationService": NotificationService {
         "createConfig": [Function],

diff --git a/public/pages/Channels/__tests__/__snapshots__/DetailsTableModal.test.tsx.snap b/public/pages/Channels/__tests__/__snapshots__/DetailsTableModal.test.tsx.snap
@@ -24,6 +24,7 @@ exports[`<DetailsTableModal /> spec renders headers 1`] = `
         "getNotification": [Function],
         "getNotifications": [Function],
         "httpClient": [MockFunction],
+        "sendTestMessage": [Function],
       },
       "notificationService": NotificationService {
         "createConfig": [Function],
@@ -1856,6 +1857,7 @@ exports[`<DetailsTableModal /> spec renders parameters 1`] = `
         "getNotification": [Function],
         "getNotifications": [Function],
         "httpClient": [MockFunction],
+        "sendTestMessage": [Function],
       },
       "notificationService": NotificationService {
         "createConfig": [Function],

diff --git a/public/pages/Channels/components/ChannelControls.tsx b/public/pages/Channels/components/ChannelControls.tsx
@@ -34,8 +34,11 @@ import {
   EuiPopover,
 } from '@elastic/eui';
 import _ from 'lodash';
-import React, { useContext, useState } from 'react';
-import { NOTIFICATION_SOURCE } from '../../../../public/utils/constants';
+import React, { useContext, useEffect, useState } from 'react';
+import {
+  CHANNEL_TYPE,
+  NOTIFICATION_SOURCE,
+} from '../../../../public/utils/constants';
 import { MainContext } from '../../Main/Main';
 import { ChannelFiltersType } from '../types';
 
@@ -70,6 +73,14 @@ export const ChannelControls = (props: ChannelControlsProps) => {
     }))
   );
 
+  useEffect(() => {
+    const newItems = typeItems.filter(
+      ({ field }) =>
+        !!mainStateContext.availableFeatures[field as keyof typeof CHANNEL_TYPE]
+    );
+    if (newItems.length !== typeItems.length) setTypeItems(newItems);
+  }, [mainStateContext.availableFeatures]);
+
   function updateItem(
     items: Array<{ field: string; display: string; checked: string }>,
     index: number,