[Shared UX] Migrate avatar user profile component from packages/kbn-u…

…ser-profile-components to Shared UX (#139247)

package.json

@@ -340,6 +340,7 @@
     "@kbn/server-route-repository": "link:bazel-bin/packages/kbn-server-route-repository",
     "@kbn/shared-svg": "link:bazel-bin/packages/kbn-shared-svg",
     "@kbn/shared-ux-avatar-solution": "link:bazel-bin/packages/shared-ux/avatar/solution",
+    "@kbn/shared-ux-avatar-user-profile-components": "link:bazel-bin/packages/shared-ux/avatar/user_profile/impl",
     "@kbn/shared-ux-button-exit-full-screen": "link:bazel-bin/packages/shared-ux/button/exit_full_screen/impl",
     "@kbn/shared-ux-button-exit-full-screen-mocks": "link:bazel-bin/packages/shared-ux/button/exit_full_screen/mocks",
     "@kbn/shared-ux-button-exit-full-screen-types": "link:bazel-bin/packages/shared-ux/button/exit_full_screen/types",
@@ -1065,6 +1066,7 @@
     "@types/kbn__server-route-repository": "link:bazel-bin/packages/kbn-server-route-repository/npm_module_types",
     "@types/kbn__shared-svg": "link:bazel-bin/packages/kbn-shared-svg/npm_module_types",
     "@types/kbn__shared-ux-avatar-solution": "link:bazel-bin/packages/shared-ux/avatar/solution/npm_module_types",
+    "@types/kbn__shared-ux-avatar-user-profile-components": "link:bazel-bin/packages/shared-ux/avatar/user_profile/impl/npm_module_types",
     "@types/kbn__shared-ux-button-exit-full-screen": "link:bazel-bin/packages/shared-ux/button/exit_full_screen/impl/npm_module_types",
     "@types/kbn__shared-ux-button-exit-full-screen-mocks": "link:bazel-bin/packages/shared-ux/button/exit_full_screen/mocks/npm_module_types",
     "@types/kbn__shared-ux-button-exit-full-screen-types": "link:bazel-bin/packages/shared-ux/button/exit_full_screen/types/npm_module_types",

packages/shared-ux/avatar/user_profile/impl/BUILD.bazel

@@ -0,0 +1,136 @@
+load("@npm//@bazel/typescript:index.bzl", "ts_config")
+load("@build_bazel_rules_nodejs//:index.bzl", "js_library")
+load("//src/dev/bazel:index.bzl", "jsts_transpiler", "pkg_npm", "pkg_npm_types", "ts_project")
+
+PKG_DIRNAME = "avatar-user-profile"
+PKG_REQUIRE_NAME = "@kbn/shared-ux-avatar-user-profile-components"
+
+SOURCE_FILES = glob(
+  [
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.mdx",
+  ],
+  exclude = [
+    "**/*.test.*",
+    "**/*.stories.*",
+  ],
+)
+
+SRCS = SOURCE_FILES
+
+# filegroup(
+#   name = "srcs",
+#   srcs = SRCS,
+# )
+
+NPM_MODULE_EXTRA_FILES = [
+  "package.json",
+]
+
+# In this array place runtime dependencies, including other packages and NPM packages
+# which must be available for this code to run.
+#
+#  To reference other packages use:
+#    "//repo/relative/path/to/package"
+#    eg. "//packages/kbn-utils"
+#
+#  To reference a NPM package use:
+#    "@npm//name-of-package"
+#    eg. "@npm//lodash"
+RUNTIME_DEPS = [
+  "@npm//react",
+  "@npm//@elastic/eui",
+  "//packages/kbn-i18n-react",
+  "//packages/kbn-i18n",
+  "//packages/kbn-shared-ux-utility",
+  "//packages/kbn-ambient-ui-types",
+]
+
+# In this array place dependencies necessary to build the types, which will include the
+# :npm_module_types target of other packages and packages from NPM, including @types/*
+# packages.
+#
+#  To reference the types for another package use:
+#    "//repo/relative/path/to/package:npm_module_types"
+#    eg. "//packages/kbn-utils:npm_module_types"
+#
+#  References to NPM packages work the same as RUNTIME_DEPS
+TYPES_DEPS = [
+  "@npm//@types/node",
+  "@npm//@types/jest",
+  "@npm//@types/react",
+  "@npm//@elastic/eui",
+  "//packages/kbn-i18n-react:npm_module_types",
+  "//packages/kbn-i18n:npm_module_types",
+  "//packages/kbn-shared-ux-utility:npm_module_types",
+  "//packages/kbn-ambient-ui-types",
+]
+
+jsts_transpiler(
+  name = "target_node",
+  srcs = SRCS,
+  build_pkg_name = package_name(),
+)
+
+jsts_transpiler(
+  name = "target_web",
+  srcs = SRCS,
+  build_pkg_name = package_name(),
+  web = True,
+)
+
+ts_config(
+  name = "tsconfig",
+  src = "tsconfig.json",
+  deps = [
+    "//:tsconfig.base.json",
+    "//:tsconfig.bazel.json",
+  ],
+)
+
+ts_project(
+  name = "tsc_types",
+  args = ['--pretty'],
+  srcs = SRCS,
+  deps = TYPES_DEPS,
+  declaration = True,
+  declaration_map = True,
+  emit_declaration_only = True,
+  out_dir = "target_types",
+  tsconfig = ":tsconfig",
+)
+
+js_library(
+  name = PKG_DIRNAME,
+  srcs = NPM_MODULE_EXTRA_FILES,
+  deps = RUNTIME_DEPS + [":target_node", ":target_web"],
+  package_name = PKG_REQUIRE_NAME,
+  visibility = ["//visibility:public"],
+)
+
+pkg_npm(
+  name = "npm_module",
+  deps = [":" + PKG_DIRNAME],
+)
+
+filegroup(
+  name = "build",
+  srcs = [":npm_module"],
+  visibility = ["//visibility:public"],
+)
+
+pkg_npm_types(
+  name = "npm_module_types",
+  srcs = SRCS,
+  deps = [":tsc_types"],
+  package_name = PKG_REQUIRE_NAME,
+  tsconfig = ":tsconfig",
+  visibility = ["//visibility:public"],
+)
+
+filegroup(
+  name = "build_types",
+  srcs = [":npm_module_types"],
+  visibility = ["//visibility:public"],
+)

packages/shared-ux/avatar/user_profile/impl/README.mdx

@@ -0,0 +1,12 @@
+---
+id: sharedUX/Components/UserProfileAvatar
+slug: /shared-ux/components/user-profile-avatar
+title: User Profile Avatar
+description: A wrapper around `EuiAvatar`
+tags: ['shared-ux', 'component']
+date: 2022-09-01
+---
+
+## Description
+
+A wrapper around `EuiAvatar` tailored for user profiles

packages/shared-ux/avatar/user_profile/impl/index.ts

@@ -0,0 +1,15 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export type { UserAvatarProps, UserProfileWithAvatar } from './user_avatar';
+export type { UserProfilesSelectableProps } from './user_profiles_selectable';
+export type { UserProfilesPopoverProps } from './user_profiles_popover';
+export { UserAvatar } from './user_avatar';
+export { UserProfilesSelectable } from './user_profiles_selectable';
+export { UserProfilesPopover } from './user_profiles_popover';
+export type { UserProfile, UserProfileUserInfo, UserProfileAvatarData } from './user_profile';

packages/shared-ux/avatar/user_profile/impl/jest.config.js

@@ -0,0 +1,13 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../../../../..',
+  roots: ['<rootDir>/packages/shared-ux/avatar/user_profile/impl'],
+};

packages/shared-ux/avatar/user_profile/impl/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@kbn/shared-ux-avatar-user-profile-components",
+  "private": true,
+  "version": "1.0.0",
+  "main": "./target_node/index.js",
+  "browser": "./target_web/index.js",
+  "license": "SSPL-1.0 OR Elastic License 2.0"
+}

packages/shared-ux/avatar/user_profile/impl/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "extends": "../../../../../tsconfig.bazel.json",
+  "compilerOptions": {
+    "declaration": true,
+    "declarationMap": true,
+    "emitDeclarationOnly": true,
+    "outDir": "target_types",
+    "stripInternal": false,
+    "types": [
+      "jest",
+      "node",
+      "react",
+      "@kbn/ambient-ui-types"
+    ]
+  },
+  "include": [
+    "*ts*",
+    "*.md*",
+    "**/*.ts",
+    "**/*.md*",
+  ]
+}

packages/shared-ux/avatar/user_profile/impl/user_avatar.test.tsx

@@ -0,0 +1,94 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { shallow } from 'enzyme';
+import React from 'react';
+
+import { UserAvatar } from './user_avatar';
+
+describe('UserAvatar', () => {
+  it('should render `EuiAvatar` correctly with image avatar', () => {
+    const wrapper = shallow(
+      <UserAvatar
+        user={{
+          username: 'delighted_nightingale',
+          email: 'delighted_nightingale@elastic.co',
+          fullName: 'Delighted Nightingale',
+        }}
+        avatar={{
+          color: '#09e8ca',
+          initials: 'DN',
+          imageUrl: 'https://source.unsplash.com/64x64/?cat',
+        }}
+      />
+    );
+    expect(wrapper).toMatchInlineSnapshot(`
+      <EuiAvatar
+        color="plain"
+        imageUrl="https://source.unsplash.com/64x64/?cat"
+        name="Delighted Nightingale"
+      />
+    `);
+  });
+
+  it('should render `EuiAvatar` correctly with initials avatar', () => {
+    const wrapper = shallow(
+      <UserAvatar
+        user={{
+          username: 'delighted_nightingale',
+          email: 'delighted_nightingale@elastic.co',
+          fullName: 'Delighted Nightingale',
+        }}
+        avatar={{
+          color: '#09e8ca',
+          initials: 'DN',
+          imageUrl: undefined,
+        }}
+      />
+    );
+    expect(wrapper).toMatchInlineSnapshot(`
+      <EuiAvatar
+        color="#09e8ca"
+        initials="DN"
+        initialsLength={2}
+        name="Delighted Nightingale"
+      />
+    `);
+  });
+
+  it('should render `EuiAvatar` correctly without avatar data', () => {
+    const wrapper = shallow(
+      <UserAvatar
+        user={{
+          username: 'delighted_nightingale',
+          email: 'delighted_nightingale@elastic.co',
+          fullName: 'Delighted Nightingale',
+        }}
+      />
+    );
+    expect(wrapper).toMatchInlineSnapshot(`
+      <EuiAvatar
+        color="#AA6556"
+        initials="DN"
+        initialsLength={2}
+        name="Delighted Nightingale"
+      />
+    `);
+  });
+
+  it('should render `EuiAvatar` correctly without user data', () => {
+    const wrapper = shallow(<UserAvatar />);
+    expect(wrapper).toMatchInlineSnapshot(`
+      <EuiAvatar
+        color="#F1F4FA"
+        initials="?"
+        name=""
+      />
+    `);
+  });
+});