Redesigned user profile page

package.json

@@ -260,6 +260,7 @@
     "file-saver": "^1.3.8",
     "file-type": "^10.9.0",
     "font-awesome": "4.7.0",
+    "formik": "^2.2.9",
     "fp-ts": "^2.3.1",
     "geojson-vt": "^3.2.1",
     "get-port": "^5.0.0",

packages/kbn-optimizer/limits.yml

@@ -51,7 +51,7 @@ pageLoadAssetSize:
   savedObjectsTagging: 59482
   savedObjectsTaggingOss: 20590
   searchprofiler: 67080
-  security: 95864
+  security: 100000
   snapshotRestore: 79032
   spaces: 57868
   telemetry: 51957

renovate.json

@@ -116,6 +116,7 @@
       "matchPackageNames": [
         "broadcast-channel",
         "node-forge",
+        "formik",
         "@types/node-forge",
         "require-in-the-middle",
         "tough-cookie",

x-pack/plugins/security/common/index.ts

@@ -8,6 +8,7 @@
 export type { SecurityLicense, SecurityLicenseFeatures, LoginLayout } from './licensing';
 export type {
   AuthenticatedUser,
+  AuthenticatedUserProfile,
   AuthenticationProvider,
   PrivilegeDeprecationsService,
   PrivilegeDeprecationsRolesByFeatureIdRequest,
@@ -17,6 +18,10 @@ export type {
   RoleKibanaPrivilege,
   FeaturesPrivileges,
   User,
+  UserProfile,
+  UserData,
+  UserAvatar,
+  UserInfo,
   ApiKey,
   UserRealm,
 } from './model';

x-pack/plugins/security/common/model/authenticated_user.test.ts

@@ -5,8 +5,89 @@
  * 2.0.
  */
 
+import { applicationServiceMock } from '@kbn/core/public/mocks';
+
 import type { AuthenticatedUser } from './authenticated_user';
-import { canUserChangePassword } from './authenticated_user';
+import { canUserChangeDetails, canUserChangePassword, isUserAnonymous } from './authenticated_user';
+import { mockAuthenticatedUser } from './authenticated_user.mock';
+
+describe('canUserChangeDetails', () => {
+  const { capabilities } = applicationServiceMock.createStartContract();
+
+  it('should indicate when user can change their details', () => {
+    expect(
+      canUserChangeDetails(
+        mockAuthenticatedUser({
+          authentication_realm: { type: 'native', name: 'native1' },
+        }),
+        {
+          ...capabilities,
+          management: {
+            security: {
+              users: true,
+            },
+          },
+        }
+      )
+    ).toBe(true);
+  });
+
+  it('should indicate when user cannot change their details', () => {
+    expect(
+      canUserChangeDetails(
+        mockAuthenticatedUser({
+          authentication_realm: { type: 'native', name: 'native1' },
+        }),
+        {
+          ...capabilities,
+          management: {
+            security: {
+              users: false,
+            },
+          },
+        }
+      )
+    ).toBe(false);
+
+    expect(
+      canUserChangeDetails(
+        mockAuthenticatedUser({
+          authentication_realm: { type: 'reserved', name: 'reserved1' },
+        }),
+        {
+          ...capabilities,
+          management: {
+            security: {
+              users: true,
+            },
+          },
+        }
+      )
+    ).toBe(false);
+  });
+});
+
+describe('isUserAnonymous', () => {
+  it('should indicate anonymous user', () => {
+    expect(
+      isUserAnonymous(
+        mockAuthenticatedUser({
+          authentication_provider: { type: 'anonymous', name: 'basic1' },
+        })
+      )
+    ).toBe(true);
+  });
+
+  it('should indicate non-anonymous user', () => {
+    expect(
+      isUserAnonymous(
+        mockAuthenticatedUser({
+          authentication_provider: { type: 'basic', name: 'basic1' },
+        })
+      )
+    ).toBe(false);
+  });
+});
 
 describe('#canUserChangePassword', () => {
   ['reserved', 'native'].forEach((realm) => {

x-pack/plugins/security/common/model/authenticated_user.ts

@@ -5,6 +5,8 @@
  * 2.0.
  */
 
+import type { Capabilities } from '@kbn/core/types';
+
 import type { AuthenticationProvider } from './authentication_provider';
 import type { User } from './user';
 
@@ -42,9 +44,22 @@ export interface AuthenticatedUser extends User {
   authentication_type: string;
 }
 
-export function canUserChangePassword(user: AuthenticatedUser) {
+export function isUserAnonymous(user: Pick<AuthenticatedUser, 'authentication_provider'>) {
+  return user.authentication_provider.type === 'anonymous';
+}
+
+export function canUserChangePassword(
+  user: Pick<AuthenticatedUser, 'authentication_realm' | 'authentication_provider'>
+) {
   return (
     REALMS_ELIGIBLE_FOR_PASSWORD_CHANGE.includes(user.authentication_realm.type) &&
-    user.authentication_provider.type !== 'anonymous'
+    !isUserAnonymous(user)
   );
 }
+
+export function canUserChangeDetails(
+  user: Pick<AuthenticatedUser, 'authentication_realm'>,
+  capabilities: Capabilities
+) {
+  return user.authentication_realm.type === 'native' && capabilities.management.security.users;
+}

x-pack/plugins/security/common/model/index.ts

@@ -7,9 +7,21 @@
 
 export type { ApiKey, ApiKeyToInvalidate, ApiKeyRoleDescriptors } from './api_key';
 export type { User, EditUser } from './user';
+export type {
+  AuthenticatedUserProfile,
+  UserProfile,
+  UserData,
+  UserInfo,
+  UserAvatar,
+} from './user_profile';
+export {
+  getUserAvatarColor,
+  getUserAvatarInitials,
+  USER_AVATAR_MAX_INITIALS,
+} from './user_profile';
 export { getUserDisplayName } from './user';
 export type { AuthenticatedUser, UserRealm } from './authenticated_user';
-export { canUserChangePassword } from './authenticated_user';
+export { canUserChangePassword, canUserChangeDetails, isUserAnonymous } from './authenticated_user';
 export type { AuthenticationProvider } from './authentication_provider';
 export { shouldProviderUseLoginForm } from './authentication_provider';
 export type { BuiltinESPrivileges } from './builtin_es_privileges';

x-pack/plugins/security/common/model/user.ts

@@ -23,6 +23,6 @@ export interface EditUser extends User {
   confirmPassword?: string;
 }
 
-export function getUserDisplayName(user: User) {
+export function getUserDisplayName(user: Pick<User, 'username' | 'full_name'>) {
   return user.full_name || user.username;
 }

x-pack/plugins/security/common/model/user_profile.mock.ts

@@ -0,0 +1,29 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { mockAuthenticatedUser } from './authenticated_user.mock';
+import type { AuthenticatedUserProfile } from './user_profile';
+
+export const userProfileMock = {
+  create: (userProfile: Partial<AuthenticatedUserProfile> = {}): AuthenticatedUserProfile => {
+    const user = mockAuthenticatedUser({
+      username: 'some-username',
+      roles: [],
+      enabled: true,
+    });
+    return {
+      uid: 'some-profile-uid',
+      enabled: true,
+      user: {
+        ...user,
+        active: true,
+      },
+      data: {},
+      ...userProfile,
+    };
+  },
+};

x-pack/plugins/security/common/model/user_profile.ts

@@ -0,0 +1,116 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { VISUALIZATION_COLORS } from '@elastic/eui';
+
+import type { User } from '..';
+import type { AuthenticatedUser } from './authenticated_user';
+import { getUserDisplayName } from './user';
+
+/**
+ * User information returned in user profile.
+ */
+export interface UserInfo extends User {
+  active: boolean;
+}
+
+/**
+ * Avatar stored in user profile.
+ */
+export interface UserAvatar {
+  initials?: string;
+  color?: string;
+  imageUrl?: string;
+}
+
+/**
+ * Placeholder for data stored in user profile.
+ */
+export type UserData = Record<string, unknown>;
+
+/**
+ * Describes properties stored in user profile.
+ */
+export interface UserProfile<T extends UserData = UserData> {
+  /**
+   * Unique ID for of the user profile.
+   */
+  uid: string;
+
+  /**
+   * Indicates whether user profile is enabled or not.
+   */
+  enabled: boolean;
+
+  /**
+   * Information about the user that owns profile.
+   */
+  user: UserInfo;
+
+  /**
+   * User specific data associated with the profile.
+   */
+  data: T;
+}
+
+/**
+ * User profile enriched with session information.
+ */
+export interface AuthenticatedUserProfile<T extends UserData = UserData> extends UserProfile<T> {
+  /**
+   * Information about the currently authenticated user that owns the profile.
+   */
+  user: UserProfile['user'] & Pick<AuthenticatedUser, 'authentication_provider'>;
+}
+
+export const USER_AVATAR_FALLBACK_CODE_POINT = 97; // code point for lowercase "a"
+export const USER_AVATAR_MAX_INITIALS = 2;
+
+/**
+ * Determines the color for the provided user profile.
+ * If a color is present on the user profile itself, then that is used.
+ * Otherwise, a color is provided from EUI's Visualization Colors based on the display name.
+ *
+ * @param {UserInfo} user User info
+ * @param {UserAvatar} avatar User avatar
+ */
+export function getUserAvatarColor(
+  user: Pick<UserInfo, 'username' | 'full_name'>,
+  avatar?: UserAvatar
+) {
+  if (avatar && avatar.color) {
+    return avatar.color;
+  }
+
+  const firstCodePoint = getUserDisplayName(user).codePointAt(0) || USER_AVATAR_FALLBACK_CODE_POINT;
+
+  return VISUALIZATION_COLORS[firstCodePoint % VISUALIZATION_COLORS.length];
+}
+
+/**
+ * Determines the initials for the provided user profile.
+ * If initials are present on the user profile itself, then that is used.
+ * Otherwise, the initials are calculated based off the words in the display name, with a max length of 2 characters.
+ *
+ * @param {UserInfo} user User info
+ * @param {UserAvatar} avatar User avatar
+ */
+export function getUserAvatarInitials(
+  user: Pick<UserInfo, 'username' | 'full_name'>,
+  avatar?: UserAvatar
+) {
+  if (avatar && avatar.initials) {
+    return avatar.initials;
+  }
+
+  const words = getUserDisplayName(user).split(' ');
+  const numInitials = Math.min(USER_AVATAR_MAX_INITIALS, words.length);
+
+  words.splice(numInitials, words.length);
+
+  return words.map((word) => word.substring(0, 1)).join('');
+}