@truedat/bg 8.5.6 → 8.5.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/bg",
-  "version": "8.5.6",
+  "version": "8.5.8",
   "description": "Truedat Web Business Glossary",
   "sideEffects": [
     "**/*.css",
@@ -54,7 +54,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "8.5.6",
+    "@truedat/test": "8.5.8",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -87,5 +87,5 @@
     "semantic-ui-react": "^3.0.0-beta.2",
     "swr": "^2.3.3"
   },
-  "gitHead": "41e5e6138f5622558bae4151e720c040c4581162"
+  "gitHead": "61ad9443b3d822d30dcfa977f5fad3494b3ed5b4"
 }

package/src/concepts/components/ConceptConfidentialButton.js

@@ -1,7 +1,7 @@
 import _ from "lodash/fp";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { Button, Popup, Icon } from "semantic-ui-react";
+import { Button, Icon } from "semantic-ui-react";
 import { useIntl } from "react-intl";
 import { setConfidentialConcept } from "../routines";
 
@@ -25,20 +25,14 @@ export const ConceptConfidentialButton = ({
   };
 
   return (
-    <Popup
-      content={buttonText}
-      position="top center"
-      trigger={
-        <span>
-          <Button
-            icon={<Icon name={buttonIcon} className={className} />}
-            basic
-            className="structureButton"
-            onClick={handleSubmit}
-            loading={conceptUpdating}
-          />
-        </span>
-      }
+    <Button
+      icon={<Icon name={buttonIcon} className={className} />}
+      basic
+      className="structureButton"
+      onClick={handleSubmit}
+      loading={conceptUpdating}
+      data-tooltip={buttonText}
+      data-position="top center"
     />
   );
 };
@@ -54,5 +48,5 @@ export const mapStateToProps = ({ conceptUpdating }) => ({
 });
 
 export default connect(mapStateToProps, { setConfidentialConcept })(
-  ConceptConfidentialButton
+  ConceptConfidentialButton,
 );

package/src/concepts/components/ConceptCreate.js

@@ -1,5 +1,6 @@
 import _ from "lodash/fp";
 import { useState, useEffect } from "react";
+import { Segment } from "semantic-ui-react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { useLanguage } from "@truedat/core/i18n";
@@ -25,9 +26,9 @@ const ConceptCreate = ({ conceptActionLoading, conceptAction }) => {
         ...langContent,
         content: langContent.is_default
           ? { ...langContent.content }
-          : { ..._.remove(_.isEmpty)(templateFields.translatable) },
+          : { ..._.omitBy(_.isEmpty)(templateFields.translatable) },
       })),
-      _.keyBy("lang")
+      _.keyBy("lang"),
     )(i18nConcept);
 
     if (!_.isEqual(i18nConcept, updateI18nConcept)) {
@@ -42,7 +43,7 @@ const ConceptCreate = ({ conceptActionLoading, conceptAction }) => {
         _.map(({ id, lang, is_default, is_required }) => {
           return { id, lang, is_default, is_required, name: "", content: {} };
         }),
-        _.keyBy("lang")
+        _.keyBy("lang"),
       )(locales);
       setI18nConcept(i18nConceptInit);
     }
@@ -64,7 +65,7 @@ const ConceptCreate = ({ conceptActionLoading, conceptAction }) => {
       _.mapValues((langConcept) => ({
         name: langConcept.name,
         content: _.pick(translatableKeys, langConcept.content),
-      }))
+      })),
     )(i18nConcept);
 
     const business_concept_version = {
@@ -83,17 +84,19 @@ const ConceptCreate = ({ conceptActionLoading, conceptAction }) => {
   };
 
   return (
-    <ConceptForm
-      actionKey={actionKey}
-      domainId={domainId}
-      template={template}
-      i18nConcept={i18nConcept}
-      loading={conceptActionLoading}
-      setI18nConcept={setI18nConcept}
-      setDomainId={setDomainId}
-      setTemplate={setTemplate}
-      onSubmit={handleSubmit}
-    />
+    <Segment>
+      <ConceptForm
+        actionKey={actionKey}
+        domainId={domainId}
+        template={template}
+        i18nConcept={i18nConcept}
+        loading={conceptActionLoading}
+        setI18nConcept={setI18nConcept}
+        setDomainId={setDomainId}
+        setTemplate={setTemplate}
+        onSubmit={handleSubmit}
+      />
+    </Segment>
   );
 };
 

package/src/concepts/components/ConceptEdit.js

@@ -39,7 +39,7 @@ export const ConceptEdit = ({
       _.mapValues((langConcept) => ({
         name: langConcept.name,
         content: _.pick(translatableKeys, langConcept.content),
-      }))
+      })),
     )(i18nConcept);
 
     const newContent = processedContent(defaultContent.content, domain?.id);
@@ -60,18 +60,16 @@ export const ConceptEdit = ({
   };
 
   return (
-    <>
-      <ConceptForm
-        actionKey={actionKey}
-        domainId={domain?.id}
-        template={template}
-        i18nConcept={i18nConcept}
-        loading={templateLoading || localesLoading}
-        setI18nConcept={setI18nConcept}
-        onSubmit={handleSubmit}
-        setTemplate={() => null} // In ConceptEdit, the template is already selected and cannot be changed
-      />
-    </>
+    <ConceptForm
+      actionKey={actionKey}
+      domainId={domain?.id}
+      template={template}
+      i18nConcept={i18nConcept}
+      loading={templateLoading || localesLoading}
+      setI18nConcept={setI18nConcept}
+      onSubmit={handleSubmit}
+      setTemplate={() => null} // In ConceptEdit, the template is already selected and cannot be changed
+    />
   );
 };
 
@@ -122,7 +120,7 @@ export const ConceptEditLoader = (props) => {
         content: langContent,
       };
     }),
-    _.keyBy("lang")
+    _.keyBy("lang"),
   )(locales);
 
   return (
@@ -151,5 +149,5 @@ const mapStateToProps = ({ concept, conceptActionLoading, conceptActions }) => {
 };
 
 export default compose(connect(mapStateToProps, { conceptAction }))(
-  ConceptEditLoader
+  ConceptEditLoader,
 );

package/src/concepts/components/ConceptForm.js

@@ -210,6 +210,7 @@ const ConceptForm = ({
                     defaultLang,
                     i18nConcept[defaultLang]?.name,
                     handleI18nNameChange,
+                    true,
                   )}
                 </Grid.Column>
                 <Grid.Column>
@@ -257,24 +258,7 @@ const ConceptForm = ({
   const isInvalid = !validDomain() || !validNames() || !validTemplate();
 
   const renderDomainSelector = () =>
-    actionKey === "create" &&
-    (isMultilingual ? (
-      <Grid.Row columns={2}>
-        <Grid.Column>
-          <DomainSelector
-            action="createBusinessConcept"
-            label={formatMessage({ id: "domain.selector.label" })}
-            labels
-            required
-            disabled={!(i18nConcept[defaultLang]?.is_default ?? true)}
-            onChange={handleDomainChange}
-            onLoad={handleDomainsLoaded}
-            value={domainId}
-          />
-        </Grid.Column>
-        <Grid.Column />
-      </Grid.Row>
-    ) : (
+    actionKey === "create" ? (
       <DomainSelector
         action="createBusinessConcept"
         label={formatMessage({ id: "domain.selector.label" })}
@@ -285,7 +269,7 @@ const ConceptForm = ({
         onLoad={handleDomainsLoaded}
         value={domainId}
       />
-    ));
+    ) : null;
 
   const isThereAnyTranslatableField =
     _.flow(
@@ -298,14 +282,10 @@ const ConceptForm = ({
 
   const commonForm = (
     <>
-      {isMultilingual ? (
-        <Grid>{renderDomainSelector()}</Grid>
-      ) : (
-        renderDomainSelector()
-      )}
       <SelectDynamicFormWithTranslations
         scope="bg"
         domainIds={domainId ? [domainId] : null}
+        beforeSelector={renderDomainSelector()}
         required
         header={renderFormHeader()}
         i18nContent={_.mapValues("content", i18nConcept)}
@@ -314,6 +294,7 @@ const ConceptForm = ({
         onChangeContent={handleI18nConceptContentChange}
         onChangeTemplate={handleTemplateChange}
         selectedTemplate={template}
+        showTemplateSectionTitle={actionKey === "create"}
       />
       <div className="concept-forms-actions actions">
         <HistoryBackButton content={formatMessage({ id: "actions.cancel" })} />
@@ -364,20 +345,22 @@ const ConceptForm = ({
     />
   );
 
+  const renderForm = () => (
+    <Form loading={Boolean(loading) || Boolean(domainsLoading)}>
+      {commonForm}
+    </Form>
+  );
+
   return isMultilingual ? (
     <>
       {renderHeader()}
-      <Form loading={Boolean(loading) || Boolean(domainsLoading)}>
-        {commonForm}
-      </Form>
+      {renderForm()}
       {canTranslate ? renderTranslationModal : null}
     </>
   ) : (
     <Container as={Segment} text>
       {renderHeader()}
-      <Form loading={Boolean(loading) || Boolean(domainsLoading)}>
-        {commonForm}
-      </Form>
+      {renderForm()}
     </Container>
   );
 };

package/src/concepts/components/ConceptSubscription.js

@@ -3,6 +3,7 @@ import { lazy, useState, useEffect, Suspense } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { Button, Popup } from "semantic-ui-react";
+import { useIntl } from "react-intl";
 import {
   createSubscription,
   deleteSubscription,
@@ -21,6 +22,7 @@ export const ConceptSubscription = ({
   updateSubscription,
   deleteSubscription,
 }) => {
+  const { formatMessage } = useIntl();
   const [subscriptionField, setSubscription] = useState(searchSubscription);
   const [isOpen, setIsOpen] = useState(false);
 
@@ -95,6 +97,8 @@ export const ConceptSubscription = ({
           basic
           icon={{ name: "eye", className }}
           className="button icon group-actions structureButton"
+          data-tooltip={formatMessage({ id: "concept.subscription.tooltip" })}
+          data-position="top center"
         />
       }
     >

package/src/concepts/components/SharedToDomainsPopup.js

@@ -2,9 +2,11 @@ import { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { Button, Icon, Popup } from "semantic-ui-react";
 import PropTypes from "prop-types";
+import { useIntl } from "react-intl";
 import SharedToForm from "./SharedToForm";
 
 export const SharedToDomainsPopup = ({ saving }) => {
+  const { formatMessage } = useIntl();
   const [open, setOpen] = useState(false);
   useEffect(() => {
     if (saving === false) {
@@ -29,6 +31,8 @@ export const SharedToDomainsPopup = ({ saving }) => {
           basic
           className="structureButton"
           icon={<Icon name="sitemap" />}
+          data-tooltip={formatMessage({ id: "shared_to_domains.tooltip" })}
+          data-position="top center"
         />
       }
     />

package/src/concepts/components/__tests__/ConceptCrumbs.spec.js

@@ -142,7 +142,17 @@ describe("<ConceptCrumbs />", () => {
       },
     };
     const props = {
-      conceptAction: "concepts.actions.new",
+      baseCrumbs: [
+        {
+          id: "concepts.crumbs.top",
+          path: "/concepts",
+        },
+        {
+          id: "concepts.crumbs.pending",
+          path: "/concepts/pending",
+        },
+      ],
+      conceptAction: "concepts.actions.create",
     };
     const { container } = render(<ConceptCrumbs {...props} />, renderOpts);
     expect(container).toMatchSnapshot();

package/src/concepts/components/__tests__/ConceptForm.spec.js

@@ -65,6 +65,7 @@ const props = {
   onChangeTemplate: jest.fn(),
   onChangeConceptContent: jest.fn(),
   setAltLang: jest.fn(),
+  setTemplate: jest.fn(),
 };
 
 const templateVariables = { scope: "bg", domainIds: [1] };

package/src/concepts/components/__tests__/__snapshots__/Concept.spec.js.snap

@@ -77,6 +77,7 @@ exports[`<Concept /> matches the latest snapshot 1`] = `
             >
               <button
                 class="ui basic icon button button icon group-actions"
+                data-position="top center"
                 data-tooltip="Sharing"
               >
                 <i
@@ -86,6 +87,8 @@ exports[`<Concept /> matches the latest snapshot 1`] = `
               </button>
               <button
                 class="ui basic icon button button icon group-actions structureButton"
+                data-position="top center"
+                data-tooltip="concept.subscription.tooltip"
               >
                 <i
                   aria-hidden="true"
@@ -460,6 +463,7 @@ exports[`<Concept /> matches the latest snapshot with grantView activated 1`] =
             >
               <button
                 class="ui basic icon button button icon group-actions"
+                data-position="top center"
                 data-tooltip="Sharing"
               >
                 <i
@@ -469,6 +473,8 @@ exports[`<Concept /> matches the latest snapshot with grantView activated 1`] =
               </button>
               <button
                 class="ui basic icon button button icon group-actions structureButton"
+                data-position="top center"
+                data-tooltip="concept.subscription.tooltip"
               >
                 <i
                   aria-hidden="true"

package/src/concepts/components/__tests__/__snapshots__/ConceptConfidentialButton.spec.js.snap

@@ -2,15 +2,15 @@
 
 exports[`<ConceptConfidentialButton /> matches the latest snapshot 1`] = `
 <div>
-  <span>
-    <button
-      class="ui basic icon button structureButton"
-    >
-      <i
-        aria-hidden="true"
-        class="lock open icon"
-      />
-    </button>
-  </span>
+  <button
+    class="ui basic icon button structureButton"
+    data-position="top center"
+    data-tooltip="concept.mark_as_confidential"
+  >
+    <i
+      aria-hidden="true"
+      class="lock open icon"
+    />
+  </button>
 </div>
 `;

package/src/concepts/components/__tests__/__snapshots__/ConceptCrumbs.spec.js.snap

@@ -142,7 +142,7 @@ exports[`<ConceptCrumbs /> matches the latest snapshot for new concept 1`] = `
       class="active section"
       style="cursor: default;"
     >
-      concepts.actions.new
+      concepts.actions.create
     </span>
   </div>
 </div>

package/src/concepts/components/__tests__/__snapshots__/ConceptEdit.spec.js.snap

@@ -149,7 +149,7 @@ exports[`<ConceptEdit /> matches the latest snapshot 1`] = `
         class="concept-forms-actions actions"
       >
         <a
-          class="ui secondary button"
+          class="ui secondary button td-icon-text-control"
           data-discover="true"
           href="/"
           role="button"

package/src/concepts/components/__tests__/__snapshots__/ConceptForm.spec.js.snap

@@ -19,10 +19,10 @@ exports[`<ConceptForm /> with multiple templates matches the latest snapshot 1`]
     class="ui form"
   >
     <div
-      class="ui grid"
+      class="ui stackable grid"
     >
       <div
-        class="two column row"
+        class="bottom aligned two column row"
       >
         <div
           class="column"
@@ -43,13 +43,9 @@ exports[`<ConceptForm /> with multiple templates matches the latest snapshot 1`]
               tabindex="0"
             >
               <div
-                class="ui label"
+                class="text"
               >
                 fooDomain
-                <i
-                  aria-hidden="true"
-                  class="delete icon"
-                />
               </div>
               <i
                 aria-hidden="true"
@@ -132,28 +128,18 @@ exports[`<ConceptForm /> with multiple templates matches the latest snapshot 1`]
             </div>
           </div>
         </div>
-        <div
-          class="column"
-        />
-      </div>
-    </div>
-    <div
-      class="ui grid"
-      style="display: block;"
-    >
-      <div
-        class="two column row"
-      >
         <div
           class="column"
         >
           <div
             class="required field"
           >
-            <label>
+            <label
+              class="template-selector-label template-selector-label-lifted"
+            >
               template.selector.label
               <div
-                class="ui left pointing label"
+                class="ui left pointing label template-selector-required-label"
               >
                 template.form.validation.empty_required
               </div>
@@ -223,120 +209,13 @@ exports[`<ConceptForm /> with multiple templates matches the latest snapshot 1`]
             </div>
           </div>
         </div>
-        <div
-          class="column"
-        />
-      </div>
-    </div>
-    <div
-      class="ui grid"
-      style="background: white;"
-    >
-      <div
-        class="two column row"
-      >
-        <div
-          class="column"
-        >
-          <div
-            attached="top"
-          >
-            <div
-              class="ui attached tabular menu"
-            >
-              <a
-                class="active item"
-              >
-                en
-              </a>
-            </div>
-          </div>
-        </div>
-        <div
-          class="column"
-        >
-          <div
-            attached="top"
-            class="attached-tab"
-          >
-            <div
-              class="ui attached tabular menu"
-            >
-              <a
-                class="item"
-              >
-                es
-              </a>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="ui bottom attached segment attached-segment"
-    >
-      <div
-        class="ui grid translation-tabs-grid"
-      >
-        <div
-          class="two column row"
-        >
-          <div
-            class="column"
-          >
-            <div
-              class="required field"
-            >
-              <label>
-                concepts.props.name
-              </label>
-              <div
-                class="field"
-              >
-                <div
-                  class="ui input"
-                >
-                  <input
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="column"
-          >
-            <div
-              class="field"
-            >
-              <label>
-                concepts.props.name
-              </label>
-              <div
-                class="field"
-              >
-                <div
-                  class="ui input"
-                >
-                  <input
-                    name="name"
-                    type="text"
-                    value=""
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
       </div>
     </div>
     <div
       class="concept-forms-actions actions"
     >
       <a
-        class="ui secondary button"
+        class="ui secondary button td-icon-text-control"
         data-discover="true"
         href="/"
         role="button"

package/src/concepts/components/__tests__/__snapshots__/ConceptHeader.spec.js.snap

@@ -35,6 +35,7 @@ exports[`<ConceptHeader /> matches the latest snapshot 1`] = `
       >
         <button
           class="ui basic icon button button icon group-actions"
+          data-position="top center"
           data-tooltip="Sharing"
         >
           <i
@@ -44,6 +45,8 @@ exports[`<ConceptHeader /> matches the latest snapshot 1`] = `
         </button>
         <button
           class="ui basic icon button structureButton"
+          data-position="top center"
+          data-tooltip="shared_to_domains.tooltip"
         >
           <i
             aria-hidden="true"
@@ -52,22 +55,24 @@ exports[`<ConceptHeader /> matches the latest snapshot 1`] = `
         </button>
         <button
           class="ui basic icon button button icon group-actions structureButton"
+          data-position="top center"
+          data-tooltip="concept.subscription.tooltip"
         >
           <i
             aria-hidden="true"
             class="eye icon"
           />
         </button>
-        <span>
-          <button
-            class="ui basic icon button structureButton"
-          >
-            <i
-              aria-hidden="true"
-              class="lock open icon"
-            />
-          </button>
-        </span>
+        <button
+          class="ui basic icon button structureButton"
+          data-position="top center"
+          data-tooltip="concept.mark_as_confidential"
+        >
+          <i
+            aria-hidden="true"
+            class="lock open icon"
+          />
+        </button>
       </div>
     </div>
     <div

package/src/concepts/components/__tests__/__snapshots__/ConceptManageDomain.spec.js.snap

@@ -26,9 +26,11 @@ exports[`<ConceptManageDomain /> matches the latest snapshot 1`] = `
           role="listbox"
           tabindex="0"
         >
-          <label>
+          <div
+            class="default text"
+          >
             domain.selector.placeholder
-          </label>
+          </div>
           <i
             aria-hidden="true"
             class="dropdown icon"

package/src/concepts/components/__tests__/__snapshots__/ConceptSubscription.spec.js.snap

@@ -4,6 +4,8 @@ exports[`<ConceptSubscription /> matches the latest snapshot 1`] = `
 <div>
   <button
     class="ui basic icon button button icon group-actions structureButton"
+    data-position="top center"
+    data-tooltip="concept.subscription.tooltip"
   >
     <i
       aria-hidden="true"

package/src/concepts/components/__tests__/__snapshots__/ConceptsBulkUpdate.spec.js.snap

@@ -51,9 +51,11 @@ exports[`<ConceptsBulkUpdate /> matches the latest snapshot 1`] = `
           role="listbox"
           tabindex="0"
         >
-          <label>
+          <div
+            class="default text"
+          >
             domain.selector.placeholder
-          </label>
+          </div>
           <i
             aria-hidden="true"
             class="dropdown icon"
@@ -142,7 +144,7 @@ exports[`<ConceptsBulkUpdate /> matches the latest snapshot 1`] = `
         actions.save
       </button>
       <a
-        class="ui secondary button"
+        class="ui secondary button td-icon-text-control"
         data-discover="true"
         href="/"
         role="button"

package/src/concepts/components/__tests__/__snapshots__/SharedToDomainsPopup.spec.js.snap

@@ -4,6 +4,8 @@ exports[`<SharedToDomainsPopup /> matches the latest snapshot 1`] = `
 <div>
   <button
     class="ui basic icon button structureButton"
+    data-position="top center"
+    data-tooltip="shared_to_domains.tooltip"
   >
     <i
       aria-hidden="true"

package/src/concepts/relations/components/ConceptLinksActions.js

@@ -1,12 +1,13 @@
 import _ from "lodash/fp";
-import { Fragment, useState } from "react";
+import { Fragment } from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { connect } from "react-redux";
-import { Button, Form, Popup } from "semantic-ui-react";
+import { Button } from "semantic-ui-react";
 import { Link, useParams, useNavigate } from "react-router";
 import { linkTo } from "@truedat/core/routes";
 import { Checkbox } from "semantic-ui-react";
+import SuggestLinkButton from "@truedat/ai/components/SuggestLinkButton";
 
 import ConceptLinkstRequestGrantButton from "./ConceptLinkstRequestGrantButton";
 
@@ -20,66 +21,27 @@ export const ConceptLinksActions = ({
   const { formatMessage } = useIntl();
   const params = useParams();
   const navigate = useNavigate();
-  const [suggestOpen, setSuggestOpen] = useState(false);
-  const [prompt, setPrompt] = useState("");
-
-  const handleSuggestSubmit = () => {
-    setSuggestOpen(false);
-    navigate(linkTo.CONCEPT_LINKS_STRUCTURES_SUGGEST(params), {
-      state: { prompt },
-    });
-  };
-
-  const suggestPopupContent = (
-    <Form style={{ minWidth: "300px" }}>
-      <Form.Field>
-        <label>{formatMessage({ id: "links.suggest.prompt.label" })}</label>
-        <Form.Input
-          value={prompt}
-          onChange={(_, { value }) => setPrompt(value)}
-          placeholder={formatMessage({
-            id: "links.suggest.prompt.placeholder",
-          })}
-        />
-      </Form.Field>
-      <Button
-        primary
-        content={formatMessage({ id: "links.suggest.submit" })}
-        onClick={handleSuggestSubmit}
-      />
-    </Form>
-  );
 
   return createLinkUrl ? (
-    <div style={{ float: "right" }}>
+    <div className="concept-links-actions">
       {canManageGrantRequests ? (
         <Fragment>
           <Checkbox
             id="execute_checkbox"
-            className="bgOrange"
+            className="bgOrange concept-links-actions-checkbox"
             toggle
             checked={grantView}
             onChange={() => onGrantViewChange(!grantView)}
-            style={{ top: "6px", marginRight: "7.5px" }}
           />
           <ConceptLinkstRequestGrantButton disabled={!grantView} />
         </Fragment>
       ) : null}
       {canSuggestLinks && (
-        <Popup
-          on="click"
-          open={suggestOpen}
-          onOpen={() => setSuggestOpen(true)}
-          onClose={() => setSuggestOpen(false)}
-          content={suggestPopupContent}
-          position="bottom center"
-          trigger={
-            <Button
-              secondary
-              active={suggestOpen}
-              icon="lightbulb outline"
-              content={formatMessage({ id: "links.actions.suggest" })}
-            />
+        <SuggestLinkButton
+          onSubmit={(prompt) =>
+            navigate(linkTo.CONCEPT_LINKS_STRUCTURES_SUGGEST(params), {
+              state: { prompt },
+            })
           }
         />
       )}
@@ -87,6 +49,7 @@ export const ConceptLinksActions = ({
         primary
         as={Link}
         to={createLinkUrl}
+        icon="linkify"
         content={formatMessage({ id: "links.actions.create" })}
       />
     </div>

package/src/concepts/relations/components/ConceptLinkstRequestGrantButton.js

@@ -34,7 +34,7 @@ export const ConceptLinkstRequestGrantButton = ({
   return (
     <Button
       secondary
-      icon="shield"
+      icon="key"
       title={formatMessage({ id: "links.actions.grant_request.tooltip" })}
       disabled={disabled}
       content={formatMessage({ id: "links.actions.grant_request" })}

package/src/concepts/relations/components/__tests__/ConceptLinksActions.spec.js

@@ -2,6 +2,10 @@ import { useSearchContext } from "@truedat/core/search/SearchContext";
 import { render, waitForLoad } from "@truedat/test/render";
 import ConceptLinksActions from "../ConceptLinksActions";
 
+jest.mock("@truedat/ai/components/SuggestLinkButton", () =>
+  jest.fn(() => <div>MockSuggestLinkButton</div>)
+);
+
 jest.mock("@truedat/core/search/SearchContext", () => {
   const originalModule = jest.requireActual(
     "@truedat/core/search/SearchContext"
@@ -61,4 +65,26 @@ describe("<ConceptLinksActions />", () => {
     await waitForLoad(rendered);
     expect(rendered.container).toMatchSnapshot();
   });
+
+  it("renders SuggestLinkButton when suggest_structure_link action is present", async () => {
+    useSearchContext.mockReturnValue({ searchData: { data: [] } });
+
+    const suggestRenderOpts = {
+      ...renderOpts,
+      state: {
+        ...renderOpts.state,
+        conceptActions: {
+          create_structure_link: true,
+          suggest_structure_link: true,
+        },
+      },
+    };
+
+    const rendered = render(
+      <ConceptLinksActions onGrantViewChange={jest.fn()} />,
+      suggestRenderOpts
+    );
+    await waitForLoad(rendered);
+    expect(rendered.getByText("MockSuggestLinkButton")).toBeInTheDocument();
+  });
 });

package/src/concepts/relations/components/__tests__/__snapshots__/ConceptLinksActions.spec.js.snap

@@ -3,11 +3,10 @@
 exports[`<ConceptLinksActions /> matches the latest snapshot with Grant Requests permission 1`] = `
 <div>
   <div
-    style="float: right;"
+    class="concept-links-actions"
   >
     <div
-      class="ui fitted toggle checkbox bgOrange"
-      style="top: 6px; margin-right: 7.5px;"
+      class="ui fitted toggle checkbox bgOrange concept-links-actions-checkbox"
     >
       <input
         class="hidden"
@@ -28,7 +27,7 @@ exports[`<ConceptLinksActions /> matches the latest snapshot with Grant Requests
     >
       <i
         aria-hidden="true"
-        class="shield icon"
+        class="key icon"
       />
       links.actions.grant_request
     </button>
@@ -38,6 +37,10 @@ exports[`<ConceptLinksActions /> matches the latest snapshot with Grant Requests
       href="/concepts/11/versions/1/links/structures/new"
       role="button"
     >
+      <i
+        aria-hidden="true"
+        class="linkify icon"
+      />
       links.actions.create
     </a>
   </div>
@@ -47,7 +50,7 @@ exports[`<ConceptLinksActions /> matches the latest snapshot with Grant Requests
 exports[`<ConceptLinksActions /> matches the latest snapshot without Grant Requests permission 1`] = `
 <div>
   <div
-    style="float: right;"
+    class="concept-links-actions"
   >
     <a
       class="ui primary button"
@@ -55,6 +58,10 @@ exports[`<ConceptLinksActions /> matches the latest snapshot without Grant Reque
       href="/concepts/11/versions/1/links/structures/new"
       role="button"
     >
+      <i
+        aria-hidden="true"
+        class="linkify icon"
+      />
       links.actions.create
     </a>
   </div>

package/src/concepts/relations/components/__tests__/__snapshots__/ConceptLinkstRequestGrantButton.spec.js.snap

@@ -8,7 +8,7 @@ exports[`<ConceptLinkstRequestGrantButton /> matches the latest snapshot 1`] = `
   >
     <i
       aria-hidden="true"
-      class="shield icon"
+      class="key icon"
     />
     links.actions.grant_request
   </button>

package/src/concepts/relations/components/__tests__/__snapshots__/ConceptRelationForm.spec.js.snap

@@ -271,7 +271,7 @@ exports[`<ConceptRelationForm /> matches the latest snapshot 1`] = `
       actions.create
     </button>
     <a
-      class="ui secondary button"
+      class="ui secondary button td-icon-text-control"
       data-discover="true"
       href="/"
       role="button"

package/src/concepts/relations/styles/ConceptLinksActions.less

@@ -0,0 +1,14 @@
+.concept-links-actions {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.concept-links-actions-checkbox {
+  margin-right: 7.5px;
+}
+
+.concept-links-suggest-form {
+  min-width: 300px;
+}

package/src/taxonomy/components/__tests__/__snapshots__/AddDomainMember.spec.js.snap

@@ -147,7 +147,7 @@ exports[`<AddDomainMember /> matches the latest snapshot 1`] = `
           domain.actions.add_member
         </button>
         <a
-          class="ui secondary button"
+          class="ui secondary button td-icon-text-control"
           data-discover="true"
           href="/"
           role="button"

package/src/taxonomy/components/__tests__/__snapshots__/DomainActions.spec.js.snap

@@ -29,13 +29,17 @@ exports[`<DomainActions /> matches the latest snapshot 1`] = `
         aria-hidden="true"
         class="ellipsis vertical icon"
       />
+      <i
+        aria-hidden="true"
+        class="dropdown icon"
+      />
       <div
         class="left menu transition"
       >
         <a
           aria-checked="false"
           aria-selected="true"
-          class="selected item"
+          class="selected item td-icon-text-control"
           data-discover="true"
           href="/domains/3/new"
           id="3"

package/src/taxonomy/components/__tests__/__snapshots__/DomainDetail.spec.js.snap

@@ -61,13 +61,17 @@ exports[`<DomainDetail /> matches the latest snapshot 1`] = `
               aria-hidden="true"
               class="ellipsis vertical icon"
             />
+            <i
+              aria-hidden="true"
+              class="dropdown icon"
+            />
             <div
               class="left menu transition"
             >
               <a
                 aria-checked="false"
                 aria-selected="true"
-                class="selected item"
+                class="selected item td-icon-text-control"
                 data-discover="true"
                 href="/domains/7/edit"
                 id="7"

package/src/taxonomy/components/__tests__/__snapshots__/DomainForm.spec.js.snap

@@ -170,7 +170,7 @@ exports[`<DomainForm /> matches the latest snapshot 1`] = `
         actions.save
       </button>
       <a
-        class="ui secondary button"
+        class="ui secondary button td-icon-text-control"
         data-discover="true"
         href="/"
         role="button"

package/src/taxonomy/components/__tests__/__snapshots__/DomainStructures.spec.js.snap

@@ -22,7 +22,7 @@ exports[`<DomainStructures /> matches the latest snapshot 1`] = `
       />
       <div
         aria-disabled="true"
-        class="disabled item"
+        class="disabled item td-icon-text-control"
         role="option"
       >
         <i
@@ -40,7 +40,7 @@ exports[`<DomainStructures /> matches the latest snapshot 1`] = `
       </div>
       <div
         aria-disabled="true"
-        class="disabled item"
+        class="disabled item td-icon-text-control"
         role="option"
       >
         <i

package/src/taxonomy/components/__tests__/__snapshots__/EditDomain.spec.js.snap

@@ -186,7 +186,7 @@ exports[`<EditDomain /> matches the latest snapshot 1`] = `
           actions.save
         </button>
         <a
-          class="ui secondary button"
+          class="ui secondary button td-icon-text-control"
           data-discover="true"
           href="/"
           role="button"

package/src/taxonomy/components/__tests__/__snapshots__/NewDomain.spec.js.snap

@@ -204,7 +204,7 @@ exports[`<NewDomain /> matches the latest snapshot main domain 1`] = `
           actions.save
         </button>
         <a
-          class="ui secondary button"
+          class="ui secondary button td-icon-text-control"
           data-discover="true"
           href="/"
           role="button"
@@ -401,7 +401,7 @@ exports[`<NewDomain /> matches the latest snapshot subdomain 1`] = `
           actions.save
         </button>
         <a
-          class="ui secondary button"
+          class="ui secondary button td-icon-text-control"
           data-discover="true"
           href="/"
           role="button"