ref(issue-grouping-settings): Open confirm modal if hash (#28299)

static/app/views/settings/projectIssueGrouping/index.tsx

@@ -51,7 +51,7 @@ class ProjectIssueGrouping extends AsyncView<Props, State> {
 
   renderBody() {
     const {groupingConfigs} = this.state;
-    const {organization, project, params} = this.props;
+    const {organization, project, params, location} = this.props;
     const {orgId, projectId} = params;
     const endpoint = `/projects/${orgId}/${projectId}/`;
     const access = new Set(organization.access);
@@ -119,6 +119,7 @@ class ProjectIssueGrouping extends AsyncView<Props, State> {
             project={project}
             api={this.api}
             onUpgrade={this.fetchData}
+            location={location}
           />
         </Form>
       </Fragment>

static/app/views/settings/projectIssueGrouping/upgradeGrouping.tsx

@@ -1,11 +1,12 @@
-import {Fragment} from 'react';
+import {Fragment, useEffect} from 'react';
+import {Location} from 'history';
 
 import {addLoadingMessage, clearIndicators} from 'app/actionCreators/indicator';
 import ProjectActions from 'app/actions/projectActions';
 import {Client} from 'app/api';
 import Alert from 'app/components/alert';
 import Button from 'app/components/button';
-import Confirm from 'app/components/confirm';
+import {openConfirmModal} from 'app/components/confirm';
 import {Panel, PanelBody, PanelHeader} from 'app/components/panels';
 import {t, tct} from 'app/locale';
 import {EventGroupingConfig, Organization, Project} from 'app/types';
@@ -16,6 +17,8 @@ import TextBlock from 'app/views/settings/components/text/textBlock';
 
 import {getGroupingChanges, getGroupingRisk} from './utils';
 
+const upgradeGroupingId = 'upgrade-grouping';
+
 type Props = {
   groupingConfigs: EventGroupingConfig[];
   organization: Organization;
@@ -23,6 +26,7 @@ type Props = {
   project: Project;
   onUpgrade: () => void;
   api: Client;
+  location: Location;
 };
 
 function UpgradeGrouping({
@@ -32,6 +36,7 @@ function UpgradeGrouping({
   project,
   onUpgrade,
   api,
+  location,
 }: Props) {
   const hasAccess = organization.access.includes('project:write');
   const {updateNotes, riskLevel, latestGroupingConfig} = getGroupingChanges(
@@ -40,18 +45,31 @@ function UpgradeGrouping({
   );
   const {riskNote, alertType} = getGroupingRisk(riskLevel);
   const noUpdates = !latestGroupingConfig;
+  const priority = riskLevel >= 2 ? 'danger' : 'primary';
 
-  const newData: Record<string, string | number> = {};
-  if (latestGroupingConfig) {
-    const now = Math.floor(new Date().getTime() / 1000);
-    const ninety_days = 3600 * 24 * 90;
+  useEffect(() => {
+    if (location.hash !== `#${upgradeGroupingId}` || noUpdates || !groupingConfigs) {
+      return;
+    }
+    handleOpenConfirmModal();
+  }, [location.hash]);
 
-    newData.groupingConfig = latestGroupingConfig.id;
-    newData.secondaryGroupingConfig = project.groupingConfig;
-    newData.secondaryGroupingExpiry = now + ninety_days;
+  if (!groupingConfigs) {
+    return null;
   }
 
-  const handleUpgrade = async () => {
+  async function handleConfirmUpgrade() {
+    const newData: Record<string, string | number> = {};
+
+    if (latestGroupingConfig) {
+      const now = Math.floor(new Date().getTime() / 1000);
+      const ninety_days = 3600 * 24 * 90;
+
+      newData.groupingConfig = latestGroupingConfig.id;
+      newData.secondaryGroupingConfig = project.groupingConfig;
+      newData.secondaryGroupingExpiry = now + ninety_days;
+    }
+
     addLoadingMessage(t('Changing grouping\u2026'));
     try {
       const response = await api.requestPromise(
@@ -67,38 +85,40 @@ function UpgradeGrouping({
     } catch {
       handleXhrErrorResponse(t('Unable to upgrade config'));
     }
-  };
-
-  if (!groupingConfigs) {
-    return null;
   }
 
-  function getModalMessage() {
-    return (
-      <Fragment>
-        <TextBlock>
-          <strong>{t('Upgrade Grouping Strategy')}</strong>
-        </TextBlock>
-        <TextBlock>
-          {t(
-            'You can upgrade the grouping strategy to the latest but this is an irreversible operation.'
-          )}
-        </TextBlock>
-        <TextBlock>
-          <strong>{t('New Behavior')}</strong>
-          <div dangerouslySetInnerHTML={{__html: marked(updateNotes)}} />
-        </TextBlock>
-        <TextBlock>
-          <Alert type={alertType}>{riskNote}</Alert>
-        </TextBlock>
-      </Fragment>
-    );
+  function handleOpenConfirmModal() {
+    openConfirmModal({
+      confirmText: t('Upgrade'),
+      priority,
+      onConfirm: handleConfirmUpgrade,
+      message: (
+        <Fragment>
+          <TextBlock>
+            <strong>{t('Upgrade Grouping Strategy')}</strong>
+          </TextBlock>
+          <TextBlock>
+            {t(
+              'You can upgrade the grouping strategy to the latest but this is an irreversible operation.'
+            )}
+          </TextBlock>
+          <TextBlock>
+            <strong>{t('New Behavior')}</strong>
+            <div dangerouslySetInnerHTML={{__html: marked(updateNotes)}} />
+          </TextBlock>
+          <TextBlock>
+            <Alert type={alertType}>{riskNote}</Alert>
+          </TextBlock>
+        </Fragment>
+      ),
+    });
   }
 
   function getButtonTitle() {
     if (!hasAccess) {
       return t('You do not have sufficient permissions to do this');
     }
+
     if (noUpdates) {
       return t('You are already on the latest version');
     }
@@ -107,7 +127,7 @@ function UpgradeGrouping({
   }
 
   return (
-    <Panel id="upgrade-grouping">
+    <Panel id={upgradeGroupingId}>
       <PanelHeader>{t('Upgrade Grouping')}</PanelHeader>
       <PanelBody>
         <Field
@@ -120,24 +140,17 @@ function UpgradeGrouping({
           )}
           disabled
         >
-          <Confirm
-            disabled={noUpdates}
-            onConfirm={handleUpgrade}
-            priority={riskLevel >= 2 ? 'danger' : 'primary'}
-            confirmText={t('Upgrade')}
-            message={getModalMessage()}
-          >
-            <div>
-              <Button
-                disabled={!hasAccess || noUpdates}
-                title={getButtonTitle()}
-                type="button"
-                priority={riskLevel >= 2 ? 'danger' : 'primary'}
-              >
-                {t('Upgrade Grouping Strategy')}
-              </Button>
-            </div>
-          </Confirm>
+          <div>
+            <Button
+              onClick={handleOpenConfirmModal}
+              disabled={!hasAccess || noUpdates}
+              title={getButtonTitle()}
+              type="button"
+              priority={priority}
+            >
+              {t('Upgrade Grouping Strategy')}
+            </Button>
+          </div>
         </Field>
       </PanelBody>
     </Panel>