MBS-12740: Convert Delete attribute page to React

I opted to make this as standard as possible using ConfirmLayout, since it's basically already in the question/confirm pattern. Doing it like this also adds a cancel button, which cannot hurt - IMO it's quite nice to have a way back as a button anyway. Wasn't sure what's a good place for AttributeT so I dumped it into misc for now.
metabrainz · Dec 6, 2022 · 87e9da9 · 87e9da9
1 parent 1fd73c3
commit 87e9da9
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 39 deletions.
diff --git a/lib/MusicBrainz/Server/Controller/Admin/Attributes.pm b/lib/MusicBrainz/Server/Controller/Admin/Attributes.pm
@@ -143,10 +143,24 @@ sub delete : Chained('attribute_base') Args(1) RequireAuth(account_admin) Secure
 
         $c->detach;
     }
+
+    $c->stash(
+        component_path  => 'admin/attributes/DeleteAttribute',
+        component_props => {
+            attribute => $attr->TO_JSON,
+            form => $form->TO_JSON,
+        },
+        current_view    => 'Node',
+    );
+
     if ($c->form_posted_and_valid($form)) {
-        $c->model('MB')->with_transaction(sub {
-            $c->model($model)->delete($id);
-        });
+        if ($form->field('cancel')->input) {
+            # Do nothing
+        } else {
+            $c->model('MB')->with_transaction(sub {
+                $c->model($model)->delete($id);
+            });
+        }
 
         $c->response->redirect($c->uri_for('/admin/attributes', $model));
         $c->detach;

diff --git a/root/admin/attributes/Attribute.js b/root/admin/attributes/Attribute.js
@@ -16,25 +16,6 @@ import expand2react from '../../static/scripts/common/i18n/expand2react.js';
 import yesNo from '../../static/scripts/common/utility/yesNo.js';
 import loopParity from '../../utility/loopParity.js';
 
-type AttributeT =
-  | AreaTypeT
-  | ArtistTypeT
-  | CollectionTypeT
-  | CoverArtTypeT
-  | EventTypeT
-  | GenderT
-  | InstrumentTypeT
-  | LabelTypeT
-  | MediumFormatT
-  | PlaceTypeT
-  | ReleaseGroupSecondaryTypeT
-  | ReleaseGroupTypeT
-  | ReleasePackagingT
-  | ReleaseStatusT
-  | SeriesTypeT
-  | WorkAttributeTypeT
-  | WorkTypeT;
-
 type Props = {
   +attributes: Array<AttributeT>,
   +model: string,

diff --git a/root/admin/attributes/DeleteAttribute.js b/root/admin/attributes/DeleteAttribute.js
@@ -0,0 +1,34 @@
+/*
+ * @flow strict
+ * Copyright (C) 2022 MetaBrainz Foundation
+ *
+ * This file is part of MusicBrainz, the open internet music database,
+ * and is licensed under the GPL version 2, or (at your option) any
+ * later version: http://www.gnu.org/licenses/gpl-2.0.txt
+ */
+
+import * as React from 'react';
+
+import ConfirmLayout from '../../components/ConfirmLayout.js';
+
+type Props = {
+  +attribute: AttributeT,
+  +form: SecureConfirmFormT,
+};
+
+const DeleteAttribute = ({
+  attribute,
+  form,
+}: Props): React.Element<typeof ConfirmLayout> => (
+  <ConfirmLayout
+    form={form}
+    question={exp.l(
+      `Are you sure you wish to remove the
+       <strong>{name}</strong> attribute?`,
+      {name: attribute.name},
+    )}
+    title={l('Remove Attribute')}
+  />
+);
+
+export default DeleteAttribute;
diff --git a/root/admin/attributes/delete.tt b/root/admin/attributes/delete.tt
diff --git a/root/server/components.mjs b/root/server/components.mjs
@@ -39,6 +39,7 @@ export default {
   'account/sso/DiscourseUnconfirmedEmailAddress': (): Promise<mixed> => import('../account/sso/DiscourseUnconfirmedEmailAddress.js'),
   'admin/attributes/Attribute': (): Promise<mixed> => import('../admin/attributes/Attribute.js'),
   'admin/attributes/CannotRemoveAttribute': (): Promise<mixed> => import('../admin/attributes/CannotRemoveAttribute.js'),
+  'admin/attributes/DeleteAttribute': (): Promise<mixed> => import('../admin/attributes/DeleteAttribute.js'),
   'admin/attributes/Index': (): Promise<mixed> => import('../admin/attributes/Index.js'),
   'admin/attributes/Language': (): Promise<mixed> => import('../admin/attributes/Language.js'),
   'admin/attributes/Script': (): Promise<mixed> => import('../admin/attributes/Script.js'),

diff --git a/root/types/misc.js b/root/types/misc.js
@@ -7,6 +7,25 @@
  * later version: http://www.gnu.org/licenses/gpl-2.0.txt
  */
 
+declare type AttributeT =
+  | AreaTypeT
+  | ArtistTypeT
+  | CollectionTypeT
+  | CoverArtTypeT
+  | EventTypeT
+  | GenderT
+  | InstrumentTypeT
+  | LabelTypeT
+  | MediumFormatT
+  | PlaceTypeT
+  | ReleaseGroupSecondaryTypeT
+  | ReleaseGroupTypeT
+  | ReleasePackagingT
+  | ReleaseStatusT
+  | SeriesTypeT
+  | WorkAttributeTypeT
+  | WorkTypeT;
+
 /*
  * See http://search.cpan.org/~lbrocard/Data-Page-2.02/lib/Data/Page.pm
  * Serialized in MusicBrainz::Server::TO_JSON.