Render table owners grouped by category

frontend/amundsen_application/static/js/components/OwnerEditor/index.tsx

@@ -9,9 +9,11 @@ import AvatarLabel, { AvatarLabelProps } from 'components/AvatarLabel';
 import LoadingSpinner from 'components/LoadingSpinner';
 import { ResourceType, UpdateMethod, UpdateOwnerPayload } from 'interfaces';
 import { logClick, logAction } from 'utils/analytics';
-import { getUserIdLabel } from 'config/config-utils';
+import { getUserIdLabel, getOwnersSectionConfig } from 'config/config-utils';
 
 import { EditableSectionChildProps } from 'components/EditableSection';
+import InfoButton from 'components/InfoButton';
+import { OwnerCategory } from 'interfaces/OwnerCategory';
 
 import * as Constants from './constants';
 
@@ -33,6 +35,7 @@ export interface ComponentProps {
 interface OwnerAvatarLabelProps extends AvatarLabelProps {
   link?: string;
   isExternal?: boolean;
+  additionalOwnerInfo?: any;
 }
 
 export interface StateFromProps {
@@ -238,21 +241,19 @@ export class OwnerEditor extends React.Component<
     );
   };
 
-  render() {
-    const { isEditing, readOnly, resourceType } = this.props;
-    const { errorText, itemProps } = this.state;
-    const hasItems = Object.keys(itemProps).length > 0;
-
-    if (errorText) {
-      return (
-        <div className="owner-editor-component">
-          <span className="status-message">{errorText}</span>
-        </div>
-      );
-    }
+  renderOwnersSection = (section: OwnerCategory | null) => {
+    const { resourceType } = this.props;
+    const { itemProps } = this.state;
 
-    const ownerList = hasItems ? (
+    return (
       <ul className="component-list">
+        {section ? (
+          <div>
+            <span>{section.label}</span>
+            <InfoButton infoText={section.definition} />
+          </div>
+        ) : null}
+
         {Object.keys(itemProps).map((key) => {
           const owner = itemProps[key];
           const avatarLabel = React.createElement(AvatarLabel, owner);
@@ -274,7 +275,12 @@ export class OwnerEditor extends React.Component<
                 {avatarLabel}
               </a>
             );
-          } else {
+          } else if (
+            (section && // if section, only render owner that matches category
+              section.label.toLowerCase() ===
+                owner.additionalOwnerInfo.owner_category.toLowerCase()) ||
+            !section
+          ) {
             listItem = (
               <Link
                 to={owner.link}
@@ -290,7 +296,37 @@ export class OwnerEditor extends React.Component<
           return <li key={`list-item:${key}`}>{listItem}</li>;
         })}
       </ul>
-    ) : null;
+    );
+  };
+
+  renderOwnersList = () => {
+    const sections = getOwnersSectionConfig().categories;
+
+    if (sections.length > 0) {
+      return (
+        <div>
+          {sections.map((section) => this.renderOwnersSection(section))}
+        </div>
+      );
+    }
+
+    return this.renderOwnersSection(null);
+  };
+
+  render() {
+    const { isEditing, readOnly } = this.props;
+    const { errorText, itemProps } = this.state;
+    const hasItems = Object.keys(itemProps).length > 0;
+
+    if (errorText) {
+      return (
+        <div className="owner-editor-component">
+          <span className="status-message">{errorText}</span>
+        </div>
+      );
+    }
+
+    const ownerList = hasItems ? this.renderOwnersList() : null;
 
     return (
       <div className="owner-editor-component">

frontend/amundsen_application/static/js/pages/TableDetailPage/TableOwnerEditor/index.tsx

@@ -19,9 +19,11 @@ export const mapStateToProps = (state: GlobalState) => {
   const ownerObj = state.tableMetadata.tableOwners.owners;
   const items = Object.keys(ownerObj).reduce((obj, ownerId) => {
     // eslint-disable-next-line @typescript-eslint/naming-convention
-    const { profile_url, user_id, display_name } = ownerObj[ownerId];
+    const { profile_url, user_id, display_name, other_key_values } =
+      ownerObj[ownerId];
     let profileLink = profile_url;
     let isExternalLink = true;
+    const additionalOwnerInfo = other_key_values;
 
     if (indexUsersEnabled()) {
       isExternalLink = false;
@@ -32,6 +34,7 @@ export const mapStateToProps = (state: GlobalState) => {
       label: display_name,
       link: profileLink,
       isExternal: isExternalLink,
+      additionalOwnerInfo,
     };
 
     return obj;