feat: update create workspace page UI and implement unit tests

src/plugins/workspace/common/constants.ts

@@ -3,9 +3,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { i18n } from '@osd/i18n';
-import { AppCategory } from '../../../core/types';
-
 export const WORKSPACE_CREATE_APP_ID = 'workspace_create';
 export const WORKSPACE_LIST_APP_ID = 'workspace_list';
 export const WORKSPACE_UPDATE_APP_ID = 'workspace_update';
@@ -22,12 +19,3 @@ export const PATHS = {
 export const WORKSPACE_OP_TYPE_CREATE = 'create';
 export const WORKSPACE_OP_TYPE_UPDATE = 'update';
 export const WORKSPACE_SAVED_OBJECTS_CLIENT_WRAPPER_ID = 'workspace';
-
-export const WORKSPACE_NAV_CATEGORY: AppCategory = {
-  id: 'workspace',
-  label: i18n.translate('core.ui.workspaceNavList.label', {
-    defaultMessage: 'Workspaces',
-  }),
-  euiIconType: 'folderClosed',
-  order: 2000,
-};

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>
+  );
+};