Include server.basepath config in the manage notifications channel Url (

#914) (#917) * refactored code to always include the server.basepath for manager channels url * refactored code --------- (cherry picked from commit 1ac71bc) Signed-off-by: Amardeepsingh Siglani <[email protected]> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
opensearch-project · Apr 5, 2024 · 844f6c0 · 844f6c0
1 parent 3a51e59
commit 844f6c0
Show file tree

Hide file tree

Showing 10 changed files with 47 additions and 34 deletions.
diff --git a/public/app.js b/public/app.js
@@ -14,6 +14,7 @@ import './app.scss';
 import Main from './pages/Main';
 import { CoreContext } from './utils/CoreContext';
 import { ServicesContext, NotificationService } from './services';
+import { initManageChannelsUrl } from './utils/helpers';
 
 export function renderApp(coreStart, params) {
   const isDarkMode = coreStart.uiSettings.get('theme:darkMode') || false;
@@ -29,6 +30,8 @@ export function renderApp(coreStart, params) {
     require('@elastic/charts/dist/theme_only_light.css');
   }
 
+  initManageChannelsUrl(coreStart.http);
+
   // render react to DOM
   ReactDOM.render(
     <Router>

diff --git a/public/pages/CreateTrigger/components/Action/Action.js b/public/pages/CreateTrigger/components/Action/Action.js
@@ -28,12 +28,12 @@ import { isInvalid, hasError, validateActionName } from '../../../../utils/valid
 import { validateDestination } from './utils/validate';
 import {
   DEFAULT_ACTION_TYPE,
-  MANAGE_CHANNELS_PATH,
   webhookNotificationActionMessageComponent,
   defaultNotificationActionMessageComponent,
 } from '../../utils/constants';
 import NotificationsCallOut from '../NotificationsCallOut';
 import MinimalAccordion from '../../../../components/FeatureAnywhereContextMenu/MinimalAccordion';
+import { getManageChannelsUrl } from '../../../../utils/helpers';
 
 const Action = ({
   action,
@@ -45,7 +45,6 @@ const Action = ({
   onDelete,
   sendTestMessage,
   setFlyout,
-  httpClient,
   fieldPath,
   values,
   hasNotificationPlugin,
@@ -72,7 +71,6 @@ const Action = ({
     ActionComponent = defaultNotificationActionMessageComponent;
   }
 
-  const manageChannelsUrl = httpClient.basePath.prepend(MANAGE_CHANNELS_PATH);
   const isFirstAction = index !== undefined && index === 0;
   const refreshDestinations = useMemo(() => {
     const refresh = async () => {
@@ -169,7 +167,7 @@ const Action = ({
               disabled={!hasNotificationPlugin}
               iconType="popout"
               iconSide="right"
-              onClick={() => window.open(manageChannelsUrl)}
+              onClick={() => window.open(getManageChannelsUrl())}
             >
               Manage channels
             </ManageButton>

diff --git a/public/pages/CreateTrigger/components/ActionEmptyPrompt/ActionEmptyPrompt.js b/public/pages/CreateTrigger/components/ActionEmptyPrompt/ActionEmptyPrompt.js
@@ -6,15 +6,14 @@
 import React from 'react';
 import { EuiButton, EuiEmptyPrompt, EuiText } from '@elastic/eui';
 import AddActionButton from '../AddActionButton';
-import { MANAGE_CHANNELS_PATH } from '../../utils/constants';
+import { getManageChannelsUrl } from '../../../../utils/helpers';
 
 const actionEmptyText = 'Add an action to perform when this trigger is triggered.';
 const destinationEmptyText = 'There are no existing channels. Add a channel to create an action.';
 
 const ActionEmptyPrompt = ({
   arrayHelpers,
   hasDestinations,
-  httpClient,
   hasNotificationPlugin,
   flyoutMode,
   onPostAdd,
@@ -39,7 +38,7 @@ const ActionEmptyPrompt = ({
             disabled={!hasNotificationPlugin}
             iconType="popout"
             iconSide="right"
-            onClick={() => window.open(httpClient.basePath.prepend(MANAGE_CHANNELS_PATH))}
+            onClick={() => window.open(getManageChannelsUrl())}
           >
             Manage channels
           </EuiButton>

diff --git a/public/pages/CreateTrigger/containers/ConfigureActions/ConfigureActions.js b/public/pages/CreateTrigger/containers/ConfigureActions/ConfigureActions.js
@@ -338,7 +338,6 @@ class ConfigureActions extends React.Component {
             }}
             sendTestMessage={this.sendTestMessage}
             setFlyout={setFlyout}
-            httpClient={httpClient}
             fieldPath={fieldPath}
             values={values}
             hasNotificationPlugin={hasNotificationPlugin}
@@ -356,7 +355,6 @@ class ConfigureActions extends React.Component {
       <ActionEmptyPrompt
         arrayHelpers={arrayHelpers}
         hasDestinations={hasDestinations}
-        httpClient={httpClient}
         hasNotificationPlugin={hasNotificationPlugin}
         flyoutMode={flyoutMode}
         onPostAdd={(initialValues) => this.onAccordionToggle(initialValues.id)}

diff --git a/...pages/CreateTrigger/containers/DefineCompositeLevelTrigger/TriggerNotificationsContent.js b/...pages/CreateTrigger/containers/DefineCompositeLevelTrigger/TriggerNotificationsContent.js
@@ -8,9 +8,10 @@ import { EuiPanel, EuiFlexGroup, EuiFlexItem, EuiButtonEmpty, EuiSpacer } from '
 import { FormikComboBox } from '../../../../components/FormControls';
 import NotificationConfigDialog from './NotificationConfigDialog';
 import _ from 'lodash';
-import { FORMIK_INITIAL_ACTION_VALUES, MANAGE_CHANNELS_PATH } from '../../utils/constants';
+import { FORMIK_INITIAL_ACTION_VALUES } from '../../utils/constants';
 import { NOTIFY_OPTIONS_VALUES } from '../../components/Action/actions/Message';
 import { required } from '../../../../utils/validate';
+import { getManageChannelsUrl } from '../../../../utils/helpers';
 
 const TriggerNotificationsContent = ({
   action,
@@ -97,7 +98,7 @@ const TriggerNotificationsContent = ({
               iconType={'popout'}
               style={{ marginTop: '22px' }}
               disabled={!hasNotifications}
-              onClick={() => window.open(httpClient.basePath.prepend(MANAGE_CHANNELS_PATH))}
+              onClick={() => window.open(getManageChannelsUrl())}
             >
               Manage channels
             </EuiButtonEmpty>

diff --git a/public/pages/CreateTrigger/utils/constants.js b/public/pages/CreateTrigger/utils/constants.js
@@ -79,8 +79,6 @@ export const AND_OR_CONDITION_OPTIONS = [
 export const DEFAULT_TRIGGER_NAME = 'New trigger';
 export const DEFAULT_ACTION_TYPE = 'slack';
 
-export const MANAGE_CHANNELS_PATH = `/app/notifications-dashboards#/channels`;
-
 export const webhookNotificationActionMessageComponent = (props) => (
   <Message isSubjectDisabled {...props} />
 );

diff --git a/public/pages/Destinations/components/DestinationsList/EmptyDestinations/EmptyDestinations.js b/public/pages/Destinations/components/DestinationsList/EmptyDestinations/EmptyDestinations.js
@@ -6,7 +6,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { EuiButton, EuiEmptyPrompt, EuiLink, EuiText } from '@elastic/eui';
-import { MANAGE_CHANNELS_PATH } from '../../../../CreateTrigger/utils/constants';
+import { getManageChannelsUrl } from '../../../../../utils/helpers';
 
 const filterText = (hasNotificationPlugin) =>
   hasNotificationPlugin ? (
@@ -17,7 +17,7 @@ const filterText = (hasNotificationPlugin) =>
       </p>
       <p>
         Migrated destinations can be found in&nbsp;
-        {<EuiLink href={MANAGE_CHANNELS_PATH}>Notifications</EuiLink>}
+        {<EuiLink href={getManageChannelsUrl()}>Notifications</EuiLink>}
       </p>
     </>
   ) : (

diff --git a/...tinations/components/FullPageNotificationsInfoCallOut/FullPageNotificationsInfoCallOut.js b/...tinations/components/FullPageNotificationsInfoCallOut/FullPageNotificationsInfoCallOut.js
@@ -5,8 +5,8 @@
 
 import React from 'react';
 import { EuiButton, EuiEmptyPrompt, EuiLink, EuiPanel, EuiText } from '@elastic/eui';
-import { MANAGE_CHANNELS_PATH } from '../../../CreateTrigger/utils/constants';
 import { NOTIFICATIONS_LEARN_MORE_HREF } from '../../utils/constants';
+import { getManageChannelsUrl } from '../../../../utils/helpers';
 
 const noNotificationsTitle = 'Destinations will become channels in Notifications';
 const noNotificationsText = (
@@ -40,20 +40,23 @@ const hasNotificationsText = (
     </p>
   </EuiText>
 );
-const hasNotificationsButton = (
-  <EuiButton fill href={MANAGE_CHANNELS_PATH}>
-    View in Notifications
-  </EuiButton>
-);
 
-const FullPageNotificationsInfoCallOut = ({ hasNotificationPlugin }) => (
-  <EuiPanel>
-    <EuiEmptyPrompt
-      title={<h2>{hasNotificationPlugin ? hasNotificationsTitle : noNotificationsTitle}</h2>}
-      body={hasNotificationPlugin ? hasNotificationsText : noNotificationsText}
-      actions={hasNotificationPlugin ? hasNotificationsButton : noNotificationsButton}
-    />
-  </EuiPanel>
-);
+const FullPageNotificationsInfoCallOut = ({ hasNotificationPlugin }) => {
+  const hasNotificationsButton = (
+    <EuiButton fill href={getManageChannelsUrl()}>
+      View in Notifications
+    </EuiButton>
+  );
+
+  return (
+    <EuiPanel>
+      <EuiEmptyPrompt
+        title={<h2>{hasNotificationPlugin ? hasNotificationsTitle : noNotificationsTitle}</h2>}
+        body={hasNotificationPlugin ? hasNotificationsText : noNotificationsText}
+        actions={hasNotificationPlugin ? hasNotificationsButton : noNotificationsButton}
+      />
+    </EuiPanel>
+  );
+}
 
 export default FullPageNotificationsInfoCallOut;
diff --git a/public/pages/Destinations/components/NotificationsInfoCallOut/NotificationsInfoCallOut.js b/public/pages/Destinations/components/NotificationsInfoCallOut/NotificationsInfoCallOut.js
@@ -5,8 +5,8 @@
 
 import React from 'react';
 import { EuiCallOut, EuiButton, EuiLink, EuiSpacer } from '@elastic/eui';
-import { MANAGE_CHANNELS_PATH } from '../../../CreateTrigger/utils/constants';
 import { NOTIFICATIONS_LEARN_MORE_HREF } from '../../utils/constants';
+import { getManageChannelsUrl } from '../../../../utils/helpers';
 
 const noNotificationsTitle = 'Unable to send notifications. Notifications plugin is required.';
 const noNotificationsBodyText = (
@@ -42,11 +42,12 @@ const hasNotificationsBodyText = (
     </EuiLink>
   </p>
 );
-const hasNotificationsButton = (
-  <EuiButton href={MANAGE_CHANNELS_PATH}>View in Notifications</EuiButton>
-);
 
 const NotificationsInfoCallOut = ({ hasNotificationPlugin }) => {
+  const hasNotificationsButton = (
+    <EuiButton href={getManageChannelsUrl()}>View in Notifications</EuiButton>
+  );
+
   return (
     <div>
       <EuiCallOut

diff --git a/public/utils/helpers.js b/public/utils/helpers.js
@@ -136,3 +136,15 @@ export const titleTemplate = (title, subTitle) => (
     )}
   </>
 );
+
+// This is updated to include the server.basepath during plugin's first render inside app.js using `initManageChannelsUrl` function
+export let MANAGE_CHANNELS_URL = '/app/notifications-dashboards#/channels';
+
+export function initManageChannelsUrl(httpClient) {
+  const manageChannelsRelativePath = `/app/notifications-dashboards#/channels`;
+  MANAGE_CHANNELS_URL = httpClient.basePath.prepend(manageChannelsRelativePath);
+}
+
+export function getManageChannelsUrl() {
+  return MANAGE_CHANNELS_URL;
+}