@finos/legend-application-studio 16.0.2 → 17.0.0

package/src/components/workspace-setup/WorkspaceSetup.tsx

@@ -14,393 +14,347 @@
  * limitations under the License.
  */
 
-import { useState, useEffect, useRef } from 'react';
-import { ProjectSelector } from './ProjectSelector.js';
-import { WorkspaceSelector } from './WorkspaceSelector.js';
-import { observer } from 'mobx-react-lite';
+import { createContext, useContext, useEffect, useMemo, useState } from 'react';
+import { observer, useLocalObservable } from 'mobx-react-lite';
 import {
-  type SelectComponent,
   clsx,
-  Dialog,
-  SquareIcon,
-  compareLabelFn,
-  CustomSelectorInput,
-  PanelLoadingIndicator,
-  CheckSquareIcon,
   MarkdownTextViewer,
   AssistantIcon,
+  compareLabelFn,
+  PlusIcon,
+  GitBranchIcon,
+  CustomSelectorInput,
+  RepoIcon,
 } from '@finos/legend-art';
-import type { ProjectOption } from '../../stores/workspace-setup/WorkspaceSetupStore.js';
-import {
-  useWorkspaceSetupStore,
-  withWorkspaceSetupStore,
-} from './WorkspaceSetupStoreProvider.js';
 import { useParams } from 'react-router';
 import { LEGEND_STUDIO_TEST_ID } from '../LegendStudioTestID.js';
 import {
   type SetupPathParams,
   generateEditorRoute,
+  LEGEND_STUDIO_PATH_PARAM_TOKEN,
 } from '../../stores/LegendStudioRouter.js';
 import { flowResult } from 'mobx';
-import { WorkspaceType } from '@finos/legend-server-sdlc';
 import {
-  useApplicationStore,
   DocumentationLink,
   useApplicationNavigationContext,
 } from '@finos/legend-application';
 import { LEGEND_STUDIO_DOCUMENTATION_KEY } from '../../stores/LegendStudioDocumentation.js';
-import { CreateProjectModal } from './ProjectCreateModal.js';
+import { CreateProjectModal } from './CreateProjectModal.js';
 import { ActivityBarMenu } from '../editor/ActivityBar.js';
 import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../stores/LegendStudioApplicationNavigationContext.js';
+import { CreateWorkspaceModal } from './CreateWorkspaceModal.js';
 import { useLegendStudioApplicationStore } from '../LegendStudioBaseStoreProvider.js';
+import {
+  type ProjectOption,
+  buildProjectOption,
+  getProjectOptionLabelFormatter,
+} from '../shared/ProjectSelectorUtils.js';
+import {
+  type WorkspaceOption,
+  buildWorkspaceOption,
+  formatWorkspaceOptionLabel,
+} from '../shared/WorkspaceSelectorUtils.js';
+import { debounce, guaranteeNonNullable } from '@finos/legend-shared';
+import { WorkspaceSetupStore } from '../../stores/workspace-setup/WorkspaceSetupStore.js';
+import { useSDLCServerClient } from '@finos/legend-server-sdlc';
 
-const CreateWorkspaceModal = observer(() => {
-  const setupStore = useWorkspaceSetupStore();
-  const applicationStore = useApplicationStore();
-  const {
-    loadProjectsState,
-    createOrImportProjectState,
-    createWorkspaceState,
-    showCreateWorkspaceModal,
-  } = setupStore;
-  const isFetchingProjects = loadProjectsState.isInProgress;
-  const projectSelectorRef = useRef<SelectComponent>(null);
-  const workspaceNameInputRef = useRef<HTMLInputElement>(null);
-  const [currentProjectId, setCurrentProjectId] = useState<string | undefined>(
-    setupStore.currentProjectId,
-  );
-  const [workspaceName, setWorkspaceName] = useState('');
-  const [isGroupWorkspace, setIsGroupWorkspace] = useState<boolean>(true);
-  const workspaceType = isGroupWorkspace
-    ? WorkspaceType.GROUP
-    : WorkspaceType.USER;
-  const projectOptions = setupStore.projectOptions.sort(compareLabelFn);
-  const selectedOption =
-    projectOptions.find((option) => option.value === currentProjectId) ?? null;
-  const dispatchingActions =
-    createWorkspaceState.isInProgress ||
-    createOrImportProjectState.isInProgress;
-  const onSelectionChange = (val: ProjectOption | null): void => {
-    if (
-      (val !== null || selectedOption !== null) &&
-      (!val || !selectedOption || val.value !== selectedOption.value)
-    ) {
-      setCurrentProjectId(val?.value);
-      workspaceNameInputRef.current?.focus();
-    }
-  };
-  const projectSelectorPlaceholder = isFetchingProjects
-    ? 'Loading projects'
-    : loadProjectsState.hasFailed
-    ? 'Error fetching projects'
-    : projectOptions.length
-    ? 'Choose an existing project'
-    : 'You have no projects, please create or acquire access for at least one';
-
-  const closeModal = (): void => {
-    setupStore.setShowCreateWorkspaceModal(false);
-  };
-  const createWorkspace = (): void => {
-    if (currentProjectId && workspaceName) {
-      flowResult(
-        setupStore.createWorkspace(
-          currentProjectId,
-          workspaceName,
-          workspaceType,
-        ),
-      ).catch(applicationStore.alertUnhandledError);
-    }
-  };
-  const changeWorkspaceName: React.ChangeEventHandler<HTMLInputElement> = (
-    event,
-  ) => setWorkspaceName(event.target.value);
-  const handleSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
-    event.preventDefault();
-    createWorkspace();
-  };
-  const handleEnter = (): void => {
-    if (currentProjectId) {
-      workspaceNameInputRef.current?.focus();
-    } else {
-      projectSelectorRef.current?.focus();
-    }
-  };
-  const toggleGroupWorkspace = (
-    event: React.FormEvent<HTMLButtonElement>,
-  ): void => {
-    event.preventDefault();
-    setIsGroupWorkspace(!isGroupWorkspace);
-  };
-
-  return (
-    <Dialog
-      open={showCreateWorkspaceModal}
-      onClose={closeModal}
-      TransitionProps={{
-        onEnter: handleEnter,
-      }}
-      classes={{ container: 'search-modal__container' }}
-      PaperProps={{ classes: { root: 'search-modal__inner-container' } }}
-    >
-      <div className="modal modal--dark workspace-setup__create-workspace-modal">
-        <div className="modal__title">
-          Create Workspace
-          <DocumentationLink
-            className="workspace-setup__create-workspace-modal__doc__create-workspace"
-            documentationKey={LEGEND_STUDIO_DOCUMENTATION_KEY.CREATE_WORKSPACE}
-          />
-        </div>
-        <form onSubmit={handleSubmit}>
-          <PanelLoadingIndicator
-            isLoading={setupStore.createWorkspaceState.isInProgress}
-          />
-          <div className="panel__content__form workspace-setup__create-workspace-modal__form workspace-setup__create-workspace-modal__form__workspace">
-            <div className="panel__content__form__section">
-              <div className="panel__content__form__section__header__label">
-                Project Name
-              </div>
-              <CustomSelectorInput
-                className="workspace-setup-selector__input workspace-setup__workspace__selector"
-                ref={projectSelectorRef}
-                options={projectOptions}
-                disabled={
-                  dispatchingActions ||
-                  isFetchingProjects ||
-                  !projectOptions.length
-                }
-                isLoading={isFetchingProjects}
-                onChange={onSelectionChange}
-                value={selectedOption}
-                placeholder={projectSelectorPlaceholder}
-                isClearable={true}
-                escapeClearsValue={true}
-                darkMode={true}
-              />
-            </div>
-            <div className="panel__content__form__section">
-              <div className="panel__content__form__section__header__label">
-                Workspace Name
-              </div>
-              <input
-                className="workspace-setup__create-workspace-modal__form__workspace-name__input"
-                ref={workspaceNameInputRef}
-                spellCheck={false}
-                disabled={dispatchingActions}
-                placeholder="MyWorkspace"
-                value={workspaceName}
-                onChange={changeWorkspaceName}
-              />
-            </div>
-            <div className="panel__content__form__section">
-              <div className="panel__content__form__section__header__label">
-                Group Workspace
-              </div>
-              <div className="panel__content__form__section__toggler">
-                <button
-                  onClick={toggleGroupWorkspace}
-                  type="button" // prevent this toggler being activated on form submission
-                  className={clsx(
-                    'panel__content__form__section__toggler__btn',
-                    {
-                      'panel__content__form__section__toggler__btn--toggled':
-                        isGroupWorkspace,
-                    },
-                  )}
-                  tabIndex={-1}
-                >
-                  {isGroupWorkspace ? <CheckSquareIcon /> : <SquareIcon />}
-                </button>
-                <div className="panel__content__form__section__toggler__prompt">
-                  Group workspaces can be edited by all users in the
-                  corresponding project.
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="panel__content__form__actions">
-            <button
-              disabled={
-                dispatchingActions || !workspaceName || !currentProjectId
-              }
-              className="btn btn--dark"
-            >
-              Create
-            </button>
-          </div>
-        </form>
-      </div>
-    </Dialog>
-  );
-});
+const WorkspaceSetupStoreContext = createContext<
+  WorkspaceSetupStore | undefined
+>(undefined);
 
-const WorkspaceSetupContent = observer(() => {
-  const setupStore = useWorkspaceSetupStore();
+const WorkspaceSetupStoreProvider: React.FC<{
+  children: React.ReactNode;
+}> = ({ children }) => {
   const applicationStore = useLegendStudioApplicationStore();
-  const projectSelectorRef = useRef<SelectComponent>(null);
-  const workspaceSelectorRef = useRef<SelectComponent>(null);
-  const proceedButtonRef = useRef<HTMLButtonElement>(null);
-  const documentation = applicationStore.documentationService.getDocEntry(
-    LEGEND_STUDIO_DOCUMENTATION_KEY.SETUP_WORKSPACE,
+  const sdlcServerClient = useSDLCServerClient();
+  const store = useLocalObservable(
+    () => new WorkspaceSetupStore(applicationStore, sdlcServerClient),
   );
-  const isCreatingWorkspace = setupStore.createWorkspaceState.isInProgress;
-  const isCreatingOrImportingProject =
-    setupStore.createOrImportProjectState.isInProgress;
-  const disableProceedButton =
-    !setupStore.currentProjectId ||
-    !setupStore.currentWorkspaceCompositeId ||
-    isCreatingWorkspace ||
-    isCreatingOrImportingProject;
-  const onProjectChange = (focusNext: boolean): void =>
-    focusNext
-      ? workspaceSelectorRef.current?.focus()
-      : projectSelectorRef.current?.focus();
-  const onWorkspaceChange = (focusNext: boolean): void =>
-    focusNext
-      ? proceedButtonRef.current?.focus()
-      : workspaceSelectorRef.current?.focus();
-  const handleCreateProjectModal = (): void =>
-    setupStore.setShowCreateProjectModal(true);
-  const handleCreateWorkspaceModal = (): void =>
-    setupStore.setShowCreateWorkspaceModal(true);
-  const handleProceed = (): void => {
-    if (
-      setupStore.currentProjectId &&
-      setupStore.currentProject &&
-      setupStore.currentWorkspaceCompositeId &&
-      setupStore.currentWorkspace
-    ) {
-      applicationStore.navigator.goTo(
-        generateEditorRoute(
-          setupStore.currentProjectId,
-          setupStore.currentWorkspace.workspaceId,
-          setupStore.currentWorkspace.workspaceType,
-        ),
-      );
-    }
-  };
-  const toggleAssistant = (): void =>
-    applicationStore.assistantService.toggleAssistant();
-
-  useEffect(() => {
-    if (!disableProceedButton) {
-      proceedButtonRef.current?.focus();
-    }
-  }, [disableProceedButton]);
-
   return (
-    <div className="app__page">
-      <div className="workspace-setup">
-        <div className="workspace-setup__body">
-          <div className="activity-bar">
-            {/*
-              TODO: consider what we can put here and componentize it
-              Currently, we reuse the one from editor which might
-              no longer be right in the future
-            */}
-            <ActivityBarMenu />
-          </div>
-          <div
-            className="workspace-setup__content"
-            data-testid={LEGEND_STUDIO_TEST_ID.SETUP__CONTENT}
-          >
-            <div className="workspace-setup__content__main">
-              <div className="workspace-setup__title">
-                <div className="workspace-setup__title__header">
-                  Setup Workspace
-                  <DocumentationLink
-                    className="workspace-setup__doc__setup-workspace"
-                    documentationKey={
-                      LEGEND_STUDIO_DOCUMENTATION_KEY.SETUP_WORKSPACE
-                    }
-                  />
-                </div>
-                {documentation?.markdownText && (
-                  <div className="workspace-setup__title__documentation">
-                    <MarkdownTextViewer value={documentation.markdownText} />
-                  </div>
-                )}
-              </div>
-              <div>
-                <ProjectSelector
-                  ref={projectSelectorRef}
-                  onChange={onProjectChange}
-                  create={handleCreateProjectModal}
-                />
-                <WorkspaceSelector
-                  ref={workspaceSelectorRef}
-                  onChange={onWorkspaceChange}
-                  create={handleCreateWorkspaceModal}
-                />
-                <div className="workspace-setup__actions">
-                  <button
-                    ref={proceedButtonRef}
-                    className="workspace-setup__next-btn btn--dark"
-                    onClick={handleProceed}
-                    disabled={disableProceedButton}
-                  >
-                    Edit Workspace
-                  </button>
-                </div>
-              </div>
-              {/* NOTE: We do this to reset the initial state of the modals */}
-              {setupStore.showCreateProjectModal && <CreateProjectModal />}
-              {setupStore.showCreateWorkspaceModal && <CreateWorkspaceModal />}
-            </div>
-          </div>
-        </div>
+    <WorkspaceSetupStoreContext.Provider value={store}>
+      {children}
+    </WorkspaceSetupStoreContext.Provider>
+  );
+};
 
-        <div
-          data-testid={LEGEND_STUDIO_TEST_ID.STATUS_BAR}
-          className="editor__status-bar"
-        >
-          <div className="editor__status-bar__left"></div>
-          <div className="editor__status-bar__right">
-            <button
-              className={clsx(
-                'editor__status-bar__action editor__status-bar__action__toggler',
-                {
-                  'editor__status-bar__action__toggler--active':
-                    !applicationStore.assistantService.isHidden,
-                },
-              )}
-              onClick={toggleAssistant}
-              tabIndex={-1}
-              title="Toggle assistant"
-            >
-              <AssistantIcon />
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
+export const useWorkspaceSetupStore = (): WorkspaceSetupStore =>
+  guaranteeNonNullable(
+    useContext(WorkspaceSetupStoreContext),
+    `Can't find workspace setup store in context`,
   );
-});
+
+const withWorkspaceSetupStore = (WrappedComponent: React.FC): React.FC =>
+  function WithWorkspaceSetupStore() {
+    return (
+      <WorkspaceSetupStoreProvider>
+        <WrappedComponent />
+      </WorkspaceSetupStoreProvider>
+    );
+  };
 
 export const WorkspaceSetup = withWorkspaceSetupStore(
   observer(() => {
     const params = useParams<SetupPathParams>();
+    const projectId = params[LEGEND_STUDIO_PATH_PARAM_TOKEN.PROJECT_ID];
+    const workspaceId = params[LEGEND_STUDIO_PATH_PARAM_TOKEN.WORKSPACE_ID];
+    const groupWorkspaceId =
+      params[LEGEND_STUDIO_PATH_PARAM_TOKEN.GROUP_WORKSPACE_ID];
     const setupStore = useWorkspaceSetupStore();
-    const applicationStore = useApplicationStore();
+    const applicationStore = useLegendStudioApplicationStore();
+    const [projectSearchText, setProjectSearchText] = useState('');
+
+    const toggleAssistant = (): void =>
+      applicationStore.assistantService.toggleAssistant();
+    const documentation = applicationStore.documentationService.getDocEntry(
+      LEGEND_STUDIO_DOCUMENTATION_KEY.SETUP_WORKSPACE,
+    );
+
+    // projects
+    const projectOptions = setupStore.projects
+      .map(buildProjectOption)
+      .sort(compareLabelFn);
+    const selectedProjectOption = setupStore.currentProject
+      ? buildProjectOption(setupStore.currentProject)
+      : null;
+
+    const onProjectChange = (val: ProjectOption | null): void => {
+      if (val) {
+        flowResult(setupStore.changeProject(val.value)).catch(
+          applicationStore.alertUnhandledError,
+        );
+      } else {
+        setupStore.resetProject();
+      }
+    };
+    const showCreateProjectModal = (): void =>
+      setupStore.setShowCreateProjectModal(true);
+
+    // project search text
+    const debouncedLoadProjects = useMemo(
+      () =>
+        debounce((input: string): void => {
+          flowResult(setupStore.loadProjects(input)).catch(
+            applicationStore.alertUnhandledError,
+          );
+        }, 500),
+      [applicationStore, setupStore],
+    );
+    const onProjectSearchTextChange = (value: string): void => {
+      if (value !== projectSearchText) {
+        setProjectSearchText(value);
+        debouncedLoadProjects.cancel();
+        debouncedLoadProjects(value);
+      }
+    };
+
+    // workspaces
+    const workspaceOptions = setupStore.workspaces
+      .map(buildWorkspaceOption)
+      .sort(compareLabelFn);
+    const selectedWorkspaceOption = setupStore.currentWorkspace
+      ? buildWorkspaceOption(setupStore.currentWorkspace)
+      : null;
+
+    const onWorkspaceChange = (val: WorkspaceOption | null): void => {
+      if (val) {
+        setupStore.changeWorkspace(val.value);
+      } else {
+        setupStore.resetWorkspace();
+      }
+    };
+    const showCreateWorkspaceModal = (): void =>
+      setupStore.setShowCreateWorkspaceModal(true);
+
+    const handleProceed = (): void => {
+      if (setupStore.currentProject && setupStore.currentWorkspace) {
+        applicationStore.navigator.goTo(
+          generateEditorRoute(
+            setupStore.currentProject.projectId,
+            setupStore.currentWorkspace.workspaceId,
+            setupStore.currentWorkspace.workspaceType,
+          ),
+        );
+      }
+    };
+
     useEffect(() => {
-      setupStore.setCurrentProjectId(params.projectId);
-      setupStore.init(params.workspaceId, params.groupWorkspaceId);
-    }, [setupStore, params]);
+      flowResult(
+        setupStore.initialize(projectId, workspaceId, groupWorkspaceId),
+      ).catch(applicationStore.alertUnhandledError);
+    }, [
+      setupStore,
+      applicationStore,
+      projectId,
+      workspaceId,
+      groupWorkspaceId,
+    ]);
 
     useEffect(() => {
-      flowResult(setupStore.fetchProjects()).catch(
+      flowResult(setupStore.loadProjects('')).catch(
         applicationStore.alertUnhandledError,
       );
-      if (setupStore.currentProjectId) {
-        flowResult(
-          setupStore.fetchWorkspaces(setupStore.currentProjectId),
-        ).catch(applicationStore.alertUnhandledError);
-      }
-    }, [applicationStore, setupStore]);
+    }, [setupStore, applicationStore]);
 
     useApplicationNavigationContext(
       LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY.SETUP,
     );
 
-    return <WorkspaceSetupContent />;
+    return (
+      <div className="app__page">
+        <div className="workspace-setup">
+          <div className="workspace-setup__body">
+            <div className="activity-bar">
+              <ActivityBarMenu />
+            </div>
+            <div
+              className="workspace-setup__content"
+              data-testid={LEGEND_STUDIO_TEST_ID.SETUP__CONTENT}
+            >
+              <div className="workspace-setup__content__main">
+                <div className="workspace-setup__title">
+                  <div className="workspace-setup__title__header">
+                    Setup Workspace
+                    <DocumentationLink
+                      className="workspace-setup__doc__setup-workspace"
+                      documentationKey={
+                        LEGEND_STUDIO_DOCUMENTATION_KEY.SETUP_WORKSPACE
+                      }
+                    />
+                  </div>
+                  {documentation?.markdownText && (
+                    <div className="workspace-setup__title__documentation">
+                      <MarkdownTextViewer value={documentation.markdownText} />
+                    </div>
+                  )}
+                </div>
+                <form onSubmit={handleProceed}>
+                  <div className="workspace-setup__selector">
+                    <div
+                      className="workspace-setup__selector__icon"
+                      title="project"
+                    >
+                      <RepoIcon className="workspace-setup__selector__icon--project" />
+                    </div>
+                    <CustomSelectorInput
+                      className="workspace-setup__selector__input"
+                      options={projectOptions}
+                      isLoading={setupStore.loadProjectsState.isInProgress}
+                      onInputChange={onProjectSearchTextChange}
+                      inputValue={projectSearchText}
+                      onChange={onProjectChange}
+                      value={selectedProjectOption}
+                      placeholder="Search for project..."
+                      isClearable={true}
+                      escapeClearsValue={true}
+                      darkMode={true}
+                      formatOptionLabel={getProjectOptionLabelFormatter(
+                        applicationStore,
+                      )}
+                    />
+                    <button
+                      className="workspace-setup__selector__action btn--dark"
+                      onClick={showCreateProjectModal}
+                      tabIndex={-1}
+                      type="button" // prevent this toggler being activated on form submission
+                      title="Create a Project"
+                    >
+                      <PlusIcon />
+                    </button>
+                  </div>
+                  <div className="workspace-setup__selector">
+                    <div
+                      className="workspace-setup__selector__icon"
+                      title="workspace"
+                    >
+                      <GitBranchIcon className="workspace-setup__selector__icon--workspace" />
+                    </div>
+                    <CustomSelectorInput
+                      className="workspace-setup__selector__input"
+                      options={workspaceOptions}
+                      disabled={
+                        !setupStore.currentProject ||
+                        setupStore.loadProjectsState.isInProgress ||
+                        setupStore.loadWorkspacesState.isInProgress
+                      }
+                      isLoading={setupStore.loadWorkspacesState.isInProgress}
+                      onChange={onWorkspaceChange}
+                      formatOptionLabel={formatWorkspaceOptionLabel}
+                      value={selectedWorkspaceOption}
+                      placeholder={
+                        setupStore.loadWorkspacesState.isInProgress
+                          ? 'Loading workspaces...'
+                          : !setupStore.currentProject
+                          ? 'In order to select a workspace, a project must be selected'
+                          : workspaceOptions.length
+                          ? 'Choose an existing workspace'
+                          : 'You have no workspaces. Please create one to proceed...'
+                      }
+                      isClearable={true}
+                      escapeClearsValue={true}
+                      darkMode={true}
+                    />
+                    <button
+                      className="workspace-setup__selector__action btn--dark"
+                      onClick={showCreateWorkspaceModal}
+                      disabled={!setupStore.currentProject}
+                      tabIndex={-1}
+                      type="button" // prevent this toggler being activated on form submission
+                      title="Create a Workspace"
+                    >
+                      <PlusIcon />
+                    </button>
+                  </div>
+                  <div className="workspace-setup__actions">
+                    <button
+                      className="workspace-setup__next-btn btn--dark"
+                      onClick={handleProceed}
+                      disabled={
+                        !setupStore.currentProject ||
+                        !setupStore.currentWorkspace ||
+                        setupStore.createWorkspaceState.isInProgress ||
+                        setupStore.createOrImportProjectState.isInProgress
+                      }
+                    >
+                      Edit Workspace
+                    </button>
+                  </div>
+                </form>
+                {/* NOTE: We do this to reset the initial state of the modals */}
+                {setupStore.showCreateProjectModal && <CreateProjectModal />}
+                {setupStore.showCreateWorkspaceModal &&
+                  setupStore.currentProject && (
+                    <CreateWorkspaceModal
+                      selectedProject={setupStore.currentProject}
+                    />
+                  )}
+              </div>
+            </div>
+          </div>
+
+          <div
+            data-testid={LEGEND_STUDIO_TEST_ID.STATUS_BAR}
+            className="editor__status-bar"
+          >
+            <div className="editor__status-bar__left"></div>
+            <div className="editor__status-bar__right">
+              <button
+                className={clsx(
+                  'editor__status-bar__action editor__status-bar__action__toggler',
+                  {
+                    'editor__status-bar__action__toggler--active':
+                      !applicationStore.assistantService.isHidden,
+                  },
+                )}
+                onClick={toggleAssistant}
+                tabIndex={-1}
+                title="Toggle assistant"
+              >
+                <AssistantIcon />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
   }),
 );