Dynamic Sign in options

common/index.ts

@@ -24,6 +24,7 @@ export const API_PREFIX = '/api/v1';
 export const CONFIGURATION_API_PREFIX = 'configuration';
 export const API_ENDPOINT_AUTHINFO = API_PREFIX + '/auth/authinfo';
 export const API_ENDPOINT_DASHBOARDSINFO = API_PREFIX + '/auth/dashboardsinfo';
+export const API_ENDPOINT_DASHBOARD_SIGNIN_OPTIONS = API_ENDPOINT_DASHBOARDSINFO + '/signinoptions';
 export const API_ENDPOINT_AUTHTYPE = API_PREFIX + '/auth/type';
 export const LOGIN_PAGE_URI = '/app/' + APP_ID_LOGIN;
 export const CUSTOM_ERROR_PAGE_URI = '/app/' + APP_ID_CUSTOMERROR;

public/apps/configuration/panels/auth-view/auth-view.tsx

@@ -23,10 +23,16 @@ import { AppDependencies } from '../../../types';
 import { ExternalLinkButton } from '../../utils/display-utils';
 import { getSecurityConfig } from '../../utils/auth-view-utils';
 import { InstructionView } from './instruction-view';
+import { SignInOptionsPanel } from './dashboard-signin-options';
+import { DashboardSignInOptions } from '../../types';
 
 export function AuthView(props: AppDependencies) {
   const [authentication, setAuthentication] = React.useState([]);
   const [authorization, setAuthorization] = React.useState([]);
+  const [dashboardSignInOptions, setDashboardSignInOptions] = React.useState<
+    DashboardSignInOptions[]
+  >([]);
+  const [isAnonymousAuthEnable, setAnonymousAuthEnable] = useState(false);
   const [loading, setLoading] = useState(false);
 
   React.useEffect(() => {
@@ -37,6 +43,8 @@ export function AuthView(props: AppDependencies) {
 
         setAuthentication(config.authc);
         setAuthorization(config.authz);
+        setDashboardSignInOptions(config.kibana.sign_in_options);
+        setAnonymousAuthEnable(config.http.anonymous_auth_enabled);
       } catch (e) {
         console.log(e);
       } finally {
@@ -68,6 +76,14 @@ export function AuthView(props: AppDependencies) {
       <AuthenticationSequencePanel authc={authentication} loading={loading} />
       <EuiSpacer size="m" />
       {/* @ts-ignore */}
+      <SignInOptionsPanel
+        authc={authentication}
+        signInEnabledOptions={dashboardSignInOptions}
+        http={props.coreStart.http}
+        isAnonymousAuthEnable={isAnonymousAuthEnable}
+      />
+      <EuiSpacer size="m" />
+      {/* @ts-ignore */}
       <AuthorizationPanel authz={authorization} loading={loading} config={props.config} />
     </>
   );

public/apps/configuration/panels/auth-view/dashboard-signin-options.tsx

@@ -0,0 +1,182 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import {
+  EuiBasicTableColumn,
+  EuiFlexGroup,
+  EuiGlobalToastList,
+  EuiHealth,
+  EuiHorizontalRule,
+  EuiInMemoryTable,
+  EuiPageContentHeader,
+  EuiPageContentHeaderSection,
+  EuiPanel,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+import { get, keys } from 'lodash';
+import { HttpSetup } from 'opensearch-dashboards/public';
+import React, { useEffect, useState } from 'react';
+import { updateDashboardSignInOptions } from '../../../../utils/dashboards-info-utils';
+import { DashboardOption, DashboardSignInOptions } from '../../types';
+import { createErrorToast, createSuccessToast, useToastState } from '../../utils/toast-utils';
+import { SignInOptionsModal } from './signin-options-modal';
+
+interface SignInOptionsPanelProps {
+  authc: [];
+  signInEnabledOptions: DashboardSignInOptions[];
+  http: HttpSetup;
+  isAnonymousAuthEnable: boolean;
+}
+
+export const columns: Array<EuiBasicTableColumn<DashboardOption>> = [
+  {
+    field: 'displayName',
+    name: 'Name',
+    'data-test-subj': 'name',
+    mobileOptions: {
+      render: (opt: DashboardOption) => <span>{opt.name}</span>,
+      header: false,
+      truncateText: false,
+      enlarge: true,
+      width: '100%',
+    },
+    sortable: true,
+  },
+  {
+    field: 'status',
+    name: 'Status',
+    dataType: 'boolean',
+    render: (enable: DashboardOption['status']) => {
+      const color = enable ? 'success' : 'danger';
+      const label = enable ? 'Enable' : 'Disable';
+      return <EuiHealth color={color}>{label}</EuiHealth>;
+    },
+  },
+];
+
+export function SignInOptionsPanel(props: SignInOptionsPanelProps) {
+  const { authc, signInEnabledOptions, http, isAnonymousAuthEnable } = props;
+
+  const domains = keys(authc);
+  const [toasts, addToast, removeToast] = useToastState();
+  const [dashboardOptions, setDashboardOptions] = useState<DashboardOption[]>([]);
+
+  enum makeAuthTypeHumanReadable {
+    BASIC = 'Basic Authentication',
+    SAML = 'SAML',
+    OPENID = 'OpenID Connect',
+    ANONYMOUS = 'Anonymous',
+  }
+
+  useEffect(() => {
+    const getDasboardOptions = () => {
+      const options = domains
+        .map((domain) => {
+          const data = get(authc, domain);
+
+          const option = data.http_authenticator.type.toUpperCase();
+          if (option in DashboardSignInOptions) {
+            const dashboardOption: DashboardOption = {
+              name: option,
+              status: signInEnabledOptions.indexOf(option) > -1,
+              displayName: makeAuthTypeHumanReadable[option],
+            };
+            return dashboardOption;
+          }
+        })
+        .filter((option) => option != null)
+        .filter(
+          (option, index, arr) => arr.findIndex((opt) => opt?.name === option?.name) === index
+        ) as DashboardOption[];
+      setDashboardOptions(options);
+    };
+
+    if (signInEnabledOptions.length > 0 && dashboardOptions.length === 0) {
+      getDasboardOptions();
+    }
+  }, [signInEnabledOptions, authc, dashboardOptions, domains]);
+
+  useEffect(() => {
+    if (isAnonymousAuthEnable) {
+      const option = DashboardSignInOptions.ANONYMOUS;
+      const anonymousOption: DashboardOption = {
+        name: DashboardSignInOptions[option],
+        status: signInEnabledOptions.indexOf(DashboardSignInOptions[option]) > -1,
+        displayName: makeAuthTypeHumanReadable.ANONYMOUS,
+      };
+
+      setDashboardOptions((prevState) => [...prevState, anonymousOption]);
+    }
+  }, [signInEnabledOptions, isAnonymousAuthEnable]);
+
+  const handleUpdate = async (newSignInOptions: DashboardOption[]) => {
+    await updateDashboardSignInOptions(
+      props.http,
+      newSignInOptions.map((opt) => opt.name as DashboardSignInOptions)
+    )
+      .then(() => {
+        setDashboardOptions((prevOptions) =>
+          prevOptions.map((option) => {
+            option.status = newSignInOptions.includes(option);
+            return option;
+          })
+        );
+
+        addToast(
+          createSuccessToast('updatePassed', 'Dashboard SignIn Options', 'Changes applied.')
+        );
+      })
+      .catch((e) => {
+        console.log('The sign in options could not be updated');
+        console.log(e);
+        addToast(
+          createErrorToast('updatedError', 'Dashboard SignIn Options', 'Error updating values.')
+        );
+      });
+  };
+
+  return (
+    <EuiPanel>
+      <EuiPageContentHeader>
+        <EuiPageContentHeaderSection>
+          <EuiTitle size="s">
+            <h3>Dashboards sign-in options</h3>
+          </EuiTitle>
+          <EuiText size="xs" color="subdued">
+            <p>
+              Configure one or multiple authentication options to appear on the sign-in window for
+              OpenSearch Dashboards.
+            </p>
+          </EuiText>
+        </EuiPageContentHeaderSection>
+        <EuiPageContentHeaderSection>
+          <EuiFlexGroup>
+            <SignInOptionsModal
+              dashboardOptions={dashboardOptions}
+              setDashboardOptions={setDashboardOptions}
+              handleUpdate={handleUpdate}
+            />
+          </EuiFlexGroup>
+        </EuiPageContentHeaderSection>
+      </EuiPageContentHeader>
+      <EuiHorizontalRule margin="m" />
+      <EuiInMemoryTable
+        tableLayout={'auto'}
+        columns={columns}
+        items={dashboardOptions}
+        itemId={'signin_options'}
+        sorting={{ sort: { field: 'displayName', direction: 'asc' } }}
+      />
+      <EuiGlobalToastList toasts={toasts} toastLifeTimeMs={3000} dismissToast={removeToast} />
+    </EuiPanel>
+  );
+}

public/apps/configuration/panels/auth-view/signin-options-modal.tsx

@@ -0,0 +1,106 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import React, { Dispatch, SetStateAction } from 'react';
+import { DashboardOption } from '../../types';
+
+import {
+  EuiButton,
+  EuiInMemoryTable,
+  EuiModal,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiSpacer,
+} from '@elastic/eui';
+import { columns } from './dashboard-signin-options';
+
+interface DashboardSignInProps {
+  dashboardOptions: DashboardOption[];
+  setDashboardOptions: Dispatch<SetStateAction<DashboardOption[]>>;
+  handleUpdate: Function;
+}
+
+export function SignInOptionsModal(props: DashboardSignInProps): JSX.Element {
+  const [newSignInOptions, setNewSignInOptions] = React.useState<DashboardOption[]>([]);
+  const [disableUpdate, disableUpdateButton] = React.useState(false);
+  const actualSignInOptions: DashboardOption[] = props.dashboardOptions.filter((opt) => opt.status);
+
+  const [isModalVisible, setIsModalVisible] = React.useState(false);
+  const closeModal = () => setIsModalVisible(false);
+  const showModal = () => setIsModalVisible(true);
+
+  React.useEffect(() => {
+    if (actualSignInOptions.length !== newSignInOptions.length && newSignInOptions.length > 0) {
+      disableUpdateButton(false);
+    } else {
+      let sameOptions = true;
+      newSignInOptions.forEach((option) => {
+        if (actualSignInOptions.includes(option) === false) {
+          sameOptions = false;
+          return;
+        }
+      });
+      disableUpdateButton(sameOptions);
+    }
+  }, [newSignInOptions, actualSignInOptions]);
+
+  let modal;
+
+  if (isModalVisible) {
+    modal = (
+      <EuiModal onClose={closeModal}>
+        <EuiModalHeader>
+          <EuiModalHeaderTitle>Dashboards sign-in options</EuiModalHeaderTitle>
+        </EuiModalHeader>
+        <EuiModalBody>
+          Select one or multiple authentication options to appear on the sign-in window for
+          OpenSearch Dashboards.
+          <EuiSpacer />
+          <EuiInMemoryTable
+            tableLayout={'auto'}
+            columns={columns.slice(0, 1)}
+            items={props.dashboardOptions}
+            itemId={'name'}
+            selection={{
+              onSelectionChange: setNewSignInOptions,
+              initialSelected: actualSignInOptions,
+            }}
+            sorting={{ sort: { field: 'displayName', direction: 'asc' } }}
+          />
+        </EuiModalBody>
+        <EuiModalFooter>
+          <EuiButton onClick={closeModal}>Cancel</EuiButton>
+          <EuiButton
+            data-testid="update"
+            onClick={() => {
+              props.handleUpdate(newSignInOptions);
+              closeModal();
+            }}
+            fill
+            disabled={disableUpdate}
+          >
+            Update
+          </EuiButton>
+        </EuiModalFooter>
+      </EuiModal>
+    );
+  }
+  return (
+    <div>
+      <EuiButton data-testid="edit" onClick={showModal}>
+        Edit
+      </EuiButton>
+      {modal}
+    </div>
+  );
+}