Switch the home link to logout on security error pages (opensearch-project#1564) (opensearch-project#1629)

* changing return to dashboards with functioning logout button on error page

Signed-off-by: [email protected] <[email protected]>
Co-authored-by: Darshit Chanpura <[email protected]>
Co-authored-by: Peter Nied <[email protected]>
(cherry picked from commit 27c37d40221bdc07f0167eca6348806d6b876dd6)

Co-authored-by: leanneeliatra <[email protected]>

Author: opensearch-trigger-bot[bot]

public/apps/customerror/custom-error.tsx

@@ -21,6 +21,7 @@ import { Router, Route } from 'react-router-dom';
 import { ERROR_MISSING_ROLE_PATH } from '../../../common';
 import { ClientConfigType } from '../../types';
 import './_index.scss';
+import { logout } from '../account/utils';
 
 interface CustomErrorDeps {
   title: string;
@@ -45,8 +46,13 @@ export function CustomErrorPage(props: CustomErrorDeps) {
         {props.subtitle}
       </EuiText>
       <EuiSpacer size="s" />
-      <EuiButton fill href={props.http.basePath.serverBasePath} fullWidth>
-        Back to OpenSearch Dashboards Home
+      <EuiButton
+        fill
+        onClick={() => logout(props.http, '')}
+        data-test-subj="error-logout-button"
+        fullWidth
+      >
+        Logout
       </EuiButton>
     </EuiListGroup>
   );
@@ -74,3 +80,4 @@ export async function renderPage(
   );
   return () => ReactDOM.unmountComponentAtNode(params.element);
 }
+export { EuiButton };

public/apps/customerror/test/__snapshots__/custom-error.test.tsx.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Custom error page test renders and clicks the button on the error page 1`] = `
+<EuiListGroup
+  className="custom-error-wrapper"
+>
+  <EuiSpacer
+    size="s"
+  />
+  <EuiText
+    size="m"
+    textAlign="center"
+  >
+    <h3>
+      Title
+    </h3>
+  </EuiText>
+  <EuiSpacer
+    size="s"
+  />
+  <EuiText
+    size="s"
+    textAlign="center"
+  >
+    Sub Title
+  </EuiText>
+  <EuiSpacer
+    size="s"
+  />
+  <EuiButton
+    data-test-subj="error-logout-button"
+    fill={true}
+    fullWidth={true}
+    onClick={[Function]}
+  >
+    Logout
+  </EuiButton>
+</EuiListGroup>
+`;

public/apps/customerror/test/custom-error.test.tsx

@@ -0,0 +1,61 @@
+/*
+ *   Copyright OpenSearch Contributors
+ *
+ *   Licensed under the Apache License, Version 2.0 (the "License").
+ *   You may not use this file except in compliance with the License.
+ *   A copy of the License is located at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *   or in the "license" file accompanying this file. This file is distributed
+ *   on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
+ *   express or implied. See the License for the specific language governing
+ *   permissions and limitations under the License.
+ */
+import { shallow } from 'enzyme';
+import React from 'react';
+import { CustomErrorPage } from '../custom-error';
+import { cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { EuiButton } from '../custom-error';
+import { logout } from '../../account/utils';
+
+afterEach(() => {
+  cleanup();
+});
+
+describe('Custom error page test', () => {
+  let component;
+
+  beforeEach(() => {
+    component = shallow(
+      <EuiButton fill onClick={logout} data-test-subj="error-logout-button" fullWidth>
+        Logout
+      </EuiButton>
+    );
+  });
+
+  it('renders and clicks the button on the error page', () => {
+    const wrapper = shallow(
+      <CustomErrorPage
+        title="Title"
+        subtitle="Sub Title"
+        http={undefined}
+        chrome={undefined}
+        config={{
+          title: '',
+          subtitle: '',
+          showbrandimage: false,
+          brandimage: '',
+          buttonstyle: '',
+        }}
+      />
+    );
+
+    expect(wrapper).toMatchSnapshot();
+
+    component.find('[data-test-subj="error-logout-button"]').simulate('onClick', {
+      preventDefault: () => {},
+    });
+  });
+});