@finos/legend-application-studio 22.6.0 → 23.0.1

package/src/components/project-view/ProjectViewer.tsx

@@ -0,0 +1,356 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License 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 { useEffect, Fragment } from 'react';
+import { observer } from 'mobx-react-lite';
+import { EditPanel } from '../editor/edit-panel/EditPanel.js';
+import { GrammarTextEditor } from '../editor/edit-panel/GrammarTextEditor.js';
+import { LEGEND_STUDIO_TEST_ID } from '../../application/LegendStudioTesting.js';
+import {
+  ACTIVITY_MODE,
+  GRAPH_EDITOR_MODE,
+} from '../../stores/editor/EditorConfig.js';
+import {
+  type ResizablePanelHandlerProps,
+  clsx,
+  ResizablePanel,
+  ResizablePanelGroup,
+  ResizablePanelSplitter,
+  getCollapsiblePanelGroupProps,
+  RepoIcon,
+  CodeBranchIcon,
+  HackerIcon,
+  WrenchIcon,
+  FileTrayIcon,
+  AssistantIcon,
+  useResizeDetector,
+} from '@finos/legend-art';
+import { isNonNullable } from '@finos/legend-shared';
+import {
+  useProjectViewerStore,
+  withProjectViewerStore,
+} from './ProjectViewerStoreProvider.js';
+import {
+  type ViewerPathParams,
+  generateSetupRoute,
+} from '../../application/LegendStudioNavigation.js';
+import { ProjectSearchCommand } from '../editor/command-center/ProjectSearchCommand.js';
+import { flowResult } from 'mobx';
+import {
+  useEditorStore,
+  withEditorStore,
+} from '../editor/EditorStoreProvider.js';
+import {
+  useApplicationStore,
+  useCommands,
+  useParams,
+} from '@finos/legend-application';
+import {
+  ActivityBarMenu,
+  type ActivityDisplay,
+} from '../editor/ActivityBar.js';
+import { Explorer } from '../editor/side-bar/Explorer.js';
+import { ProjectOverview } from '../editor/side-bar/ProjectOverview.js';
+import { WorkflowManager } from '../editor/side-bar/WorkflowManager.js';
+import {
+  useLegendStudioApplicationStore,
+  useLegendStudioBaseStore,
+} from '../LegendStudioBaseStoreProvider.js';
+import { EmbeddedQueryBuilder } from '../EmbeddedQueryBuilder.js';
+
+const ProjectViewerStatusBar = observer(() => {
+  const params = useParams<ViewerPathParams>();
+  const viewerStore = useProjectViewerStore();
+  const editorStore = useEditorStore();
+  const applicationStore = useLegendStudioApplicationStore();
+  const latestVersion = viewerStore.onLatestVersion;
+  const currentRevision = viewerStore.onCurrentRevision;
+  const extraSDLCInfo = params.revisionId ?? params.versionId ?? 'HEAD';
+  const projectId = params.projectId;
+  const currentProject = editorStore.sdlcState.currentProject;
+  const versionBehindProjectHead =
+    viewerStore.currentRevision &&
+    viewerStore.version &&
+    params.versionId &&
+    viewerStore.currentRevision.id !== viewerStore.version.revisionId;
+  const description = `${
+    latestVersion
+      ? versionBehindProjectHead
+        ? 'latest behind project'
+        : 'latest'
+      : currentRevision
+      ? 'current'
+      : ''
+  }`;
+  const handleTextModeClick = applicationStore.guardUnhandledError(() =>
+    flowResult(editorStore.toggleTextMode()),
+  );
+  const toggleAssistant = (): void =>
+    applicationStore.assistantService.toggleAssistant();
+
+  return (
+    <div
+      data-testid={LEGEND_STUDIO_TEST_ID.STATUS_BAR}
+      className="editor__status-bar project-view__status-bar"
+    >
+      <div className="editor__status-bar__left">
+        {currentProject && (
+          <div className="editor__status-bar__workspace">
+            <div className="editor__status-bar__workspace__icon">
+              <CodeBranchIcon />
+            </div>
+            <div className="editor__status-bar__workspace__project">
+              <button
+                className="editor__status-bar__workspace__project"
+                title="Go back to workspace setup using the specified project"
+                tabIndex={-1}
+                onClick={(): void =>
+                  applicationStore.navigationService.navigator.visitAddress(
+                    applicationStore.navigationService.navigator.generateAddress(
+                      generateSetupRoute(projectId),
+                    ),
+                  )
+                }
+              >
+                {currentProject.name}
+              </button>
+            </div>
+            /
+            <div className="editor__status-bar__workspace__workspace">
+              {extraSDLCInfo}
+            </div>
+            {description && (
+              <div className="editor__status-bar__workspace__workspace">
+                ({description})
+              </div>
+            )}
+          </div>
+        )}
+      </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':
+                editorStore.graphEditorMode.mode ===
+                GRAPH_EDITOR_MODE.GRAMMAR_TEXT,
+            },
+          )}
+          onClick={handleTextModeClick}
+          tabIndex={-1}
+          title="Toggle text mode (F8)"
+        >
+          <HackerIcon />
+        </button>
+        <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>
+  );
+});
+
+const ProjectViewerSideBar = observer(() => {
+  const viewerStore = useProjectViewerStore();
+  const editorStore = useEditorStore();
+  const renderSideBar = (): React.ReactNode => {
+    switch (editorStore.activeActivity) {
+      case ACTIVITY_MODE.EXPLORER:
+        return <Explorer />;
+      case ACTIVITY_MODE.PROJECT_OVERVIEW:
+        return <ProjectOverview />;
+      case ACTIVITY_MODE.WORKFLOW_MANAGER:
+        return viewerStore.workflowManagerState ? (
+          <WorkflowManager
+            workflowManagerState={viewerStore.workflowManagerState}
+          />
+        ) : null;
+      default:
+        return null;
+    }
+  };
+  return (
+    <div className="side-bar">
+      <div className="side-bar__view">{renderSideBar()}</div>
+    </div>
+  );
+});
+
+const ProjectViewerActivityBar = observer(() => {
+  const viewerStore = useProjectViewerStore();
+  const baseStore = useLegendStudioBaseStore();
+  const editorStore = useEditorStore();
+
+  const changeActivity =
+    (activity: ACTIVITY_MODE): (() => void) =>
+    (): void =>
+      editorStore.setActiveActivity(activity);
+  // tabs
+  const activities: ActivityDisplay[] = [
+    {
+      mode: ACTIVITY_MODE.EXPLORER,
+      title: 'Explorer (Ctrl + Shift + X)',
+      icon: <FileTrayIcon />,
+    },
+    baseStore.isSDLCAuthorized !== undefined && {
+      mode: ACTIVITY_MODE.PROJECT_OVERVIEW,
+      title: 'Project',
+      icon: (
+        <div className="activity-bar__project-overview-icon">
+          <RepoIcon />
+        </div>
+      ),
+    },
+    viewerStore.workflowManagerState && {
+      mode: ACTIVITY_MODE.WORKFLOW_MANAGER,
+      title: 'WORKFLOW MANAGER',
+      icon: <WrenchIcon />,
+    },
+  ].filter((activity): activity is ActivityDisplay => Boolean(activity));
+
+  return (
+    <div className="activity-bar">
+      <ActivityBarMenu />
+      <div className="activity-bar__items">
+        {activities.map((activity) => (
+          <button
+            key={activity.mode}
+            className={clsx('activity-bar__item', {
+              'activity-bar__item--active':
+                editorStore.sideBarDisplayState.isOpen &&
+                editorStore.activeActivity === activity.mode,
+            })}
+            onClick={changeActivity(activity.mode)}
+            tabIndex={-1}
+            title={`${activity.title}${
+              activity.info ? ` - ${activity.info}` : ''
+            }`}
+          >
+            {activity.icon}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+});
+
+export const ProjectViewer = withEditorStore(
+  withProjectViewerStore(
+    observer(() => {
+      const params = useParams<ViewerPathParams>();
+      const viewerStore = useProjectViewerStore();
+      const editorStore = useEditorStore();
+      const applicationStore = useApplicationStore();
+
+      // Extensions
+      const extraEditorExtensionComponents = editorStore.pluginManager
+        .getApplicationPlugins()
+        .flatMap(
+          (plugin) =>
+            plugin.getExtraEditorExtensionComponentRendererConfigurations?.() ??
+            [],
+        )
+        .filter(isNonNullable)
+        .map((config) => (
+          <Fragment key={config.key}>{config.renderer(editorStore)}</Fragment>
+        ));
+
+      // layout
+      const resizeSideBar = (handleProps: ResizablePanelHandlerProps): void =>
+        editorStore.sideBarDisplayState.setSize(
+          (handleProps.domElement as HTMLDivElement).getBoundingClientRect()
+            .width,
+        );
+      const sideBarCollapsiblePanelGroupProps = getCollapsiblePanelGroupProps(
+        editorStore.sideBarDisplayState.size === 0,
+        {
+          onStopResize: resizeSideBar,
+          size: editorStore.sideBarDisplayState.size,
+        },
+      );
+      const { ref, width, height } = useResizeDetector<HTMLDivElement>();
+      useEffect(() => {
+        if (ref.current) {
+          editorStore.auxPanelDisplayState.setMaxSize(ref.current.offsetHeight);
+        }
+      }, [ref, editorStore, width, height]);
+
+      // initialize
+      useEffect(() => {
+        viewerStore.internalizeEntityPath(params);
+      }, [viewerStore, params]);
+      // NOTE: since we internalize the entity path in the route, we should not re-initialize the graph
+      // on the second call when we remove entity path from the route
+      useEffect(() => {
+        flowResult(viewerStore.initialize(params)).catch(
+          applicationStore.alertUnhandledError,
+        );
+      }, [applicationStore, viewerStore, params]);
+
+      useCommands(editorStore);
+
+      return (
+        <div className="app__page">
+          <div className="editor viewer">
+            <div className="editor__body">
+              <ProjectViewerActivityBar />
+              <div ref={ref} className="editor__content-container">
+                <div className="editor__content">
+                  <ResizablePanelGroup orientation="vertical">
+                    <ResizablePanel
+                      {...sideBarCollapsiblePanelGroupProps.collapsiblePanel}
+                      direction={1}
+                    >
+                      <ProjectViewerSideBar />
+                    </ResizablePanel>
+                    <ResizablePanelSplitter />
+                    <ResizablePanel
+                      {...sideBarCollapsiblePanelGroupProps.remainingPanel}
+                      minSize={300}
+                    >
+                      {editorStore.graphEditorMode.mode ===
+                        GRAPH_EDITOR_MODE.FORM && <EditPanel />}
+                      {editorStore.graphEditorMode.mode ===
+                        GRAPH_EDITOR_MODE.GRAMMAR_TEXT && <GrammarTextEditor />}
+                    </ResizablePanel>
+                  </ResizablePanelGroup>
+                </div>
+              </div>
+            </div>
+            {editorStore.graphManagerState.graphBuildState.hasSucceeded && (
+              <ProjectSearchCommand />
+            )}
+            <ProjectViewerStatusBar />
+            <EmbeddedQueryBuilder />
+            {extraEditorExtensionComponents}
+          </div>
+        </div>
+      );
+    }),
+  ),
+);

package/src/components/project-view/ProjectViewerStoreProvider.tsx

@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License 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 { useContext, createContext } from 'react';
+import { useLocalObservable } from 'mobx-react-lite';
+import { ProjectViewerStore } from '../../stores/project-view/ProjectViewerStore.js';
+import { EDITOR_MODE } from '../../stores/editor/EditorConfig.js';
+import { guaranteeNonNullable } from '@finos/legend-shared';
+import { useEditorStore } from '../editor/EditorStoreProvider.js';
+import { ProjectViewerEditorMode } from '../../stores/project-view/ProjectViewerEditorMode.js';
+
+const ProjectViewerStoreContext = createContext<ProjectViewerStore | undefined>(
+  undefined,
+);
+
+export const ProjectViewerStoreProvider: React.FC<{
+  children: React.ReactNode;
+}> = ({ children }) => {
+  const editorStore = useEditorStore();
+  editorStore.setMode(EDITOR_MODE.VIEWER);
+  const store = useLocalObservable(() => new ProjectViewerStore(editorStore));
+  editorStore.setEditorMode(new ProjectViewerEditorMode(store));
+  return (
+    <ProjectViewerStoreContext.Provider value={store}>
+      {children}
+    </ProjectViewerStoreContext.Provider>
+  );
+};
+
+export const useProjectViewerStore = (): ProjectViewerStore =>
+  guaranteeNonNullable(
+    useContext(ProjectViewerStoreContext),
+    `Can't find project viewer store in context`,
+  );
+
+export const withProjectViewerStore = (WrappedComponent: React.FC): React.FC =>
+  function WithProjectViewerStore() {
+    return (
+      <ProjectViewerStoreProvider>
+        <WrappedComponent />
+      </ProjectViewerStoreProvider>
+    );
+  };

package/src/components/shared/ElementIconUtils.tsx

@@ -15,7 +15,7 @@
  */
 
 import { returnUndefOnError } from '@finos/legend-shared';
-import type { EditorStore } from '../../stores/EditorStore.js';
+import type { EditorStore } from '../../stores/editor/EditorStore.js';
 import type { DSL_LegendStudioApplicationPlugin_Extension } from '../../stores/LegendStudioApplicationPlugin.js';
 import {
   type PackageableElement,
@@ -47,7 +47,7 @@ import {
   PURE_PackageIcon,
   PURE_DataIcon,
 } from '@finos/legend-art';
-import { PACKAGEABLE_ELEMENT_TYPE } from '../../stores/shared/ModelClassifierUtils.js';
+import { PACKAGEABLE_ELEMENT_TYPE } from '../../stores/editor/shared/ModelClassifierUtils.js';
 
 export const getClassPropertyIcon = (type: Type): React.ReactNode => {
   if (type instanceof PrimitiveType) {

package/src/components/workspace-review/WorkspaceReview.tsx

@@ -22,7 +22,7 @@ import {
 } from './WorkspaceReviewStoreProvider.js';
 import { WorkspaceReviewSideBar } from './WorkspaceReviewSideBar.js';
 import { WorkspaceReviewPanel } from './WorkspaceReviewPanel.js';
-import { ACTIVITY_MODE } from '../../stores/EditorConfig.js';
+import { ACTIVITY_MODE } from '../../stores/editor/EditorConfig.js';
 import {
   type ResizablePanelHandlerProps,
   getCollapsiblePanelGroupProps,
@@ -40,7 +40,7 @@ import {
 import {
   type ReviewPathParams,
   generateSetupRoute,
-} from '../../stores/LegendStudioRouter.js';
+} from '../../application/LegendStudioNavigation.js';
 import { flowResult } from 'mobx';
 import {
   useEditorStore,

package/src/components/workspace-review/WorkspaceReviewPanel.tsx

@@ -27,9 +27,9 @@ import { filterByType } from '@finos/legend-shared';
 import {
   EntityDiffViewState,
   DIFF_VIEW_MODE,
-} from '../../stores/editor-state/entity-diff-editor-state/EntityDiffViewState.js';
+} from '../../stores/editor/editor-state/entity-diff-editor-state/EntityDiffViewState.js';
 import { EntityDiffView } from '../editor/edit-panel/diff-editor/EntityDiffView.js';
-import type { EditorState } from '../../stores/editor-state/EditorState.js';
+import type { EditorState } from '../../stores/editor/editor-state/EditorState.js';
 import { useEditorStore } from '../editor/EditorStoreProvider.js';
 import { forwardRef } from 'react';
 

package/src/components/workspace-review/WorkspaceReviewSideBar.tsx

@@ -26,11 +26,11 @@ import {
   InfoCircleIcon,
   PanelContent,
 } from '@finos/legend-art';
-import { EntityDiffViewState } from '../../stores/editor-state/entity-diff-editor-state/EntityDiffViewState.js';
-import { LEGEND_STUDIO_TEST_ID } from '../LegendStudioTestID.js';
+import { EntityDiffViewState } from '../../stores/editor/editor-state/entity-diff-editor-state/EntityDiffViewState.js';
+import { LEGEND_STUDIO_TEST_ID } from '../../application/LegendStudioTesting.js';
 import { flowResult } from 'mobx';
 import { type EntityDiff, ReviewState } from '@finos/legend-server-sdlc';
-import { entityDiffSorter } from '../../stores/EditorSDLCState.js';
+import { entityDiffSorter } from '../../stores/editor/EditorSDLCState.js';
 import { useWorkspaceReviewStore } from './WorkspaceReviewStoreProvider.js';
 import { useEditorStore } from '../editor/EditorStoreProvider.js';
 import { useApplicationStore } from '@finos/legend-application';

package/src/components/workspace-review/WorkspaceReviewStoreProvider.tsx

@@ -17,7 +17,7 @@
 import { createContext, useContext } from 'react';
 import { useLocalObservable } from 'mobx-react-lite';
 import { WorkspaceReviewStore } from '../../stores/workspace-review/WorkspaceReviewStore.js';
-import { EDITOR_MODE } from '../../stores/EditorConfig.js';
+import { EDITOR_MODE } from '../../stores/editor/EditorConfig.js';
 import { guaranteeNonNullable } from '@finos/legend-shared';
 import { useEditorStore } from '../editor/EditorStoreProvider.js';
 

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

@@ -31,15 +31,15 @@ import {
   PanelForm,
   PanelDivider,
 } from '@finos/legend-art';
-import { LEGEND_STUDIO_TEST_ID } from '../LegendStudioTestID.js';
+import { LEGEND_STUDIO_TEST_ID } from '../../application/LegendStudioTesting.js';
 import { isNumber } from '@finos/legend-shared';
 import { flowResult } from 'mobx';
 import {
   DocumentationLink,
   useConditionedApplicationNavigationContext,
 } from '@finos/legend-application';
-import { LEGEND_STUDIO_DOCUMENTATION_KEY } from '../../stores/LegendStudioDocumentation.js';
-import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../stores/LegendStudioApplicationNavigationContext.js';
+import { LEGEND_STUDIO_DOCUMENTATION_KEY } from '../../application/LegendStudioDocumentation.js';
+import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../application/LegendStudioApplicationNavigationContext.js';
 import { useLegendStudioApplicationStore } from '../LegendStudioBaseStoreProvider.js';
 import { useWorkspaceSetupStore } from './WorkspaceSetup.js';
 

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

@@ -32,7 +32,7 @@ import {
   useApplicationStore,
   DocumentationLink,
 } from '@finos/legend-application';
-import { LEGEND_STUDIO_DOCUMENTATION_KEY } from '../../stores/LegendStudioDocumentation.js';
+import { LEGEND_STUDIO_DOCUMENTATION_KEY } from '../../application/LegendStudioDocumentation.js';
 import { useWorkspaceSetupStore } from './WorkspaceSetup.js';
 
 export const CreateWorkspaceModal = observer(

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

@@ -0,0 +1,125 @@
+/**
+ * Copyright (c) 2020-present, Goldman Sachs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License 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 {
+  ArrowCircleRightIcon,
+  clsx,
+  ExclamationCircleIcon,
+  getSelectorInputOptionEmbeddedButtonProps,
+} from '@finos/legend-art';
+import type { Project } from '@finos/legend-server-sdlc';
+import type { LegendStudioApplicationStore } from '../../stores/LegendStudioBaseStore.js';
+import { generateViewProjectRoute } from '../../application/LegendStudioNavigation.js';
+import type { ProjectConfigurationStatus } from '../../stores/workspace-setup/ProjectConfigurationStatus.js';
+
+export interface ProjectOption {
+  label: string;
+  value: Project;
+}
+
+export const buildProjectOption = (project: Project): ProjectOption => ({
+  label: project.name,
+  value: project,
+});
+
+export const getProjectOptionLabelFormatter = (
+  applicationStore: LegendStudioApplicationStore,
+  projectConfigurationStatus?: ProjectConfigurationStatus | undefined,
+): ((option: ProjectOption) => React.ReactNode) =>
+  function ProjectOptionLabel(option: ProjectOption): React.ReactNode {
+    const viewProject = (): void =>
+      applicationStore.navigationService.navigator.visitAddress(
+        applicationStore.navigationService.navigator.generateAddress(
+          generateViewProjectRoute(option.value.projectId),
+        ),
+      );
+    const configure = (): void => {
+      if (projectConfigurationStatus?.reviewUrl) {
+        applicationStore.navigationService.navigator.visitAddress(
+          projectConfigurationStatus.reviewUrl,
+        );
+      } else {
+        applicationStore.notificationService.notifyWarning(
+          `Can't find project configuration review: opening the project web page...`,
+        );
+        applicationStore.navigationService.navigator.visitAddress(
+          option.value.webUrl,
+        );
+      }
+    };
+
+    return (
+      <div className="project-selector__option">
+        <div
+          className={clsx('project-selector__option__label', {
+            'project-selector__option__label--selected':
+              projectConfigurationStatus &&
+              option.value.projectId === projectConfigurationStatus.projectId &&
+              projectConfigurationStatus.isConfigured,
+            'project-selector__option__label--not-configured':
+              projectConfigurationStatus &&
+              option.value.projectId === projectConfigurationStatus.projectId &&
+              !projectConfigurationStatus.isConfigured,
+          })}
+        >
+          <div className="project-selector__option__label__name">
+            {option.label}
+          </div>
+        </div>
+        {projectConfigurationStatus &&
+          option.value.projectId === projectConfigurationStatus.projectId && (
+            <>
+              {projectConfigurationStatus.isConfigured && (
+                <button
+                  type="button" // prevent this toggler being activated on form submission
+                  className="project-selector__option__visit-btn"
+                  tabIndex={-1}
+                  onClick={viewProject}
+                  {...getSelectorInputOptionEmbeddedButtonProps()}
+                >
+                  <div className="project-selector__option__visit-btn__label">
+                    view
+                  </div>
+                  <div className="project-selector__option__visit-btn__icon">
+                    <ArrowCircleRightIcon />
+                  </div>
+                </button>
+              )}
+              {!projectConfigurationStatus.isConfigured && (
+                <button
+                  className="project-selector__option__configure-btn"
+                  type="button" // prevent this toggler being activated on form submission
+                  tabIndex={-1}
+                  onClick={configure}
+                  {...getSelectorInputOptionEmbeddedButtonProps()}
+                  title="The project has not been configured properly. Click to see the review and commit it to get complete the configuration."
+                >
+                  <div className="project-selector__option__configure-btn__warning-icon">
+                    <ExclamationCircleIcon />
+                  </div>
+                  <div className="project-selector__option__configure-btn__label">
+                    configure
+                  </div>
+                  <div className="project-selector__option__configure-btn__icon">
+                    <ArrowCircleRightIcon />
+                  </div>
+                </button>
+              )}
+            </>
+          )}
+      </div>
+    );
+  };