DB page - role configuration, collaborators, roles

mathesar/urls.py

@@ -57,11 +57,15 @@
     path('shares/tables/<slug>/', views.shared_table, name='shared_table'),
     path('shares/explorations/<slug>/', views.shared_query, name='shared_query'),
     path('databases/', views.databases, name='databases'),
-    path('db/<database_id>/', views.schemas, name='schemas'),
     path('i18n/', include('django.conf.urls.i18n')),
     re_path(
-        r'^db/(?P<database_id>\w+)/(?P<schema_id>\w+)/',
+        r'^db/(?P<database_id>\w+)/schemas/(?P<schema_id>\w+)/',
         views.schemas_home,
         name='schema_home'
     ),
+    re_path(
+        r'^db/(?P<database_id>\w+)/((schemas|settings)/)?',
+        views.schemas,
+        name='schemas'
+    ),
 ]

mathesar_ui/.eslintrc.cjs

@@ -48,6 +48,9 @@ module.exports = {
     'array-bracket-spacing': 'off',
     'no-restricted-syntax': 0,
     '@typescript-eslint/require-await': 'off',
+    // TODO_BETA: Add following eslint rules
+    // '@typescript-eslint/consistent-type-imports': 'error',
+    // 'no-duplicate-imports': 'error',
     'class-methods-use-this': 'off',
     'no-multiple-empty-lines': 1,
     'import/order': [

mathesar_ui/src/App.svelte

@@ -56,15 +56,15 @@
     --color-text-muted: #6b7280;
     --color-substring-match: rgb(254, 221, 72);
     --color-substring-match-light: rgba(254, 221, 72, 0.2);
-    --text-size-xx-small: var(--size-xx-small); // 8px
-    --text-size-x-small: var(--size-x-small); // 10px
-    --text-size-small: var(--size-small); // 12px
-    --text-size-base: var(--size-base); // 14px
-    --text-size-large: var(--size-large); // 16px
-    --text-size-x-large: var(--size-x-large); // 18px
-    --text-size-xx-large: var(--size-xx-large); // 20px
-    --text-size-ultra-large: var(--size-ultra-large); // 24px
-    --text-size-super-ultra-large: var(--size-super-ultra-large); // 32px
+    --text-size-xx-small: var(--size-xx-small);
+    --text-size-x-small: var(--size-x-small);
+    --text-size-small: var(--size-small);
+    --text-size-base: var(--size-base);
+    --text-size-large: var(--size-large);
+    --text-size-x-large: var(--size-x-large);
+    --text-size-xx-large: var(--size-xx-large);
+    --text-size-ultra-large: var(--size-ultra-large);
+    --text-size-super-ultra-large: var(--size-super-ultra-large);
 
     --modal-z-index: 50;
     --modal-record-selector-z-index: 50;

mathesar_ui/src/api/rpc/collaborators.ts

@@ -0,0 +1,41 @@
+import { rpcMethodTypeContainer } from '@mathesar/packages/json-rpc-client-builder';
+
+import type { RawConfiguredRole } from './configured_roles';
+import type { RawDatabase } from './databases';
+
+export interface RawCollaborator {
+  id: number;
+  user_id: number;
+  database_id: RawDatabase['id'];
+  configured_role_id: RawConfiguredRole['id'];
+}
+
+export const collaborators = {
+  list: rpcMethodTypeContainer<
+    {
+      database_id: RawDatabase['id'];
+    },
+    Array<RawCollaborator>
+  >(),
+  add: rpcMethodTypeContainer<
+    {
+      database_id: RawDatabase['id'];
+      user_id: number;
+      configured_role_id: RawConfiguredRole['id'];
+    },
+    RawCollaborator
+  >(),
+  set_role: rpcMethodTypeContainer<
+    {
+      collaborator_id: RawCollaborator['id'];
+      configured_role_id: RawConfiguredRole['id'];
+    },
+    RawCollaborator
+  >(),
+  delete: rpcMethodTypeContainer<
+    {
+      collaborator_id: RawCollaborator['id'];
+    },
+    void
+  >(),
+};

mathesar_ui/src/api/rpc/configured_roles.ts

@@ -1,41 +1,41 @@
 import { rpcMethodTypeContainer } from '@mathesar/packages/json-rpc-client-builder';
 
-import type { Server } from './servers';
+import type { RawServer } from './servers';
 
-export interface ConfiguredRole {
+export interface RawConfiguredRole {
   id: number;
-  server_id: Server['id'];
+  server_id: RawServer['id'];
   name: string;
 }
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const configured_roles = {
   list: rpcMethodTypeContainer<
     {
-      server_id: ConfiguredRole['server_id'];
+      server_id: RawConfiguredRole['server_id'];
     },
-    Array<ConfiguredRole>
+    Array<RawConfiguredRole>
   >(),
 
   add: rpcMethodTypeContainer<
     {
-      server_id: ConfiguredRole['server_id'];
-      name: ConfiguredRole['name'];
+      server_id: RawConfiguredRole['server_id'];
+      name: RawConfiguredRole['name'];
       password: string;
     },
-    ConfiguredRole
+    RawConfiguredRole
   >(),
 
   delete: rpcMethodTypeContainer<
     {
-      configured_role_id: ConfiguredRole['id'];
+      configured_role_id: RawConfiguredRole['id'];
     },
     void
   >(),
 
   set_password: rpcMethodTypeContainer<
     {
-      configured_role_id: ConfiguredRole['id'];
+      configured_role_id: RawConfiguredRole['id'];
       password: string;
     },
     void

mathesar_ui/src/api/rpc/database_setup.ts

@@ -1,8 +1,8 @@
 import { rpcMethodTypeContainer } from '@mathesar/packages/json-rpc-client-builder';
 
-import type { ConfiguredRole } from './configured_roles';
-import type { DatabaseResponse } from './databases';
-import type { Server } from './servers';
+import type { RawConfiguredRole } from './configured_roles';
+import type { RawDatabase } from './databases';
+import type { RawServer } from './servers';
 
 export const sampleDataOptions = [
   'library_management',
@@ -12,27 +12,27 @@ export const sampleDataOptions = [
 export type SampleDataSchemaIdentifier = (typeof sampleDataOptions)[number];
 
 export interface DatabaseConnectionResult {
-  server: Server;
-  database: DatabaseResponse;
-  configured_role: ConfiguredRole;
+  server: RawServer;
+  database: RawDatabase;
+  configured_role: RawConfiguredRole;
 }
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const database_setup = {
   create_new: rpcMethodTypeContainer<
     {
-      database: DatabaseResponse['name'];
+      database: RawDatabase['name'];
       sample_data?: SampleDataSchemaIdentifier[];
     },
     DatabaseConnectionResult
   >(),
 
   connect_existing: rpcMethodTypeContainer<
     {
-      host: Server['host'];
-      port: Server['port'];
-      database: DatabaseResponse['name'];
-      role: ConfiguredRole['name'];
+      host: RawServer['host'];
+      port: RawServer['port'];
+      database: RawDatabase['name'];
+      role: RawConfiguredRole['name'];
       password: string;
       sample_data?: SampleDataSchemaIdentifier[];
     },

mathesar_ui/src/api/rpc/databases.ts

@@ -1,44 +1,18 @@
 import { rpcMethodTypeContainer } from '@mathesar/packages/json-rpc-client-builder';
 
-import type { Server } from './servers';
+import type { RawServer } from './servers';
 
-export interface DatabaseResponse {
+export interface RawDatabase {
   id: number;
   name: string;
-  server_id: Server['id'];
-}
-
-/**
- * TODO_BETA: Modify after store discussion is resolved
- */
-export class Database implements DatabaseResponse {
-  readonly id: number;
-
-  readonly name: string;
-
-  readonly server_id: number;
-
-  readonly server_host: string;
-
-  readonly server_port: number;
-
-  constructor(databaseResponse: DatabaseResponse, server: Server) {
-    this.id = databaseResponse.id;
-    this.name = databaseResponse.name;
-    if (databaseResponse.server_id !== server.id) {
-      throw new Error('Server ids do not match');
-    }
-    this.server_id = databaseResponse.server_id;
-    this.server_host = server.host;
-    this.server_port = server.port;
-  }
+  server_id: RawServer['id'];
 }
 
 export const databases = {
   list: rpcMethodTypeContainer<
     {
-      server_id?: DatabaseResponse['server_id'];
+      server_id?: RawDatabase['server_id'];
     },
-    Array<DatabaseResponse>
+    Array<RawDatabase>
   >(),
 };

mathesar_ui/src/api/rpc/index.ts

@@ -2,12 +2,14 @@ import Cookies from 'js-cookie';
 
 import { buildRpcApi } from '@mathesar/packages/json-rpc-client-builder';
 
+import { collaborators } from './collaborators';
 import { columns } from './columns';
 import { configured_roles } from './configured_roles';
 import { constraints } from './constraints';
 import { database_setup } from './database_setup';
 import { databases } from './databases';
 import { records } from './records';
+import { roles } from './roles';
 import { schemas } from './schemas';
 import { servers } from './servers';
 import { tables } from './tables';
@@ -17,10 +19,12 @@ export const api = buildRpcApi({
   endpoint: '/api/rpc/v0/',
   getHeaders: () => ({ 'X-CSRFToken': Cookies.get('csrftoken') }),
   methodTree: {
+    collaborators,
     configured_roles,
     database_setup,
     databases,
     records,
+    roles,
     schemas,
     servers,
     tables,

mathesar_ui/src/api/rpc/roles.ts

@@ -0,0 +1,56 @@
+import { rpcMethodTypeContainer } from '@mathesar/packages/json-rpc-client-builder';
+
+import type { RawDatabase } from './databases';
+
+export interface RawRoleMember {
+  oid: number;
+  admin: boolean;
+}
+
+export interface RawRole {
+  oid: number;
+  name: string;
+  super: boolean;
+  inherits: boolean;
+  create_role: boolean;
+  create_db: boolean;
+  login: boolean;
+  description?: string;
+  members?: RawRoleMember[];
+}
+
+export const roles = {
+  list: rpcMethodTypeContainer<
+    {
+      database_id: RawDatabase['id'];
+    },
+    Array<RawRole>
+  >(),
+
+  add: rpcMethodTypeContainer<
+    {
+      database_id: RawDatabase['id'];
+      rolename: RawRole['name'];
+      login: boolean;
+      password?: string;
+    },
+    RawRole
+  >(),
+
+  set_members: rpcMethodTypeContainer<
+    {
+      database_id: RawDatabase['id'];
+      role_oid: RawRole['oid'];
+      members: RawRole['oid'][];
+    },
+    RawRole
+  >(),
+
+  delete: rpcMethodTypeContainer<
+    {
+      database_id: RawDatabase['id'];
+      role_oid: RawRole['oid'];
+    },
+    void
+  >(),
+};

mathesar_ui/src/api/rpc/servers.ts

@@ -1,11 +1,11 @@
 import { rpcMethodTypeContainer } from '@mathesar/packages/json-rpc-client-builder';
 
-export interface Server {
+export interface RawServer {
   id: number;
   host: string;
   port: number;
 }
 
 export const servers = {
-  list: rpcMethodTypeContainer<void, Array<Server>>(),
+  list: rpcMethodTypeContainer<void, Array<RawServer>>(),
 };

mathesar_ui/src/component-library/common/styles/variables.scss

@@ -34,6 +34,7 @@
   --slate-700: #424952;
   --slate-800: #25292e;
 
+  --sand-50: #fcfbf8;
   --sand-100: #f9f8f6;
   --sand-200: #efece7;
   --sand-300: #e2dcd4;

mathesar_ui/src/component-library/common/utils/ImmutableMap.ts

@@ -19,7 +19,7 @@ export default class ImmutableMap<Key, Value> {
    * know.
    */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private getNewInstance(...args: any[]): this {
+  protected getNewInstance(...args: any[]): this {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-explicit-any
     return new (this.constructor as any)(...args) as this;
   }
@@ -134,6 +134,12 @@ export default class ImmutableMap<Key, Value> {
     );
   }
 
+  mapKeys<NewKey>(fn: (value: Value) => NewKey): ImmutableMap<NewKey, Value> {
+    return new ImmutableMap(
+      [...this.values()].map((value) => [fn(value), value]),
+    );
+  }
+
   filterValues(fn: (value: Value) => boolean): ImmutableMap<Key, Value> {
     return new ImmutableMap(
       [...this.entries()].filter(([, value]) => fn(value)),

mathesar_ui/src/component-library/common/utils/SortedImmutableMap.ts

@@ -0,0 +1,22 @@
+import ImmutableMap from './ImmutableMap';
+
+export default class SortedImmutableMap<Key, Value> extends ImmutableMap<
+  Key,
+  Value
+> {
+  sortFn;
+
+  constructor(
+    sortFn: (j: Iterable<[Key, Value]>) => Iterable<[Key, Value]>,
+    i: Iterable<[Key, Value]> = [],
+  ) {
+    const sorted = sortFn(i);
+    super(sorted);
+    this.sortFn = sortFn;
+  }
+
+  protected getNewInstance(...args: any[]): this {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-explicit-any
+    return new (this.constructor as any)(this.sortFn, ...args) as this;
+  }
+}