feat(PlexImportModal): add user details sync functionality

Author: 0xSysR3ll

src/components/UserList/PlexImportModal.tsx

@@ -18,6 +18,10 @@ interface PlexImportProps {
 const messages = defineMessages('components.UserList', {
   importfromplex: 'Import Plex Users',
   importfromplexerror: 'Something went wrong while importing Plex users.',
+  importfromplexsynced:
+    'Plex users synced successfully. Existing users were refreshed.',
+  syncnotice:
+    'You can still click Sync to refresh existing Plex users, such as updated email or username details.',
   importedfromplex:
     '<strong>{userCount}</strong> Plex {userCount, plural, one {user} other {users}} imported successfully!',
   importedPlexUsersNoPassword:
@@ -55,30 +59,37 @@ const PlexImportModal = ({ onCancel, onComplete }: PlexImportProps) => {
         { plexIds: selectedUsers }
       );
 
-      if (!Array.isArray(createdUsers) || createdUsers.length === 0) {
-        throw new Error('No users were imported from Plex.');
+      if (!Array.isArray(createdUsers)) {
+        throw new Error('Invalid import response from Plex import endpoint.');
       }
 
-      addToast(
-        intl.formatMessage(messages.importedfromplex, {
-          userCount: createdUsers.length,
-          strong: (msg: React.ReactNode) => <strong>{msg}</strong>,
-        }),
-        {
+      if (createdUsers.length > 0) {
+        addToast(
+          intl.formatMessage(messages.importedfromplex, {
+            userCount: createdUsers.length,
+            strong: (msg: React.ReactNode) => <strong>{msg}</strong>,
+          }),
+          {
+            autoDismiss: true,
+            appearance: 'success',
+          }
+        );
+
+        addToast(
+          intl.formatMessage(messages.importedPlexUsersNoPassword, {
+            applicationTitle: settings.currentSettings.applicationTitle,
+          }),
+          {
+            autoDismiss: false,
+            appearance: 'warning',
+          }
+        );
+      } else {
+        addToast(intl.formatMessage(messages.importfromplexsynced), {
           autoDismiss: true,
           appearance: 'success',
-        }
-      );
-
-      addToast(
-        intl.formatMessage(messages.importedPlexUsersNoPassword, {
-          applicationTitle: settings.currentSettings.applicationTitle,
-        }),
-        {
-          autoDismiss: false,
-          appearance: 'warning',
-        }
-      );
+        });
+      }
 
       if (onComplete) {
         onComplete();
@@ -114,16 +125,26 @@ const PlexImportModal = ({ onCancel, onComplete }: PlexImportProps) => {
     }
   };
 
+  const isSyncOnly = !!data && data.length === 0;
+
   return (
     <Modal
       loading={!data && !error}
       title={intl.formatMessage(messages.importfromplex)}
       onOk={() => {
         importUsers();
       }}
-      okDisabled={isImporting || !selectedUsers.length}
+      okDisabled={
+        isImporting || !data || (data.length > 0 && !selectedUsers.length)
+      }
       okText={intl.formatMessage(
-        isImporting ? globalMessages.importing : globalMessages.import
+        isImporting
+          ? isSyncOnly
+            ? globalMessages.syncing
+            : globalMessages.importing
+          : isSyncOnly
+            ? globalMessages.sync
+            : globalMessages.import
       )}
       onCancel={onCancel}
     >
@@ -245,10 +266,9 @@ const PlexImportModal = ({ onCancel, onComplete }: PlexImportProps) => {
           </div>
         </>
       ) : (
-        <Alert
-          title={intl.formatMessage(messages.nouserstoimport)}
-          type="info"
-        />
+        <Alert title={intl.formatMessage(messages.nouserstoimport)} type="info">
+          {intl.formatMessage(messages.syncnotice)}
+        </Alert>
       )}
     </Modal>
   );

src/i18n/globalMessages.ts

@@ -36,6 +36,8 @@ const globalMessages = defineMessages('i18n', {
   saving: 'Saving…',
   import: 'Import',
   importing: 'Importing…',
+  sync: 'Sync',
+  syncing: 'Syncing…',
   close: 'Close',
   edit: 'Edit',
   areyousure: 'Are you sure?',

src/i18n/locale/en.json

@@ -1397,6 +1397,7 @@
   "components.UserList.importfrommediaserver": "Import {mediaServerName} Users",
   "components.UserList.importfromplex": "Import Plex Users",
   "components.UserList.importfromplexerror": "Something went wrong while importing Plex users.",
+  "components.UserList.importfromplexsynced": "Plex users synced successfully. Existing users were refreshed.",
   "components.UserList.localLoginDisabled": "The <strong>Enable Local Sign-In</strong> setting is currently disabled.",
   "components.UserList.localuser": "Local User",
   "components.UserList.mediaServerUser": "{mediaServerName} User",
@@ -1415,6 +1416,7 @@
   "components.UserList.sortByRole": "Sort by user role",
   "components.UserList.sortByType": "Sort by account type",
   "components.UserList.sortByUser": "Sort by username",
+  "components.UserList.syncnotice": "You can still click Sync to refresh existing Plex users, such as updated email or username details.",
   "components.UserList.toggleSortDirection": "Click again to sort {direction}",
   "components.UserList.toggleSortDirectionAria": "Toggle sort direction",
   "components.UserList.totalrequests": "Requests",
@@ -1653,6 +1655,8 @@
   "i18n.showingresults": "Showing <strong>{from}</strong> to <strong>{to}</strong> of <strong>{total}</strong> results",
   "i18n.specials": "Specials",
   "i18n.status": "Status",
+  "i18n.sync": "Sync",
+  "i18n.syncing": "Syncing…",
   "i18n.test": "Test",
   "i18n.testing": "Testing…",
   "i18n.tvshow": "Series",