@finos/legend-application-studio 18.0.1 → 18.1.0

package/src/components/editor/edit-panel/uml-editor/ClassEditor.tsx

@@ -128,7 +128,7 @@ import {
   class_swapConstraints,
   class_swapSuperTypes,
   setGenericTypeReferenceValue,
-} from '../../../../stores/graphModifier/DomainGraphModifierHelper.js';
+} from '../../../../stores/shared/modifier/DomainGraphModifierHelper.js';
 import {
   CLASS_PROPERTY_TYPE,
   getClassPropertyType,
@@ -305,7 +305,7 @@ const PropertyBasicEditor = observer(
                   value={property.name}
                   spellCheck={false}
                   onChange={changeValue}
-                  placeholder={`Property name`}
+                  placeholder="Property name"
                   validationErrorMessage={
                     isPropertyDuplicated(property)
                       ? 'Duplicated property'
@@ -320,7 +320,7 @@ const PropertyBasicEditor = observer(
                 options={propertyTypeOptions}
                 onChange={changePropertyType}
                 value={selectedPropertyType}
-                placeholder={'Choose a data type or enumeration'}
+                placeholder="Choose a type..."
                 filterOption={filterOption}
                 formatOptionLabel={getPackageableElementOptionFormatter({})}
               />
@@ -360,7 +360,7 @@ const PropertyBasicEditor = observer(
                     className="property-basic-editor__type__visit-btn"
                     onClick={openElement}
                     tabIndex={-1}
-                    title={'Visit element'}
+                    title="Visit element"
                   >
                     <ArrowCircleRightIcon />
                   </button>
@@ -392,7 +392,7 @@ const PropertyBasicEditor = observer(
                     className="property-basic-editor__type__visit-btn"
                     onClick={openElement}
                     tabIndex={-1}
-                    title={'Visit element'}
+                    title="Visit element"
                   >
                     <ArrowCircleRightIcon />
                   </button>
@@ -423,7 +423,7 @@ const PropertyBasicEditor = observer(
                 className="uml-element-editor__basic__detail-btn"
                 onClick={selectProperty}
                 tabIndex={-1}
-                title={'See detail'}
+                title="See detail"
               >
                 <LongArrowRightIcon />
               </button>
@@ -450,7 +450,7 @@ const PropertyBasicEditor = observer(
                 })}
                 onClick={deleteProperty}
                 tabIndex={-1}
-                title={'Remove'}
+                title="Remove"
               >
                 <TimesIcon />
               </button>
@@ -679,7 +679,7 @@ const DerivedPropertyBasicEditor = observer(
                   options={propertyTypeOptions}
                   onChange={changePropertyType}
                   value={selectedPropertyType}
-                  placeholder="Choose a data type or enumeration"
+                  placeholder="Choose a type..."
                   filterOption={filterOption}
                   formatOptionLabel={getPackageableElementOptionFormatter({})}
                 />
@@ -1084,7 +1084,7 @@ const SuperTypeEditor = observer(
               options={superTypeOptions}
               onChange={changeType}
               value={selectedType}
-              placeholder={'Choose a class'}
+              placeholder="Choose a class"
               filterOption={filterOption}
               formatOptionLabel={getPackageableElementOptionFormatter({})}
             />
@@ -1092,7 +1092,7 @@ const SuperTypeEditor = observer(
               className="uml-element-editor__basic__detail-btn"
               onClick={visitDerivationSource}
               tabIndex={-1}
-              title={'Visit super type'}
+              title="Visit super type"
             >
               <LongArrowRightIcon />
             </button>
@@ -1102,7 +1102,7 @@ const SuperTypeEditor = observer(
                 disabled={isReadOnly}
                 onClick={deleteSuperType}
                 tabIndex={-1}
-                title={'Remove'}
+                title="Remove"
               >
                 <TimesIcon />
               </button>

package/src/components/editor/edit-panel/uml-editor/ClassQueryBuilder.tsx

@@ -33,7 +33,7 @@ import type { EmbeddedQueryBuilderState } from '../../../../stores/EmbeddedQuery
 import {
   service_initNewService,
   service_setExecution,
-} from '../../../../stores/graphModifier/DSL_Service_GraphModifierHelper.js';
+} from '../../../../stores/shared/modifier/DSL_Service_GraphModifierHelper.js';
 import { useEditorStore } from '../../EditorStoreProvider.js';
 import { NewServiceModal } from '../service-editor/NewServiceModal.js';
 

package/src/components/editor/edit-panel/uml-editor/EnumerationEditor.tsx

@@ -82,7 +82,7 @@ import {
   enum_deleteValue,
   enum_addValue,
   enum_swapValues,
-} from '../../../../stores/graphModifier/DomainGraphModifierHelper.js';
+} from '../../../../stores/shared/modifier/DomainGraphModifierHelper.js';
 import { useApplicationNavigationContext } from '@finos/legend-application';
 import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../stores/LegendStudioApplicationNavigationContext.js';
 
@@ -162,7 +162,7 @@ const EnumBasicEditor = observer(
               disabled={isReadOnly}
               value={enumValue.name}
               onChange={changeValue}
-              placeholder={`Enum name`}
+              placeholder="Enum name"
               validationErrorMessage={
                 isEnumValueDuplicated(enumValue) ? 'Duplicated enum' : undefined
               }
@@ -171,7 +171,7 @@ const EnumBasicEditor = observer(
               className="uml-element-editor__basic__detail-btn"
               onClick={selectValue}
               tabIndex={-1}
-              title={'See detail'}
+              title="See detail"
             >
               <LongArrowRightIcon />
             </button>
@@ -181,7 +181,7 @@ const EnumBasicEditor = observer(
                 disabled={isReadOnly}
                 onClick={deleteValue}
                 tabIndex={-1}
-                title={'Remove'}
+                title="Remove"
               >
                 <TimesIcon />
               </button>
@@ -312,7 +312,7 @@ const EnumEditor = observer(
                 className="panel__header__action"
                 onClick={deselectValue}
                 tabIndex={-1}
-                title={'Close'}
+                title="Close"
               >
                 <TimesIcon />
               </button>

package/src/components/editor/edit-panel/uml-editor/ProfileEditor.tsx

@@ -50,7 +50,7 @@ import {
   tagStereotype_setValue,
   profile_swapTags,
   profile_swapStereotypes,
-} from '../../../../stores/graphModifier/DomainGraphModifierHelper.js';
+} from '../../../../stores/shared/modifier/DomainGraphModifierHelper.js';
 import { useApplicationNavigationContext } from '@finos/legend-application';
 import { LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT_KEY } from '../../../../stores/LegendStudioApplicationNavigationContext.js';
 import { useRef, useCallback } from 'react';
@@ -126,7 +126,7 @@ const TagBasicEditor = observer(
               disabled={isReadOnly}
               value={tag.value}
               onChange={changeValue}
-              placeholder={`Tag value`}
+              placeholder="Tag value"
               validationErrorMessage={
                 isTagDuplicated(tag) ? 'Duplicated tag' : undefined
               }
@@ -137,7 +137,7 @@ const TagBasicEditor = observer(
                 disabled={isReadOnly}
                 onClick={deleteValue}
                 tabIndex={-1}
-                title={'Remove'}
+                title="Remove"
               >
                 <TimesIcon />
               </button>
@@ -222,7 +222,7 @@ const StereotypeBasicEditor = observer(
               disabled={isReadOnly}
               value={stereotype.value}
               onChange={changeValue}
-              placeholder={`Stereotype value`}
+              placeholder="Stereotype value"
               validationErrorMessage={
                 isStereotypeDuplicated(stereotype)
                   ? 'Duplicated stereotype'
@@ -235,7 +235,7 @@ const StereotypeBasicEditor = observer(
                 disabled={isReadOnly}
                 onClick={deleteStereotype}
                 tabIndex={-1}
-                title={'Remove'}
+                title="Remove"
               >
                 <TimesIcon />
               </button>

package/src/components/editor/edit-panel/uml-editor/PropertyEditor.tsx

@@ -57,7 +57,7 @@ import {
   annotatedElement_addTaggedValue,
   annotatedElement_addStereotype,
   annotatedElement_deleteStereotype,
-} from '../../../../stores/graphModifier/DomainGraphModifierHelper.js';
+} from '../../../../stores/shared/modifier/DomainGraphModifierHelper.js';
 
 export const PropertyEditor = observer(
   (props: {
@@ -184,7 +184,7 @@ export const PropertyEditor = observer(
                 className="panel__header__action"
                 onClick={deselectProperty}
                 tabIndex={-1}
-                title={'Close'}
+                title="Close"
               >
                 <TimesIcon />
               </button>

package/src/components/editor/edit-panel/uml-editor/StereotypeSelector.tsx

@@ -37,7 +37,7 @@ import {
 import {
   annotatedElement_swapStereotypes,
   stereotypeReference_setValue,
-} from '../../../../stores/graphModifier/DomainGraphModifierHelper.js';
+} from '../../../../stores/shared/modifier/DomainGraphModifierHelper.js';
 import {
   buildElementOption,
   type PackageableElementOption,
@@ -185,7 +185,7 @@ export const StereotypeSelector = observer(
                 options={profileOptions}
                 onChange={changeProfile}
                 value={selectedProfile}
-                placeholder={'Choose a profile'}
+                placeholder="Choose a profile"
                 filterOption={filterOption}
                 darkMode={Boolean(darkTheme)}
               />
@@ -196,7 +196,7 @@ export const StereotypeSelector = observer(
                 disabled={isStubbed_PackageableElement(stereotype.value._OWNER)}
                 onClick={visitProfile}
                 tabIndex={-1}
-                title={'Visit profile'}
+                title="Visit profile"
               >
                 <ArrowCircleRightIcon />
               </button>
@@ -207,7 +207,7 @@ export const StereotypeSelector = observer(
               options={stereotypeOptions}
               onChange={updateStereotype}
               value={selectedStereotype}
-              placeholder={'Choose a stereotype'}
+              placeholder="Choose a stereotype"
               filterOption={stereotypeFilterOption}
               darkMode={darkTheme ?? false}
             />
@@ -217,7 +217,7 @@ export const StereotypeSelector = observer(
                 disabled={isReadOnly}
                 onClick={deleteStereotype}
                 tabIndex={-1}
-                title={'Remove'}
+                title="Remove"
               >
                 <TimesIcon />
               </button>

package/src/components/editor/edit-panel/uml-editor/TaggedValueEditor.tsx

@@ -41,7 +41,7 @@ import {
   taggedValue_setValue,
   taggedValue_setTag,
   annotatedElement_swapTaggedValues,
-} from '../../../../stores/graphModifier/DomainGraphModifierHelper.js';
+} from '../../../../stores/shared/modifier/DomainGraphModifierHelper.js';
 import {
   buildElementOption,
   type PackageableElementOption,
@@ -198,7 +198,7 @@ export const TaggedValueEditor = observer(
                 options={profileOptions}
                 onChange={changeProfile}
                 value={selectedProfile}
-                placeholder={'Choose a profile'}
+                placeholder="Choose a profile"
                 filterOption={profileFilterOption}
                 darkMode={darkTheme ?? false}
               />
@@ -211,7 +211,7 @@ export const TaggedValueEditor = observer(
                 )}
                 onClick={visitProfile}
                 tabIndex={-1}
-                title={'Visit profile'}
+                title="Visit profile"
               >
                 <ArrowCircleRightIcon />
               </button>
@@ -222,7 +222,7 @@ export const TaggedValueEditor = observer(
               options={tagOptions}
               onChange={changeTag}
               value={selectedTag}
-              placeholder={'Choose a tag'}
+              placeholder="Choose a tag"
               filterOption={tagFilterOption}
               darkMode={Boolean(darkTheme)}
             />
@@ -232,7 +232,7 @@ export const TaggedValueEditor = observer(
                 disabled={isReadOnly}
                 onClick={deleteValue}
                 tabIndex={-1}
-                title={'Remove'}
+                title="Remove"
               >
                 <TimesIcon />
               </button>
@@ -251,7 +251,7 @@ export const TaggedValueEditor = observer(
                   disabled={isReadOnly}
                   value={taggedValue.value}
                   onChange={changeValue}
-                  placeholder={`Value`}
+                  placeholder="Value"
                 />
               )}
               {!isExpanded && (
@@ -263,7 +263,7 @@ export const TaggedValueEditor = observer(
                   disabled={isReadOnly}
                   value={taggedValue.value}
                   onChange={changeValue}
-                  placeholder={`Value`}
+                  placeholder="Value"
                 />
               )}
               <button
@@ -272,7 +272,7 @@ export const TaggedValueEditor = observer(
                 }`}
                 onClick={toggleExpandedMode}
                 tabIndex={-1}
-                title={'Expand/Collapse'}
+                title="Expand/Collapse"
               >
                 {isExpanded ? <LongArrowAltUpIcon /> : <MoreVerticalIcon />}
               </button>

package/src/components/editor/side-bar/Explorer.tsx

@@ -233,8 +233,8 @@ const ExplorerContextMenu = observer(
     };
     const openElementInViewerMode = (): void => {
       if (node && projectId) {
-        applicationStore.navigator.openNewWindow(
-          applicationStore.navigator.generateLocation(
+        applicationStore.navigator.visitAddress(
+          applicationStore.navigator.generateAddress(
             generateViewEntityRoute(projectId, node.packageableElement.path),
           ),
         );
@@ -244,7 +244,7 @@ const ExplorerContextMenu = observer(
       if (node) {
         applicationStore
           .copyTextToClipboard(
-            applicationStore.navigator.generateLocation(
+            applicationStore.navigator.generateAddress(
               editorStore.editorMode.generateElementLink(
                 node.packageableElement.path,
               ),
@@ -343,7 +343,7 @@ const ProjectConfig = observer(() => {
       <button
         className="tree-view__node__label explorer__package-tree__node__label"
         tabIndex={-1}
-        title={'Project configuration'}
+        title="Project configuration"
       >
         config
       </button>

package/src/components/editor/side-bar/ProjectOverview.tsx

@@ -17,7 +17,6 @@
 import { forwardRef, useEffect, useState } from 'react';
 import { observer } from 'mobx-react-lite';
 import { LEGEND_STUDIO_TEST_ID } from '../../LegendStudioTestID.js';
-import { Link } from 'react-router-dom';
 import {
   clsx,
   CustomSelectorInput,
@@ -66,10 +65,10 @@ const ShareProjectModal = observer(
     >();
     const projectId = editorStore.sdlcState.activeProject.projectId;
     const projectLink = selectedVersion
-      ? applicationStore.navigator.generateLocation(
+      ? applicationStore.navigator.generateAddress(
           generateViewVersionRoute(projectId, selectedVersion.id.id),
         )
-      : applicationStore.navigator.generateLocation(
+      : applicationStore.navigator.generateAddress(
           generateViewProjectRoute(projectId),
         );
     const copyProjectLink = (): void => {
@@ -178,6 +177,7 @@ const WorkspaceViewerContextMenu = observer(
 const WorkspaceViewer = observer((props: { workspace: Workspace }) => {
   const { workspace } = props;
   const editorStore = useEditorStore();
+  const applicationStore = useApplicationStore();
   const isActive = areWorkspacesEquivalent(
     editorStore.sdlcState.activeWorkspace,
     workspace,
@@ -193,7 +193,7 @@ const WorkspaceViewer = observer((props: { workspace: Workspace }) => {
       onOpen={onContextMenuOpen}
       onClose={onContextMenuClose}
     >
-      <Link
+      <button
         className={clsx(
           'side-bar__panel__item project-overview__item__link',
           {
@@ -202,14 +202,19 @@ const WorkspaceViewer = observer((props: { workspace: Workspace }) => {
           },
           { 'project-overview__item__link--active': isActive },
         )}
-        rel="noopener noreferrer"
-        target="_blank"
-        to={generateEditorRoute(
-          workspace.projectId,
-          workspace.workspaceId,
-          workspace.workspaceType,
-        )}
-        title={'Go to workspace detail'}
+        tabIndex={-1}
+        onClick={(): void =>
+          applicationStore.navigator.visitAddress(
+            applicationStore.navigator.generateAddress(
+              generateEditorRoute(
+                workspace.projectId,
+                workspace.workspaceId,
+                workspace.workspaceType,
+              ),
+            ),
+          )
+        }
+        title="See workspace"
       >
         <div className="project-overview__item__link__content project-overview__workspace__viewer">
           <div className="project-overview__workspace__viewer-icon">
@@ -223,7 +228,7 @@ const WorkspaceViewer = observer((props: { workspace: Workspace }) => {
             {workspace.workspaceId}
           </div>
         </div>
-      </Link>
+      </button>
     </ContextMenu>
   );
 });
@@ -337,7 +342,7 @@ const ReleaseEditor = observer(() => {
             disabled={!canCreateVersion}
             value={revisionInput.notes}
             onChange={changeNotes}
-            placeholder={'Release notes'}
+            placeholder="Release notes"
           />
           <div className="project-overview__release__editor__actions">
             <button
@@ -385,14 +390,20 @@ const ReleaseEditor = observer(() => {
               <PanelContent>
                 {latestProjectVersion && (
                   <div className="project-overview__release__info__current-version">
-                    <Link
+                    <button
                       className="project-overview__release__info__current-version__link"
-                      rel="noopener noreferrer"
-                      target="_blank"
-                      to={generateViewVersionRoute(
-                        latestProjectVersion.projectId,
-                        latestProjectVersion.id.id,
-                      )}
+                      tabIndex={-1}
+                      onClick={(): void =>
+                        applicationStore.navigator.visitAddress(
+                          applicationStore.navigator.generateAddress(
+                            generateViewVersionRoute(
+                              latestProjectVersion.projectId,
+                              latestProjectVersion.id.id,
+                            ),
+                          ),
+                        )
+                      }
+                      title="See version"
                     >
                       <div className="project-overview__release__info__current-version__link__content">
                         <span className="project-overview__release__info__current-version__link__content__name">
@@ -402,7 +413,7 @@ const ReleaseEditor = observer(() => {
                           {latestProjectVersion.notes}
                         </span>
                       </div>
-                    </Link>
+                    </button>
                   </div>
                 )}
                 {!latestProjectVersion && (
@@ -438,13 +449,18 @@ const ReleaseEditor = observer(() => {
               </div>
               <PanelContent>
                 {commitedReviews.map((review) => (
-                  <Link
+                  <button
                     key={review.id}
                     className="side-bar__panel__item workspace-updater__review__link"
-                    rel="noopener noreferrer"
-                    target="_blank"
-                    to={generateReviewRoute(review.projectId, review.id)}
-                    title={'See review detail'}
+                    tabIndex={-1}
+                    onClick={(): void =>
+                      applicationStore.navigator.visitAddress(
+                        applicationStore.navigator.generateAddress(
+                          generateReviewRoute(review.projectId, review.id),
+                        ),
+                      )
+                    }
+                    title="See review"
                   >
                     <div className="workspace-updater__review">
                       <span className="workspace-updater__review__name">
@@ -454,7 +470,7 @@ const ReleaseEditor = observer(() => {
                         {review.author.name}
                       </span>
                     </div>
-                  </Link>
+                  </button>
                 ))}
               </PanelContent>
             </div>
@@ -499,13 +515,18 @@ const VersionsViewer = observer(() => {
         <PanelLoadingIndicator isLoading={isDispatchingAction} />
         <div className="panel__content__list">
           {versions.map((version) => (
-            <Link
+            <button
               key={version.id.id}
               className="side-bar__panel__item project-overview__item__link"
-              rel="noopener noreferrer"
-              target="_blank"
-              to={generateViewVersionRoute(version.projectId, version.id.id)}
-              title={'See version detail'}
+              tabIndex={-1}
+              onClick={(): void =>
+                applicationStore.navigator.visitAddress(
+                  applicationStore.navigator.generateAddress(
+                    generateViewVersionRoute(version.projectId, version.id.id),
+                  ),
+                )
+              }
+              title="See version"
             >
               <div className="project-overview__item__link__content">
                 <span className="project-overview__item__link__content__name">
@@ -515,7 +536,7 @@ const VersionsViewer = observer(() => {
                   {version.notes}
                 </span>
               </div>
-            </Link>
+            </button>
           ))}
         </div>
       </div>
@@ -829,7 +850,7 @@ export const ProjectOverview = observer(() => {
   const hideShareModal = (): void => setOpenShareModal(false);
   const projectOverviewState = editorStore.projectOverviewState;
   const openProjectWebUrl = (): void =>
-    applicationStore.navigator.openNewWindow(
+    applicationStore.navigator.visitAddress(
       editorStore.sdlcState.activeProject.webUrl,
     );
   const renderOverview = (): React.ReactNode => {

package/src/components/editor/side-bar/WorkflowManager.tsx

@@ -281,9 +281,9 @@ const WorkflowExplorerContextMenu = observer(
     };
     const visitWeburl = (): void => {
       if (node instanceof WorkflowJobTreeNodeData) {
-        applicationStore.navigator.openNewWindow(node.workflowJob.webURL);
+        applicationStore.navigator.visitAddress(node.workflowJob.webURL);
       } else if (node instanceof WorkflowTreeNodeData) {
-        applicationStore.navigator.openNewWindow(node.workflow.webURL);
+        applicationStore.navigator.visitAddress(node.workflow.webURL);
       }
     };
 
@@ -374,7 +374,7 @@ const WorkflowTreeNodeContainer: React.FC<
             rel="noopener noreferrer"
             target="_blank"
             href={node.workflow.webURL}
-            title={'See workflow detail'}
+            title="See workflow detail"
           >
             <div className="workflow-manager__item__link__content">
               <span className="workflow-manager__item__link__content__id">
@@ -396,7 +396,7 @@ const WorkflowTreeNodeContainer: React.FC<
             rel="noopener noreferrer"
             target="_blank"
             href={node.workflowJob.webURL}
-            title={'See job detail'}
+            title="See job detail"
           >
             <div className="workflow-manager__item__link__content">
               <span className="workflow-manager__item__link__content__id">

package/src/components/editor/side-bar/WorkspaceReview.tsx

@@ -16,7 +16,6 @@
 
 import { useRef, useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
-import { Link } from 'react-router-dom';
 import { EntityDiffViewState } from '../../../stores/editor-state/entity-diff-editor-state/EntityDiffViewState.js';
 import { EntityDiffSideBarItem } from '../../editor/edit-panel/diff-editor/EntityDiffView.js';
 import {
@@ -141,7 +140,7 @@ export const WorkspaceReview = observer(() => {
           workspaceReviewState.commitWorkspaceReview(workspaceReview),
         ).catch(applicationStore.alertUnhandledError);
       };
-      if (editorStore.hasUnpushedChanges) {
+      if (editorStore.localChangesState.hasUnpushedChanges) {
         editorStore.setActionAlertInfo({
           message: 'You have unpushed changes',
           prompt:
@@ -154,7 +153,6 @@ export const WorkspaceReview = observer(() => {
               label: 'Proceed to commit review',
               type: ActionAlertActionType.PROCEED_WITH_CAUTION,
               handler: (): void => {
-                editorStore.setIgnoreNavigationBlocking(true);
                 commit();
               },
             },
@@ -284,16 +282,21 @@ export const WorkspaceReview = observer(() => {
                 <div className="workspace-review__title__content">
                   <div
                     className="workspace-review__title__content__input workspace-review__title__content__input--with-link"
-                    title={'See review detail'}
+                    title="See review detail"
                   >
-                    <Link
+                    <button
                       className="workspace-review__title__content__input__link"
-                      rel="noopener noreferrer"
-                      target="_blank"
-                      to={generateReviewRoute(
-                        workspaceReview.projectId,
-                        workspaceReview.id,
-                      )}
+                      tabIndex={-1}
+                      onClick={(): void =>
+                        applicationStore.navigator.visitAddress(
+                          applicationStore.navigator.generateAddress(
+                            generateReviewRoute(
+                              workspaceReview.projectId,
+                              workspaceReview.id,
+                            ),
+                          ),
+                        )
+                      }
                     >
                       <span className="workspace-review__title__content__input__link__review-name">
                         {workspaceReview.title}
@@ -301,7 +304,7 @@ export const WorkspaceReview = observer(() => {
                       <div className="workspace-review__title__content__input__link__btn">
                         <ExternalLinkSquareIcon />
                       </div>
-                    </Link>
+                    </button>
                   </div>
                 </div>
                 <button

package/src/components/editor/side-bar/WorkspaceSyncConflictResolver.tsx

@@ -221,7 +221,7 @@ export const WorkspaceSyncConflictResolver = observer(() => {
                             className="workspace-sync-conflict-resolver__header__tab__close-btn"
                             onClick={closeTab(mergedState)}
                             tabIndex={-1}
-                            title={'Close'}
+                            title="Close"
                           >
                             <TimesIcon />
                           </button>