IBX-2534: Improved invite users modal design

src/bundle/Resources/config/bazinga_js_translation.yaml

@@ -9,3 +9,4 @@ active_domains:
     - 'sub_items'
     - 'content_tree'
     - 'trash_ui'
+    - 'user_invitation'

src/bundle/Resources/public/js/scripts/user.group.invitation.js

@@ -19,6 +19,8 @@ import { UserInvitationModal } from './user.invitation.modal';
         }
 
         resetEntry(entry) {
+            super.resetEntry(entry);
+
             const emailInput = entry.querySelector('.ibexa-user-group-invitation__entry-email');
 
             emailInput.value = null;
@@ -31,12 +33,28 @@ import { UserInvitationModal } from './user.invitation.modal';
         }
 
         addEntry(isFileRelated = false, invitationData = null) {
-            const { insertedEntry } = super.addEntry(isFileRelated, invitationData);
+            const addEntryData = super.addEntry(isFileRelated, invitationData);
+            const { insertedEntry } = addEntryData;
 
             const email = invitationData?.email ?? null;
             const emailInput = insertedEntry.querySelector('.ibexa-user-group-invitation__entry-email');
 
             emailInput.value = email;
+
+            return addEntryData;
+        }
+
+        checkEntryMatchesSearch(entry, searchText) {
+            const emailInput = entry.querySelector('.ibexa-user-group-invitation__entry-email');
+            const email = emailInput.value;
+
+            return email.includes(searchText);
+        }
+
+        checkIsEntryDuplicate(invitationData, entryToCompare) {
+            const entryToCompareEmailInput = entryToCompare.querySelector('.ibexa-user-group-invitation__entry-email');
+
+            return invitationData.email === entryToCompareEmailInput.value;
         }
     }
 

src/bundle/Resources/public/scss/_alerts.scss

@@ -8,6 +8,11 @@
     border-width: 0 0 0 calculateRem(3px);
     border-left-style: solid;
 
+    &--no-close-btn {
+        grid-template: 'icon content actions';
+        grid-template-columns: calculateRem(32px) 1fr auto;
+    }
+
     &__icon-wrapper {
         grid-area: icon;
         margin-top: calculateRem(2px);

src/bundle/Resources/public/scss/_user-invitation-modal.scss

@@ -1,11 +1,70 @@
 .ibexa-user-invitation-modal {
+    &.ibexa-modal {
+        .modal-dialog {
+            max-width: 700px;
+        }
+    }
+
     .modal-body {
+        padding-top: 0;
         padding-bottom: 0;
     }
 
+    .modal-footer {
+        position: sticky;
+        bottom: 0;
+        background: $ibexa-color-white;
+        border-top-width: calculateRem(1px);
+    }
+
+    .ibexa-alert {
+        &__actions {
+            display: flex;
+            align-items: center;
+        }
+    }
+
+    &__body {
+        position: relative;
+    }
+
+    &__main {
+        margin-right: calculateRem(-8px);
+    }
+
+    &__issues-alert {
+        &--hidden {
+            display: none;
+        }
+    }
+
+    &__issues-alert-issues {
+        font-size: $ibexa-text-font-size-medium;
+    }
+
+    &__bad-file-alert {
+        &--hidden {
+            display: none;
+        }
+    }
+
+    &__sticky-top {
+        position: sticky;
+        top: 0;
+        z-index: 100;
+        background: $ibexa-color-white;
+        padding-top: calculateRem(16px);
+    }
+
+    &__labels {
+        top: calculateRem(76px);
+        margin-right: calculateRem(-4px);
+    }
+
     &__entries {
         display: grid;
         grid-row-gap: calculateRem(14px);
+        padding: calculateRem(4px) 0;
     }
 
     &__labels,
@@ -14,15 +73,32 @@
         align-items: center;
     }
 
+    &__entry {
+        &--not-matching-search {
+            display: none;
+        }
+    }
+
+    &__search-no-entries {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: calculateRem(48px);
+        font-style: italic;
+        font-size: calculateRem(14px);
+        color: $ibexa-color-dark-400;
+
+        &--hidden {
+            display: none;
+        }
+    }
+
     &__add-next-btn {
         margin-top: calculateRem(8px);
     }
 
     &__upload {
         margin-top: calculateRem(24px);
-        border-width: calculateRem(1px) 0;
-        border-style: solid;
-        border-color: $ibexa-color-light-500;
     }
 
     &__upload-file-message {
@@ -64,36 +140,4 @@
     &__file-select {
         margin-bottom: calculateRem(30px);
     }
-
-    &__uploaded-file {
-        display: flex;
-        align-items: center;
-
-        &--hidden {
-            display: none;
-        }
-    }
-
-    &__uploaded-item-icon {
-        margin-right: calculateRem(16px);
-    }
-
-    &__uploaded-item-info,
-    &__uploaded-item-size {
-        font-size: $ibexa-text-font-size-small;
-        color: $ibexa-color-dark-400;
-        margin-left: calculateRem(16px);
-    }
-
-    &__uploaded-item-info {
-        margin-left: auto;
-
-        .ibexa-icon {
-            fill: $ibexa-color-success;
-        }
-    }
-
-    &__uploaded-item-size {
-        margin-left: calculateRem(16px);
-    }
 }

src/bundle/Resources/translations/user_invitation.en.xliff

@@ -21,11 +21,6 @@
         <target state="new">User with %email% already exists</target>
         <note>key: ibexa.user.invitations.user_exist</note>
       </trans-unit>
-      <trans-unit id="9f469393b5cf51c7dbe2ffaa03c7a17f3a6959e3" resname="invite_members">
-        <source>Invite Members</source>
-        <target state="new">Invite Members</target>
-        <note>key: invite_members</note>
-      </trans-unit>
       <trans-unit id="82ccb764a0c57728622cce47455e8d1aeb5e088c" resname="modal.add_next">
         <source>Add next</source>
         <target state="new">Add next</target>
@@ -41,10 +36,55 @@
         <target state="new">Drag and drop file</target>
         <note>key: modal.drop</note>
       </trans-unit>
-      <trans-unit id="7d791f0b05b55fccb086c613f460c5d28150dab3" resname="modal.fully_uploaded">
-        <source>100% Uploaded</source>
-        <target state="new">100% Uploaded</target>
-        <note>key: modal.fully_uploaded</note>
+      <trans-unit id="0a8067f383ddf3e9c308a65b0fcd66bfb1ecd38e" resname="modal.entry_issues.alert.duplicate_emails">
+        <source>Duplicated emails (%count%)</source>
+        <target state="new">Duplicated emails (%count%)</target>
+        <note>key: modal.entry_issues.alert.duplicate_emails</note>
+      </trans-unit>
+      <trans-unit id="4734b951ff129b695f738938b60a7f211f5df2ab" resname="modal.entry_issues.alert.empty_emails">
+        <source>Empty emails (%count%)</source>
+        <target state="new">Empty emails (%count%)</target>
+        <note>key: modal.entry_issues.alert.empty_emails</note>
+      </trans-unit>
+      <trans-unit id="7b6c1913c1228485af394c170a67e65a7224b9b1" resname="modal.entry_issues.alert.go_to_next">
+        <source>Go to next issue</source>
+        <target state="new">Go to next issue</target>
+        <note>key: modal.entry_issues.alert.go_to_next</note>
+      </trans-unit>
+      <trans-unit id="d41a67a4c6e8826e16ecb3b8e4b5849feae538bf" resname="modal.entry_issues.alert.invalid_emails">
+        <source>Invalid emails (%count%)</source>
+        <target state="new">Invalid emails (%count%)</target>
+        <note>key: modal.entry_issues.alert.invalid_emails</note>
+      </trans-unit>
+      <trans-unit id="2dd50ad1fdafc2c6099e39dad7ad676293aba3a7" resname="modal.entry_issues.alert.message">
+        <source>Please review the problems below.</source>
+        <target state="new">Please review the problems below.</target>
+        <note>key: modal.entry_issues.alert.message</note>
+      </trans-unit>
+      <trans-unit id="80bb3b8dd64e241684d30a6081918b6bbc6c1598" resname="modal.file_uploaded.message">
+        <source>File %fileName% was uploaded</source>
+        <target state="new">File %fileName% was uploaded</target>
+        <note>key: modal.file_uploaded.message</note>
+      </trans-unit>
+      <trans-unit id="a89aa4f2fe7be667c66c1deeb229e80f71181bef" resname="modal.issue.bad_file.alert.message">
+        <source><![CDATA[This file has no valid entries or may be empty.<br>Check your file and try again.]]></source>
+        <target state="new"><![CDATA[This file has no valid entries or may be empty.<br>Check your file and try again.]]></target>
+        <note>key: modal.issue.bad_file.alert.message</note>
+      </trans-unit>
+      <trans-unit id="5f0b55fcb399ab7a8e3441d7d618e1c59c81a01c" resname="modal.issue.email.empty.message">
+        <source>Email is required</source>
+        <target state="new">Email is required</target>
+        <note>key: modal.issue.email.empty.message</note>
+      </trans-unit>
+      <trans-unit id="ced65d98fa61646be5b3cff4a199f6191e9565e8" resname="modal.issue.email.invalid.message">
+        <source>Invalid email format</source>
+        <target state="new">Invalid email format</target>
+        <note>key: modal.issue.email.invalid.message</note>
+      </trans-unit>
+      <trans-unit id="b343fdc1707b04f903db66cb60e073869869e0aa" resname="modal.issue.entry.deuplicate.merged">
+        <source>Merged</source>
+        <target state="new">Merged</target>
+        <note>key: modal.issue.entry.deuplicate.merged</note>
       </trans-unit>
       <trans-unit id="490ee1463548a5ef886d6620191efeda447f2404" resname="modal.or">
         <source>or</source>
@@ -56,6 +96,26 @@
         <target state="new">Or upload a file with one email address per line</target>
         <note>key: modal.or_upload</note>
       </trans-unit>
+      <trans-unit id="e24ff29c6da3a5f357a58c012cd82181af2f080e" resname="modal.search.no_entries">
+        <source>No entries match search.</source>
+        <target state="new">No entries match search.</target>
+        <note>key: modal.search.no_entries</note>
+      </trans-unit>
+      <trans-unit id="4eb38f2e1191d6cd77cf5002b8c70949a2c44631" resname="modal.search.placeholder">
+        <source>Search...</source>
+        <target state="new">Search...</target>
+        <note>key: modal.search.placeholder</note>
+      </trans-unit>
+      <trans-unit id="0f21db2aec9802fb51610b96cc774d8bd3a03156" resname="modal.submit.label">
+        <source>Send</source>
+        <target state="new">Send</target>
+        <note>key: modal.submit.label</note>
+      </trans-unit>
+      <trans-unit id="08a5f336891a76fbd5fce4f454bb2d71b1df0223" resname="modal.title">
+        <source>Invite members (%invitations_count%)</source>
+        <target state="new">Invite members (%invitations_count%)</target>
+        <note>key: modal.title</note>
+      </trans-unit>
       <trans-unit id="59b523724cdbdfb52e036c354f224966a2a0b5c2" resname="modal.upload_local">
         <source>Upload a local file</source>
         <target state="new">Upload a local file</target>

src/bundle/Resources/views/themes/admin/content/modal/user_group_invitation_modal_form_fields.html.twig

@@ -1,23 +1,17 @@
 {% extends '@ibexadesign/ui/form_fields.html.twig' %}
 
 {% block _user_invitation_emails_entry_widget %}
-    <div class="ibexa-user-invitation-modal__entry">
-        {{ form_widget(form, {
-            wrapper_attr: {
-                class: 'ibexa-user-group-invitation__entry-email-wrapper',
-            },
-            attr: {
-                type: 'email',
-                class: 'ibexa-user-group-invitation__entry-email',
-            },
-        }) }}
-        <button
-            type="button"
-            class="btn ibexa-btn ibexa-btn--ghost ibexa-btn--no-text ibexa-user-invitation-modal__entry-delete-btn"
-        >
-            <svg class="ibexa-icon ibexa-icon--small">
-                <use xlink:href="{{ ibexa_icon_path('trash') }}"></use>
-            </svg>
-        </button>
-    </div>
+    {% embed '@ibexadesign/user/invitation/modal_entry.html.twig' %}
+        {% block entry_form_fields %}
+            {{ form_widget(form, {
+                wrapper_attr: {
+                    class: 'ibexa-user-group-invitation__entry-email-wrapper ibexa-user-invitation-modal__email-wrapper',
+                },
+                attr: {
+                    type: 'email',
+                    class: 'ibexa-user-group-invitation__entry-email',
+                },
+            }) }}
+        {% endblock %}
+    {% endembed %}
 {% endblock %}

src/bundle/Resources/views/themes/admin/ui/component/alert/alert.html.twig

@@ -8,7 +8,10 @@
 } %}
 
 <div
-    class="alert ibexa-alert ibexa-alert--{{ type }} {% if is_toast|default(false) %}ibexa-alert--toast{% endif %} {{ class|default('') -}}"
+    class="alert ibexa-alert ibexa-alert--{{ type }}
+        {% if not show_close_btn|default(false) %}ibexa-alert--no-close-btn{% endif %}
+        {% if is_toast|default(false) %}ibexa-alert--toast{% endif %}
+        {{ class|default('') -}}"
     role="alert"
     {{ html.attributes(attr|default({})) }}
 >

src/bundle/Resources/views/themes/admin/user/invitation/issue_duplicate.html.twig

@@ -0,0 +1,8 @@
+{% trans_default_domain 'user_invitation' %}
+
+<small class="ibexa-form-help ibexa-user-invitation-modal__issue-duplicate">
+    <svg class="ibexa-icon ibexa-icon--small ibexa-form-help__icon">
+        <use xlink:href="{{ ibexa_icon_path('system-information') }}"></use>
+    </svg>
+    {{ 'modal.issue.entry.deuplicate.merged'|trans|desc('Merged') }}
+</small>

src/bundle/Resources/views/themes/admin/user/invitation/issue_email_empty.html.twig

@@ -0,0 +1,8 @@
+{% trans_default_domain 'user_invitation' %}
+
+<em class="ibexa-form-error ibexa-user-invitation-modal__issue-email-empty">
+    <svg class="ibexa-icon ibexa-icon--small ibexa-form-error__icon">
+        <use xlink:href="{{ ibexa_icon_path('warning-triangle') }}"></use>
+    </svg>
+    {{ 'modal.issue.email.empty.message'|trans|desc('Email is required') }}
+</em>

src/bundle/Resources/views/themes/admin/user/invitation/issue_email_not_valid.html.twig

@@ -0,0 +1,8 @@
+{% trans_default_domain 'user_invitation' %}
+
+<em class="ibexa-form-error ibexa-user-invitation-modal__issue-email-invalid-format">
+    <svg class="ibexa-icon ibexa-icon--small ibexa-form-error__icon">
+        <use xlink:href="{{ ibexa_icon_path('warning-triangle') }}"></use>
+    </svg>
+    {{ 'modal.issue.email.invalid.message'|trans|desc('Invalid email format') }}
+</em>