feat(server,web): remove external path nonsense and make libraries admin-only (#7237)

* remove external path

* open-api

* make sql

* move library settings to admin panel

* Add documentation

* show external libraries only

* fix library list

* make user library settings look good

* fix test

* fix tests

* fix tests

* can pick user for library

* fix tests

* fix e2e

* chore: make sql

* Use unauth exception

* delete user library list

* cleanup

* fix e2e

* fix await lint

* chore: remove unused code

* chore: cleanup

* revert docs

* fix: is admin stuff

* table alignment

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

web/src/lib/components/forms/edit-user-form.svelte

@@ -34,14 +34,13 @@
 
   const editUser = async () => {
     try {
-      const { id, email, name, storageLabel, externalPath } = user;
+      const { id, email, name, storageLabel } = user;
       await updateUser({
         updateUserDto: {
           id,
           email,
           name,
           storageLabel: storageLabel || '',
-          externalPath: externalPath || '',
           quotaSizeInBytes: quotaSize ? convertToBytes(Number(quotaSize), 'GiB') : null,
         },
       });
@@ -126,22 +125,6 @@
       </p>
     </div>
 
-    <div class="m-4 flex flex-col gap-2">
-      <label class="immich-form-label" for="external-path">External Path</label>
-      <input
-        class="immich-form-input"
-        id="external-path"
-        name="external-path"
-        type="text"
-        bind:value={user.externalPath}
-      />
-
-      <p>
-        Note: Absolute path of parent import directory. A user can only import files if they exist at or under this
-        path.
-      </p>
-    </div>
-
     {#if error}
       <p class="ml-4 text-sm text-red-400">{error}</p>
     {/if}

web/src/lib/components/forms/library-import-paths-form.svelte

@@ -243,8 +243,8 @@
               addImportPath = true;
             }}>Add path</Button
           ></td
-        ></tr
-      >
+        >
+      </tr>
     </tbody>
   </table>
   <div class="flex justify-between w-full">

web/src/lib/components/forms/library-user-picker-form.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import Icon from '$lib/components/elements/icon.svelte';
+  import Button from '../elements/buttons/button.svelte';
+  import FullScreenModal from '../shared-components/full-screen-modal.svelte';
+  import { mdiFolderSync } from '@mdi/js';
+  import { onMount } from 'svelte';
+  import { getAllUsers } from '@immich/sdk';
+  import { user } from '$lib/stores/user.store';
+  import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
+
+  let ownerId: string = $user.id;
+
+  let userOptions: { value: string; text: string }[] = [];
+
+  onMount(async () => {
+    const users = await getAllUsers({ isAll: true });
+    userOptions = users.map((user) => ({ value: user.id, text: user.name }));
+  });
+
+  const dispatch = createEventDispatcher<{
+    cancel: void;
+    submit: { ownerId: string | null };
+    delete: void;
+  }>();
+
+  const handleCancel = () => dispatch('cancel');
+  const handleSubmit = () => dispatch('submit', { ownerId });
+</script>
+
+<FullScreenModal on:clickOutside={() => handleCancel()}>
+  <div
+    class="w-[500px] max-w-[95vw] rounded-3xl border bg-immich-bg p-4 py-8 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
+  >
+    <div
+      class="flex flex-col place-content-center place-items-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
+    >
+      <Icon path={mdiFolderSync} size="4em" />
+      <h1 class="text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">Select library owner</h1>
+    </div>
+
+    <form on:submit|preventDefault={() => handleSubmit()} autocomplete="off">
+      <p class="p-5 text-sm">NOTE: This cannot be changed later!</p>
+
+      <SettingSelect bind:value={ownerId} options={userOptions} name="user" />
+
+      <div class="mt-8 flex w-full gap-4 px-4">
+        <Button color="gray" fullwidth on:click={() => handleCancel()}>Cancel</Button>
+
+        <Button type="submit" fullwidth>Create</Button>
+      </div>
+    </form>
+  </div>
+</FullScreenModal>