feat: add workspace create and overview page

Signed-off-by: Lin Wang <wonglam@amazon.com>

src/core/public/application/types.ts

@@ -245,6 +245,16 @@ export interface App<HistoryLocationState = unknown> {
    * ```
    */
   exactRoute?: boolean;
+
+  /**
+   * The dependencies of one application, required feature will be automatic select and can't
+   * be unselect in the workspace configuration.
+   */
+  dependencies?: {
+    [key: string]: {
+      type: 'required' | 'optional';
+    };
+  };
 }
 
 /**

src/plugins/workspace/common/constants.ts

@@ -6,4 +6,10 @@
 export const WORKSPACE_UPDATE_APP_ID = 'workspace_update';
 export const WORKSPACE_OVERVIEW_APP_ID = 'workspace_overview';
 export const WORKSPACE_FATAL_ERROR_APP_ID = 'workspace_fatal_error';
+export const WORKSPACE_CREATE_APP_ID = 'workspace_create';
+
+// These features will be checked and disabled in checkbox on default.
+export const DEFAULT_CHECKED_FEATURES_IDS = [WORKSPACE_OVERVIEW_APP_ID];
+
 export const WORKSPACE_SAVED_OBJECTS_CLIENT_WRAPPER_ID = 'workspace';
+export const WORKSPACE_OP_TYPE_CREATE = 'create';

src/plugins/workspace/common/types.ts

@@ -0,0 +1,8 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export type WorkspacePermissionItem<T extends string> = {
+  modes: T[];
+} & ({ type: 'user'; userId: string } | { type: 'group'; group: string });

src/plugins/workspace/public/application.tsx

@@ -8,6 +8,8 @@ import ReactDOM from 'react-dom';
 import { AppMountParameters, ScopedHistory } from '../../../core/public';
 import { OpenSearchDashboardsContextProvider } from '../../opensearch_dashboards_react/public';
 import { WorkspaceFatalError } from './components/workspace_fatal_error';
+import { WorkspaceCreatorApp } from './components/workspace_creator_app';
+import { WorkspaceOverviewApp } from './components/workspace_overview_app';
 import { Services } from './types';
 
 export const renderFatalErrorApp = (params: AppMountParameters, services: Services) => {
@@ -24,3 +26,29 @@ export const renderFatalErrorApp = (params: AppMountParameters, services: Servic
     ReactDOM.unmountComponentAtNode(element);
   };
 };
+
+export const renderCreatorApp = ({ element }: AppMountParameters, services: Services) => {
+  ReactDOM.render(
+    <OpenSearchDashboardsContextProvider services={services}>
+      <WorkspaceCreatorApp />
+    </OpenSearchDashboardsContextProvider>,
+    element
+  );
+
+  return () => {
+    ReactDOM.unmountComponentAtNode(element);
+  };
+};
+
+export const renderOverviewApp = ({ element }: AppMountParameters, services: Services) => {
+  ReactDOM.render(
+    <OpenSearchDashboardsContextProvider services={services}>
+      <WorkspaceOverviewApp />
+    </OpenSearchDashboardsContextProvider>,
+    element
+  );
+
+  return () => {
+    ReactDOM.unmountComponentAtNode(element);
+  };
+};

src/plugins/workspace/public/components/workspace_creator/index.tsx

@@ -0,0 +1,7 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { WorkspaceCreator } from './workspace_creator';
+export { WorkspacePermissionSetting } from './workspace_permission_setting_panel';

src/plugins/workspace/public/components/workspace_creator/workspace_bottom_bar.tsx

@@ -0,0 +1,105 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  EuiBottomBar,
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
+import { i18n } from '@osd/i18n';
+import React, { useState } from 'react';
+import { ApplicationStart } from 'opensearch-dashboards/public';
+import { WORKSPACE_OP_TYPE_CREATE, WORKSPACE_OP_TYPE_UPDATE } from '../../../common/constants';
+import { WorkspaceCancelModal } from './workspace_cancel_modal';
+
+interface WorkspaceBottomBarProps {
+  formId: string;
+  opType?: string;
+  numberOfErrors: number;
+  application: ApplicationStart;
+}
+
+// Number of saved changes will be implemented in workspace update page PR
+export const WorkspaceBottomBar = ({
+  formId,
+  opType,
+  numberOfErrors,
+  application,
+}: WorkspaceBottomBarProps) => {
+  const [isCancelModalVisible, setIsCancelModalVisible] = useState(false);
+  const closeCancelModal = () => setIsCancelModalVisible(false);
+  const showCancelModal = () => setIsCancelModalVisible(true);
+
+  return (
+    <div>
+      <EuiSpacer size="xl" />
+      <EuiSpacer size="xl" />
+      <EuiBottomBar>
+        <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
+          <EuiFlexItem grow={false}>
+            <EuiFlexGroup gutterSize="s">
+              {opType === WORKSPACE_OP_TYPE_UPDATE ? (
+                <EuiText textAlign="left">
+                  {i18n.translate('workspace.form.bottomBar.unsavedChanges', {
+                    defaultMessage: '1 Unsaved change(s)',
+                  })}
+                </EuiText>
+              ) : (
+                <EuiText textAlign="left">
+                  {i18n.translate('workspace.form.bottomBar.errors', {
+                    defaultMessage: `${numberOfErrors} Error(s)`,
+                  })}
+                </EuiText>
+              )}
+            </EuiFlexGroup>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiFlexGroup gutterSize="m">
+              <EuiButtonEmpty
+                color="ghost"
+                onClick={showCancelModal}
+                data-test-subj="workspaceForm-bottomBar-cancelButton"
+              >
+                {i18n.translate('workspace.form.bottomBar.cancel', {
+                  defaultMessage: 'Cancel',
+                })}
+              </EuiButtonEmpty>
+              <EuiSpacer />
+              {opType === WORKSPACE_OP_TYPE_CREATE && (
+                <EuiButton
+                  fill
+                  type="submit"
+                  color="primary"
+                  form={formId}
+                  data-test-subj="workspaceForm-bottomBar-createButton"
+                >
+                  {i18n.translate('workspace.form.bottomBar.createWorkspace', {
+                    defaultMessage: 'Create workspace',
+                  })}
+                </EuiButton>
+              )}
+              {opType === WORKSPACE_OP_TYPE_UPDATE && (
+                <EuiButton form={formId} type="submit" fill color="primary">
+                  {i18n.translate('workspace.form.bottomBar.saveChanges', {
+                    defaultMessage: 'Save changes',
+                  })}
+                </EuiButton>
+              )}
+            </EuiFlexGroup>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiBottomBar>
+      <WorkspaceCancelModal
+        application={application}
+        visible={isCancelModalVisible}
+        closeCancelModal={closeCancelModal}
+      />
+    </div>
+  );
+};

src/plugins/workspace/public/components/workspace_creator/workspace_cancel_modal.tsx

@@ -0,0 +1,49 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { i18n } from '@osd/i18n';
+import { EuiConfirmModal } from '@elastic/eui';
+import { ApplicationStart } from 'opensearch-dashboards/public';
+import { WORKSPACE_LIST_APP_ID } from '../../../common/constants';
+
+interface WorkspaceCancelModalProps {
+  visible: boolean;
+  application: ApplicationStart;
+  closeCancelModal: () => void;
+}
+
+export const WorkspaceCancelModal = ({
+  application,
+  visible,
+  closeCancelModal,
+}: WorkspaceCancelModalProps) => {
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <EuiConfirmModal
+      data-test-subj="workspaceForm-cancelModal"
+      title={i18n.translate('workspace.form.cancelModal.title', {
+        defaultMessage: 'Discard changes?',
+      })}
+      onCancel={closeCancelModal}
+      onConfirm={() => application?.navigateToApp(WORKSPACE_LIST_APP_ID)}
+      cancelButtonText={i18n.translate('workspace.form.cancelButtonText.', {
+        defaultMessage: 'Continue editing',
+      })}
+      confirmButtonText={i18n.translate('workspace.form.confirmButtonText.', {
+        defaultMessage: 'Discard changes',
+      })}
+      buttonColor="danger"
+      defaultFocusedButton="confirm"
+    >
+      {i18n.translate('workspace.form.cancelModal.body', {
+        defaultMessage: 'This will discard all changes. Are you sure?',
+      })}
+    </EuiConfirmModal>
+  );
+};