@truedat/dd 7.5.4 → 7.5.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "7.5.4",
+  "version": "7.5.6",
   "description": "Truedat Web Data Dictionary",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -34,7 +34,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "7.5.4",
+    "@truedat/test": "7.5.6",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -88,9 +88,9 @@
   },
   "dependencies": {
     "@apollo/client": "^3.7.1",
-    "@truedat/auth": "7.5.4",
-    "@truedat/core": "7.5.4",
-    "@truedat/df": "7.5.4",
+    "@truedat/auth": "7.5.6",
+    "@truedat/core": "7.5.6",
+    "@truedat/df": "7.5.6",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "path-to-regexp": "^1.7.0",
@@ -115,5 +115,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "e41d75322f4e11f804d9e834c21f6416c8586963"
+  "gitHead": "23d70104f45068aea9795621334ee2df022d21b2"
 }

package/src/components/CatalogViewConfigs.js

@@ -86,8 +86,9 @@ export const CatalogViewConfigs = ({
                     <Button
                       aria-label="delete"
                       basic
-                      icon="trash"
+                      icon="trash alternate outline"
                       color="red"
+                      size="mini"
                     />
                   }
                   header={

package/src/components/GrantApprovalRuleConditions.js

@@ -107,16 +107,21 @@ export default function GrantApprovalRuleConditions({
               </Grid.Column>
               <Grid.Column width={1}>
                 {_.size(value) !== 1 ? (
-                  <Icon
-                    name="trash"
-                    className="selectable"
+                  <Button
+                    basic
+                    icon
+                    color="red"
+                    size="mini"
+                    className="selectable "
                     onClick={() =>
                       onChange([
                         ..._.slice(0, key)(value),
                         ..._.slice(key + 1, _.size(value))(value),
                       ])
                     }
-                  />
+                  >
+                    <Icon name="trash alternate outline" color="red" />
+                  </Button>
                 ) : null}
               </Grid.Column>
             </Grid.Row>

package/src/components/GrantRequest.js

@@ -32,6 +32,10 @@ export const GrantRequest = ({ grantRequest, template }) => {
   const user = grantRequest?._embedded?.group?._embedded?.user?.user_name;
   const createdBy =
     grantRequest?._embedded?.group?._embedded?.created_by?.user_name;
+
+  const showReason =
+    _.includes(grantRequest?.status)(["processing", "processed", "failed"]) &&
+    !_.isEmpty(grantRequest?.status_reason);
   return (
     <>
       <GenericCrumbs
@@ -43,7 +47,7 @@ export const GrantRequest = ({ grantRequest, template }) => {
           <Segment>
             <GrantRequestHeader />
             <List size="big" relaxed="very">
-              {data_structure && (
+              {data_structure ? (
                 <List.Item>
                   <List.Content>
                     <List.Header>
@@ -55,7 +59,7 @@ export const GrantRequest = ({ grantRequest, template }) => {
                       <Link to={linkTo.STRUCTURE(data_structure)}>{path}</Link>
                     </List.Description>
                   </List.Content>
-                  {rows && (
+                  {rows ? (
                     <List size="small">
                       <List.Item>
                         <ConditionSummary
@@ -65,9 +69,9 @@ export const GrantRequest = ({ grantRequest, template }) => {
                         />
                       </List.Item>
                     </List>
-                  )}
+                  ) : null}
                 </List.Item>
-              )}
+              ) : null}
               {user && (
                 <List.Item>
                   <List.Header>
@@ -78,7 +82,7 @@ export const GrantRequest = ({ grantRequest, template }) => {
                   </List.Description>
                 </List.Item>
               )}
-              {createdBy && createdBy !== user && (
+              {createdBy && createdBy !== user ? (
                 <List.Item>
                   <List.Header>
                     {formatMessage({ id: "grantRequest.header.createdBy" })}
@@ -87,7 +91,7 @@ export const GrantRequest = ({ grantRequest, template }) => {
                     <Label>{createdBy}</Label>
                   </List.Description>
                 </List.Item>
-              )}
+              ) : null}
               <List.Item>
                 <List.Header>
                   {formatMessage({ id: "grantRequest.header.status" })}
@@ -100,13 +104,28 @@ export const GrantRequest = ({ grantRequest, template }) => {
                   </Label>
                 </List.Description>
               </List.Item>
+              {showReason ? (
+                <List.Item>
+                  <List.Header>
+                    {formatMessage({ id: "grantRequest.header.reason" })}
+                  </List.Header>
+                  <List.Description>
+                    <Label>
+                      {formatMessage({
+                        id: `grantRequest.content.${grantRequest?.status_reason}`,
+                        defaultMessage: grantRequest?.status_reason,
+                      })}
+                    </Label>
+                  </List.Description>
+                </List.Item>
+              ) : null}
             </List>
-            {dynamic_content && template && (
+            {dynamic_content && template ? (
               <DynamicFormViewer
                 template={template}
                 content={dynamic_content}
               />
-            )}
+            ) : null}
           </Segment>
         </Grid.Column>
         <Grid.Column width={4}>

package/src/components/ReferenceDatasetActions.js

@@ -2,8 +2,8 @@ import React from "react";
 import PropTypes from "prop-types";
 import { Link } from "react-router-dom";
 import { connect } from "react-redux";
-import { useIntl } from "react-intl";
-import { Button } from "semantic-ui-react";
+import { FormattedMessage, useIntl } from "react-intl";
+import { Button, Icon } from "semantic-ui-react";
 import { useAuthorized } from "@truedat/core/hooks";
 import { ConfirmModal, GroupActions } from "@truedat/core/components";
 import { linkTo } from "@truedat/core/routes";
@@ -15,10 +15,13 @@ export const ConfirmDeleteModal = ({ onConfirm, name, id }) => {
     <ConfirmModal
       icon="trash"
       trigger={
-        <Button
-          icon="trash"
-          content={formatMessage({ id: "actions.delete" })}
-        />
+        <Button>
+          <Icon name="trash alternate outline" color="red" />
+          <FormattedMessage
+            id={"actions.delete"}
+            defaultMessage={"actions.delete"}
+          />
+        </Button>
       }
       header={formatMessage({
         id: "referenceDataset.actions.delete.confirmation.header",

package/src/components/StructureDeleteButton.js

@@ -13,7 +13,7 @@ export const StructureDeleteButton = ({ structure, deleteStructure }) => {
     <ConfirmModal
       trigger={
         <Button
-          icon={<Icon name="trash alternate" color="red" />}
+          icon={<Icon name="trash alternate outline" color="red" />}
           className="basic"
         />
       }

package/src/components/StructureNoteActions.js

@@ -3,7 +3,7 @@ import React from "react";
 import { Link } from "react-router-dom";
 import { connect } from "react-redux";
 import PropTypes from "prop-types";
-import { Button } from "semantic-ui-react";
+import { Button, Icon } from "semantic-ui-react";
 import { FormattedMessage } from "react-intl";
 import { ConfirmModal, GroupActions } from "@truedat/core/components";
 import { linkTo } from "@truedat/core/routes";
@@ -13,15 +13,13 @@ export const ModalDelete = ({ modalOnConfirm, modalAction, modalIcon }) => (
   <ConfirmModal
     icon="trash"
     trigger={
-      <Button
-        icon={modalIcon}
-        content={
-          <FormattedMessage
-            id={`structure.notes.actions.${modalAction}`}
-            defaultMessage={modalAction}
-          />
-        }
-      />
+      <Button icon={modalIcon}>
+        <Icon name={modalIcon} color={"red"} />
+        <FormattedMessage
+          id={`structure.notes.actions.${modalAction}`}
+          defaultMessage={modalAction}
+        />
+      </Button>
     }
     header={
       <FormattedMessage
@@ -50,7 +48,7 @@ export const StructureNoteActions = ({
   structure,
 }) => {
   const actionToIcon = {
-    deleted: "trash",
+    deleted: "trash alternate outline",
     edited: "edit",
     rejected: "thumbs down outline",
     published: "paper plane",
@@ -100,7 +98,8 @@ export const StructureNoteActions = ({
             modalAction: action,
           }
         : baseAction;
-    })
+    }),
+    _.sortBy((action) => (action.value === "deleted" ? 1 : 0))
   )(actions);
 
   return _.isEmpty(parsedActions) ? null : (

package/src/components/StructureSelectorInputFieldJoin.js

@@ -2,7 +2,7 @@ import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
-import { Dropdown, Grid, Icon, Popup } from "semantic-ui-react";
+import { Button, Dropdown, Grid, Icon, Popup } from "semantic-ui-react";
 import { getStructureFieldOptionValue } from "../selectors/getStructureFieldOptionValue";
 import StructureFieldsDropdown from "./StructureFieldsDropdown";
 
@@ -91,11 +91,16 @@ const JoinClause = ({
       </Grid.Column>
       <Grid.Column width={1}>
         {idx > 0 && (
-          <Icon
-            name="trash"
+          <Button
+            icon
+            color="red"
+            basic
+            size="mini"
             className="selectable"
             onClick={() => deleteClause(idx)}
-          />
+          >
+            <Icon name="trash alternate outline" color="red" />
+          </Button>
         )}
       </Grid.Column>
     </Grid>

package/src/components/StructureStructureLinks.js

@@ -76,12 +76,13 @@ Edge.propTypes = {
 export const DeleteLink = ({ deleteStructureStructureLink, structureLink }) => {
   return !structureLink._actions.delete_struct_to_struct_link ? null : (
     <ConfirmModal
-      icon="trash"
       trigger={
         <Button
           id={`delete-link-${structureLink.source.id}-${structureLink.target.id}`}
-          icon="trash alternate"
+          basic
+          icon="trash alternate outline"
           color="red"
+          size="mini"
         />
       }
       header={
@@ -96,7 +97,11 @@ export const DeleteLink = ({ deleteStructureStructureLink, structureLink }) => {
             source: { id: sourceStructureId },
             target: { id: targetStructureId },
             id: dataStructureLinkId,
-          }) => ({ dataStructureLinkId, sourceStructureId, targetStructureId }),
+          }) => ({
+            dataStructureLinkId,
+            sourceStructureId,
+            targetStructureId,
+          }),
           (destructuredLink) => deleteStructureStructureLink(destructuredLink)
         )(structureLink)
       }

package/src/components/TagCards.js

@@ -40,7 +40,9 @@ export const TagCards = ({ deleteTag, tags }) =>
             <div className="ui actions">
               <ConfirmModal
                 icon="trash"
-                trigger={<Button icon="trash" basic color="red" />}
+                trigger={
+                  <Button icon="trash alternate outline" basic color="red" />
+                }
                 header={
                   <FormattedMessage id="tags.actions.delete.confirmation.header" />
                 }

package/src/components/__tests__/GrantRequest.spec.js

@@ -74,6 +74,7 @@ describe("<GrantRequest />", () => {
         "ruleImplementations.summary.headers.filters": "filters",
       },
     },
+    fallback: "lazy",
   };
 
   it("matches the latest snapshot", () => {
@@ -120,7 +121,7 @@ describe("<GrantRequest />", () => {
 
     const { container } = render(
       <Suspense fallback={null}>
-        <GrantRequest {...{ ...props, failedGrantRequest }} />
+        <GrantRequest {...{ ...props, grantRequest: failedGrantRequest }} />
       </Suspense>,
       renderOpts
     );

package/src/components/__tests__/StructureSelectorInputFieldJoin.spec.js

@@ -12,7 +12,7 @@ describe("<StructureSelectorInputFieldJoin />", () => {
     const props = {
       structures: [{ id: "123" }, { id: "456" }],
       selectedStructure: { id: "456" },
-      handleSelectField: jest.fn()
+      handleSelectField: jest.fn(),
     };
     const wrapper = shallow(<StructureSelectorInputFieldJoin {...props} />);
     expect(wrapper).toMatchSnapshot();
@@ -25,10 +25,10 @@ describe("<StructureSelectorInputFieldJoin />", () => {
         id: "456",
         clauses: [
           { left: { id: "5" }, right: { id: "6" } },
-          { left: { id: "7" }, right: { id: "8" } }
-        ]
+          { left: { id: "7" }, right: { id: "8" } },
+        ],
       },
-      handleSelectField: jest.fn()
+      handleSelectField: jest.fn(),
     };
     const wrapper = shallow(<StructureSelectorInputFieldJoin {...props} />);
     expect(wrapper).toMatchSnapshot();
@@ -42,25 +42,19 @@ describe("<StructureSelectorInputFieldJoin />", () => {
         id: "456",
         clauses: [
           { left: { id: "5" }, right: { id: "6" } },
-          { left: { id: "7" }, right: { id: "8" } }
-        ]
+          { left: { id: "7" }, right: { id: "8" } },
+        ],
       },
-      handleSelectField
+      handleSelectField,
     };
     const wrapper = shallow(<StructureSelectorInputFieldJoin {...props} />);
 
-    wrapper
-      .find("JoinClause")
-      .at(0)
-      .invoke("handleChange")(
-      "left",
-      1
-    )({
-      data_structure_id: "999"
+    wrapper.find("JoinClause").at(0).invoke("handleChange")("left", 1)({
+      data_structure_id: "999",
     });
     expect(handleSelectField.mock.calls[0][0]).toEqual([
       { left: { id: "5" }, right: { id: "6" } },
-      { left: { id: "999" }, right: { id: "8" } }
+      { left: { id: "999" }, right: { id: "8" } },
     ]);
   });
 
@@ -71,24 +65,19 @@ describe("<StructureSelectorInputFieldJoin />", () => {
         { id: "5" },
         { id: "7" },
         { id: "5" },
-        { id: "8" }
+        { id: "8" },
       ],
       selectedStructure: {
         id: "456",
         clauses: [
           { left: { id: "5" }, right: { id: "6" } },
-          { left: { id: "7" }, right: { id: "8" } }
-        ]
+          { left: { id: "7" }, right: { id: "8" } },
+        ],
       },
-      handleSelectField: jest.fn()
+      handleSelectField: jest.fn(),
     };
     const wrapper = shallow(<StructureSelectorInputFieldJoin {...props} />);
-    expect(
-      wrapper
-        .find("JoinClause")
-        .at(1)
-        .dive()
-    ).toMatchSnapshot();
+    expect(wrapper.find("JoinClause").at(1).dive()).toMatchSnapshot();
   });
 
   it("calls handleSelectedField when delete is clicked", () => {
@@ -99,27 +88,22 @@ describe("<StructureSelectorInputFieldJoin />", () => {
         { id: "5" },
         { id: "7" },
         { id: "5" },
-        { id: "8" }
+        { id: "8" },
       ],
       selectedStructure: {
         id: "456",
         clauses: [
           { left: { id: "5" }, right: { id: "6" } },
-          { left: { id: "7" }, right: { id: "8" } }
-        ]
+          { left: { id: "7" }, right: { id: "8" } },
+        ],
       },
-      handleSelectField
+      handleSelectField,
     };
     const wrapper = shallow(<StructureSelectorInputFieldJoin {...props} />);
 
-    wrapper
-      .find("JoinClause")
-      .at(1)
-      .dive()
-      .find("Icon")
-      .invoke("onClick")();
+    wrapper.find("JoinClause").at(1).dive().find("Button").invoke("onClick")();
     expect(handleSelectField.mock.calls[0][0]).toEqual([
-      { left: { id: "5" }, right: { id: "6" } }
+      { left: { id: "5" }, right: { id: "6" } },
     ]);
   });
 });

package/src/components/__tests__/__snapshots__/GrantApprovalRuleConditions.spec.js.snap

@@ -731,10 +731,14 @@ exports[`<GrantApprovalRuleConditions /> matches the last snapshot with values 1
       <div
         class="one wide column"
       >
-        <i
-          aria-hidden="true"
-          class="trash icon selectable"
-        />
+        <button
+          class="ui red mini basic icon button selectable "
+        >
+          <i
+            aria-hidden="true"
+            class="red trash alternate outline icon"
+          />
+        </button>
       </div>
     </div>
     <div
@@ -963,10 +967,14 @@ exports[`<GrantApprovalRuleConditions /> matches the last snapshot with values 1
       <div
         class="one wide column"
       >
-        <i
-          aria-hidden="true"
-          class="trash icon selectable"
-        />
+        <button
+          class="ui red mini basic icon button selectable "
+        >
+          <i
+            aria-hidden="true"
+            class="red trash alternate outline icon"
+          />
+        </button>
       </div>
     </div>
     <div

package/src/components/__tests__/__snapshots__/GrantApprovalRuleForm.spec.js.snap

@@ -381,10 +381,14 @@ exports[`<GrantApprovalRuleForm /> matches the last snapshot 1`] = `
           <div
             class="one wide column"
           >
-            <i
-              aria-hidden="true"
-              class="trash icon selectable"
-            />
+            <button
+              class="ui red mini basic icon button selectable "
+            >
+              <i
+                aria-hidden="true"
+                class="red trash alternate outline icon"
+              />
+            </button>
           </div>
         </div>
         <div
@@ -618,10 +622,14 @@ exports[`<GrantApprovalRuleForm /> matches the last snapshot 1`] = `
           <div
             class="one wide column"
           >
-            <i
-              aria-hidden="true"
-              class="trash icon selectable"
-            />
+            <button
+              class="ui red mini basic icon button selectable "
+            >
+              <i
+                aria-hidden="true"
+                class="red trash alternate outline icon"
+              />
+            </button>
           </div>
         </div>
         <div

package/src/components/__tests__/__snapshots__/GrantRequest.spec.js.snap

@@ -496,98 +496,23 @@ exports[`<GrantRequest /> matches the latest snapshot with failed status 1`] = `
                 </a>
               </div>
             </div>
+          </div>
+          <div
+            class="item"
+            role="listitem"
+          >
             <div
-              class="ui small list"
-              role="list"
+              class="header"
+            >
+              user
+            </div>
+            <div
+              class="description"
             >
               <div
-                class="item"
-                role="listitem"
+                class="ui label"
               >
-                <h3
-                  class="ui header"
-                >
-                  <i
-                    aria-hidden="true"
-                    class="setting small icon"
-                  />
-                  <div
-                    class="content"
-                  >
-                    filters
-                  </div>
-                </h3>
-                <div
-                  class="ui segment"
-                >
-                  <table
-                    class="ui very basic table condition-summary"
-                  >
-                    <thead
-                      class=""
-                    >
-                      <tr
-                        class=""
-                      >
-                        <th
-                          class=""
-                        >
-                          field
-                        </th>
-                        <th
-                          class=""
-                        >
-                          operator
-                        </th>
-                        <th
-                          class=""
-                        >
-                          values
-                        </th>
-                      </tr>
-                    </thead>
-                    <tbody
-                      class=""
-                    >
-                      <tr
-                        class=""
-                      >
-                        <td
-                          class="five wide"
-                        >
-                          <a
-                            href="/structures/1"
-                          >
-                            <div
-                              class="highlighted"
-                            >
-                              foo
-                            </div>
-                             
-                          </a>
-                        </td>
-                        <td
-                          class="five wide"
-                        >
-                          <span
-                            class="highlighted"
-                          >
-                            "eq"
-                          </span>
-                        </td>
-                        <td
-                          class="five wide"
-                        >
-                          <span
-                            class="highlighted"
-                          >
-                            "2021-10-05 08:15:00 "
-                          </span>
-                        </td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </div>
+                user
               </div>
             </div>
           </div>
@@ -598,7 +523,7 @@ exports[`<GrantRequest /> matches the latest snapshot with failed status 1`] = `
             <div
               class="header"
             >
-              user
+              status
             </div>
             <div
               class="description"
@@ -606,7 +531,7 @@ exports[`<GrantRequest /> matches the latest snapshot with failed status 1`] = `
               <div
                 class="ui label"
               >
-                user
+                Failed
               </div>
             </div>
           </div>
@@ -617,7 +542,7 @@ exports[`<GrantRequest /> matches the latest snapshot with failed status 1`] = `
             <div
               class="header"
             >
-              status
+              grantRequest.header.reason
             </div>
             <div
               class="description"
@@ -625,7 +550,7 @@ exports[`<GrantRequest /> matches the latest snapshot with failed status 1`] = `
               <div
                 class="ui label"
               >
-                pending
+                there is always a reason
               </div>
             </div>
           </div>

package/src/components/__tests__/__snapshots__/ReferenceDataset.spec.js.snap

@@ -115,7 +115,7 @@ exports[`<ReferenceDataset /> edit dataset view matches the latest snapshot 1`]
               >
                 <i
                   aria-hidden="true"
-                  class="trash icon"
+                  class="red trash alternate outline icon"
                 />
                 Delete
               </button>
@@ -404,7 +404,7 @@ exports[`<ReferenceDataset /> show dataset view matches the latest snapshot 1`]
               >
                 <i
                   aria-hidden="true"
-                  class="trash icon"
+                  class="red trash alternate outline icon"
                 />
                 Delete
               </button>

package/src/components/__tests__/__snapshots__/ReferenceDatasetActions.spec.js.snap

@@ -56,7 +56,7 @@ exports[`<ReferenceDatasetActions /> matches the latest snapshot 1`] = `
       >
         <i
           aria-hidden="true"
-          class="trash icon"
+          class="red trash alternate outline icon"
         />
         Delete
       </button>

package/src/components/__tests__/__snapshots__/ReferenceDatasetHeader.spec.js.snap

@@ -93,7 +93,7 @@ exports[`<ReferenceDatasetHeader /> matches the latest snapshot 1`] = `
             >
               <i
                 aria-hidden="true"
-                class="trash icon"
+                class="red trash alternate outline icon"
               />
               Delete
             </button>

package/src/components/__tests__/__snapshots__/ReferenceDatasetRoutes.spec.js.snap

@@ -436,7 +436,7 @@ exports[`<ReferenceDatasetRoutes /> matches the latest snapshot (view route) 1`]
               >
                 <i
                   aria-hidden="true"
-                  class="trash icon"
+                  class="red trash alternate outline icon"
                 />
                 Delete
               </button>

package/src/components/__tests__/__snapshots__/StructureDeleteButton.spec.js.snap

@@ -7,7 +7,7 @@ exports[`<StructureDeleteButton /> matches the latest snapshot 1`] = `
   >
     <i
       aria-hidden="true"
-      class="red trash alternate icon"
+      class="red trash alternate outline icon"
     />
   </button>
 </div>

package/src/components/__tests__/__snapshots__/StructureSelectorInputFieldJoin.spec.js.snap

@@ -76,12 +76,21 @@ exports[`<StructureSelectorInputFieldJoin /> matches the latest JoinClause snaps
   <GridColumn
     width={1}
   >
-    <Icon
-      as="i"
+    <Button
+      as="button"
+      basic={true}
       className="selectable"
-      name="trash"
+      color="red"
+      icon={true}
       onClick={[Function]}
-    />
+      size="mini"
+    >
+      <Icon
+        as="i"
+        color="red"
+        name="trash alternate outline"
+      />
+    </Button>
   </GridColumn>
 </Grid>
 `;

package/src/components/__tests__/__snapshots__/StructureSummary.spec.js.snap

@@ -57,7 +57,7 @@ exports[`<StructureSummary /> matches the latest snapshot 1`] = `
         >
           <i
             aria-hidden="true"
-            class="red trash alternate icon"
+            class="red trash alternate outline icon"
           />
         </button>
       </div>
@@ -208,7 +208,7 @@ exports[`<StructureSummary /> matches the latest snapshot with alias 1`] = `
         >
           <i
             aria-hidden="true"
-            class="red trash alternate icon"
+            class="red trash alternate outline icon"
           />
         </button>
       </div>

package/src/components/__tests__/__snapshots__/TagCards.spec.js.snap

@@ -34,7 +34,7 @@ exports[`<TagCards /> matches the latest snapshot, renders a link for each tag 1
           >
             <i
               aria-hidden="true"
-              class="trash icon"
+              class="trash alternate outline icon"
             />
           </button>
         </div>
@@ -69,7 +69,7 @@ exports[`<TagCards /> matches the latest snapshot, renders a link for each tag 1
           >
             <i
               aria-hidden="true"
-              class="trash icon"
+              class="trash alternate outline icon"
             />
           </button>
         </div>