1 files changed, 71 insertions, 0 deletions
diff --git a/app/assets/javascripts/organizations/show/components/organization_avatar.vue b/app/assets/javascripts/organizations/show/components/organization_avatar.vue
new file mode 100644
index 00000000000..c57ee0ea5b5
--- /dev/null
+++ b/app/assets/javascripts/organizations/show/components/organization_avatar.vue
@@ -0,0 +1,71 @@
+<script>
+import { GlAvatar, GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import { AVATAR_SHAPE_OPTION_RECT } from '~/vue_shared/constants';
+import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import {
+  VISIBILITY_TYPE_ICON,
+  ORGANIZATION_VISIBILITY_TYPE,
+  VISIBILITY_LEVEL_PUBLIC_STRING,
+} from '~/visibility_level/constants';
+
+export default {
+  name: 'OrganizationAvatar',
+  AVATAR_SHAPE_OPTION_RECT,
+  i18n: {
+    copyButtonText: s__('Organization|Copy organization ID'),
+    orgId: s__('Organization|Org ID'),
+  },
+  components: { GlAvatar, GlIcon, ClipboardButton },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    organization: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    visibilityIcon() {
+      return VISIBILITY_TYPE_ICON[VISIBILITY_LEVEL_PUBLIC_STRING];
+    },
+    visibilityTooltip() {
+      return ORGANIZATION_VISIBILITY_TYPE[VISIBILITY_LEVEL_PUBLIC_STRING];
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="gl-display-flex gl-align-items-center">
+    <gl-avatar
+      :entity-id="organization.id"
+      :entity-name="organization.name"
+      :shape="$options.AVATAR_SHAPE_OPTION_RECT"
+      :size="64"
+    />
+    <div class="gl-ml-3">
+      <div class="gl-display-flex gl-align-items-center">
+        <h1 class="gl-m-0 gl-font-size-h1">{{ organization.name }}</h1>
+        <gl-icon
+          v-gl-tooltip="visibilityTooltip"
+          :name="visibilityIcon"
+          class="gl-text-secondary gl-ml-3"
+        />
+      </div>
+      <div class="gl-display-flex gl-align-items-center">
+        <span class="gl-text-secondary gl-font-sm"
+          >{{ $options.i18n.orgId }}: {{ organization.id }}</span
+        >
+        <clipboard-button
+          class="gl-ml-2"
+          category="tertiary"
+          size="small"
+          :title="$options.i18n.copyButtonText"
+          :text="organization.id.toString()"
+        />
+      </div>
+    </div>
+  </div>
+</template>