ENH Change clear text to delete

client/lang/en.js

@@ -7,9 +7,12 @@ if (typeof(ss) === 'undefined' || typeof(ss.i18n) === 'undefined') {
 } else {
   ss.i18n.addDictionary('en', {
     "LinkField.SAVE_SUCCESS": "Saved link",
+    "LinkField.CONFIRM_ARCHIVE": "Archived link",
     "LinkField.CONFIRM_DELETE": "Deleted link",
+    "LinkField.ARCHIVE_ERROR": "Failed to archive link",
     "LinkField.DELETE_ERROR": "Failed to delete link",
     "LinkField.ADD_LINK": "Add Link",
-    "LinkField.CLEAR": "Clear"
+    "LinkField.ARCHIVE": "Archive",
+    "LinkField.DELETE": "Delete"
   });
 }

client/lang/src/en.json

@@ -1,9 +1,12 @@
 {
     "LinkField.SAVE_SUCCESS": "Saved link",
+    "LinkField.CONFIRM_ARCHIVE": "Archived link",
     "LinkField.CONFIRM_DELETE": "Deleted link",
+    "LinkField.ARCHIVE_ERROR": "Failed to archive link",
     "LinkField.DELETE_ERROR": "Failed to delete link",
     "LinkField.ADD_LINK": "Add Link",
-    "LinkField.CLEAR": "Clear",
+    "LinkField.ARCHIVE": "Archive",
+    "LinkField.DELETE": "Delete",
     "LinkField.LINK_DRAFT_TITLE": "Link has draft changes",
     "LinkField.LINK_DRAFT_LABEL": "Draft",
     "LinkField.LINK_MODIFIED_TITLE": "Link has unpublished changes",

client/src/components/LinkField/LinkField.js

@@ -108,34 +108,28 @@ const LinkField = ({
   }
 
   /**
-   * Update the component when the 'Clear' button in the LinkPicker is clicked
+   * Update the component when the 'Delete' button in the LinkPicker is clicked
    */
-  const onClear = (linkID) => {
+  const onDelete = (linkID) => {
     let endpoint = `${Config.getSection(section).form.linkForm.deleteUrl}/${linkID}`;
     const parsedURL = url.parse(endpoint);
     const parsedQs = qs.parse(parsedURL.query);
     parsedQs.ownerID = ownerID;
     parsedQs.ownerClass = ownerClass;
     parsedQs.ownerRelation = ownerRelation;
     endpoint = url.format({ ...parsedURL, search: qs.stringify(parsedQs)});
+    const versionState = data[linkID]?.versionState || '';
+    const isVersioned = ['draft', 'modified', 'published'].includes(versionState);
+    const successText = isVersioned
+      ? i18n._t('LinkField.ARCHIVE_SUCCESS', 'Archived link')
+      : i18n._t('LinkField.DELETE_SUCCESS', 'Deleted link');
+    const failedText = isVersioned
+      ? i18n._t('LinkField.ARCHIVE_ERROR', 'Failed to archive link')
+      : i18n._t('LinkField.DELETE_ERROR', 'Failed to delete link');
     // CSRF token 'X-SecurityID' headers needs to be present for destructive requests
     backend.delete(endpoint, {}, { 'X-SecurityID': Config.get('SecurityID') })
-      .then(() => {
-        actions.toasts.success(
-          i18n._t(
-            'LinkField.DELETE_SUCCESS',
-            'Deleted link',
-          )
-        );
-      })
-      .catch(() => {
-        actions.toasts.error(
-          i18n._t(
-            'LinkField.DELETE_ERROR',
-            'Failed to delete link',
-          )
-        );
-      });
+      .then(() => actions.toasts.success(successText))
+      .catch(() => actions.toasts.error(failedText));
 
     // update component state
     const newData = {...data};
@@ -167,7 +161,7 @@ const LinkField = ({
         description={data[linkID]?.description}
         versionState={data[linkID]?.versionState}
         typeTitle={type.title || ''}
-        onClear={onClear}
+        onDelete={onDelete}
         onClick={() => { setEditingID(linkID); }}
         canDelete={data[linkID]?.canDelete ? true : false}
       />);

client/src/components/LinkPicker/LinkPicker.scss

@@ -96,6 +96,7 @@
   }
 
   &--unsaved::before,
+  &--unversioned::before,
   &--published::before {
     display: none;
   }
@@ -126,7 +127,7 @@
   padding-left: 3.5rem;
 }
 
-.link-picker__clear {
+.link-picker__delete {
   flex-grow: 0;
 }
 

client/src/components/LinkPicker/LinkPickerTitle.js

@@ -35,7 +35,7 @@ const LinkPickerTitle = ({
   description,
   versionState,
   typeTitle,
-  onClear,
+  onDelete,
   onClick,
   canDelete
 }) => {
@@ -47,6 +47,9 @@ const LinkPickerTitle = ({
     classes[` link-picker__link--${versionState}`] = true;
   }
   const className = classnames(classes);
+  const deleteText = ['unversioned', 'unsaved'].includes(versionState)
+    ? i18n._t('LinkField.DELETE', 'Delete')
+    : i18n._t('LinkField.ARCHIVE', 'Archive');
   return <div className={className}>
     <Button className="link-picker__button font-icon-link"  color="secondary" onClick={stopPropagation(onClick)}>
       <div className="link-picker__link-detail">
@@ -61,7 +64,7 @@ const LinkPickerTitle = ({
       </div>
     </Button>
     {canDelete &&
-      <Button className="link-picker__clear" color="link" onClick={stopPropagation(() => onClear(id))}>{i18n._t('LinkField.CLEAR', 'Clear')}</Button>
+      <Button className="link-picker__delete" color="link" onClick={stopPropagation(() => onDelete(id))}>{deleteText}</Button>
     }
   </div>
 };
@@ -72,7 +75,7 @@ LinkPickerTitle.propTypes = {
   description: PropTypes.string,
   versionState: PropTypes.string,
   typeTitle: PropTypes.string.isRequired,
-  onClear: PropTypes.func.isRequired,
+  onDelete: PropTypes.func.isRequired,
   onClick: PropTypes.func.isRequired,
   canDelete: PropTypes.bool.isRequired,
 };

client/src/components/LinkPicker/tests/LinkPicker-story.js

@@ -25,13 +25,13 @@ onSelect.toString = () => 'onSelect';
 const onEdit = action('onEdit');
 onEdit.toString = () => 'onEdit';
 
-const onClear = action('onClear');
-onClear.toString = () => 'onClear';
+const onDelete = action('onDelete');
+onDelete.toString = () => 'onDelete';
 
 const props = {
   types,
   onSelect,
-  onClear,
+  onDelete,
   onEdit
 }
 

client/src/components/LinkPicker/tests/LinkPickerTitle-test.js

@@ -11,7 +11,7 @@ function makeProps(obj = {}) {
     description: 'My description',
     versionState: 'draft',
     typeTitle: 'Phone',
-    onClear: () => {},
+    onDelete: () => {},
     onClick: () => {},
     ...obj
   };
@@ -22,13 +22,13 @@ test('LinkPickerTitle render() should display clear button if can delete', () =>
     canDelete: true
   })}
   />);
-  expect(container.querySelectorAll('.link-picker__clear')).toHaveLength(1);
+  expect(container.querySelectorAll('.link-picker__delete')).toHaveLength(1);
 });
 
 test('LinkPickerTitle render() should not display clear button if cannot delete', () => {
   const { container } = render(<LinkPickerTitle {...makeProps({
     canDelete: false
   })}
   />);
-  expect(container.querySelectorAll('.link-picker__clear')).toHaveLength(0);
+  expect(container.querySelectorAll('.link-picker__delete')).toHaveLength(0);
 });

src/Models/Link.php

@@ -307,7 +307,7 @@ public function getVersionedState(): string
         }
         // Unversioned - links are saved in the modal so there is no 'dirty state' and
         // when undversioned saved is the same thing as published
-        return 'published';
+        return 'unversioned';
     }
 
     /**

tests/php/Models/LinkTest.php

@@ -148,7 +148,7 @@ public function testGetVersionedState(): void
         $link = Link::create(['Title' => '123']);
         $this->assertEquals('unsaved', $link->getVersionedState());
         $link->write();
-        $this->assertEquals('published', $link->getVersionedState());
+        $this->assertEquals('unversioned', $link->getVersionedState());
     }
 
     /**