How to get the user profile pop-up

Forge Forge UI Kit and Custom UI
1

How do you get the box popping up containing the user profile information, like when you hover over an author in a Confluence page? I have a table of users in a draft App, and I’d like to get that popup on hover, but don’t know what creates it.
Thanks

2

Hi @OpenSpaceSystems

From what I can see, it doesn’t look like this is currently possible with the UI Kit component. I’ve passed on your request to the Forge UI team for consideration.

As an alternative workaround, there is a new Popup component in preview, but you’d need to populate the data yourself - for example:

screenshot
screenshot2710×1124 229 KB

import React, { useEffect, useState } from 'react';
import ForgeReconciler, { Image, Text, Popup, Button, Box, xcss} from '@forge/react';
import {  view, requestConfluence } from '@forge/bridge';

const contentStyles = xcss({
  padding: "space.200",
});

const App = () => {
  const [context, setContext] = useState(null);
  const [isOpen, setIsOpen] = useState(false);
  const [accountID, setAccountID] = useState(null);
  const [user, setUser] = useState(null);

  // get the context on load
  useEffect(() => { view.getContext().then(setContext) }, []);

  // call when the context changes
  useEffect(() => { 
    if(context) {
      setAccountID(context.accountId);
    }  
  }, [context]);

  useEffect(() => {
    const getUserInfo = async() => {
      if(accountID) {
        let bodyData = `{
          "accountIds": [
            "${accountID}"
          ]
        }`;
 
        const response = await requestConfluence(`/wiki/api/v2/users-bulk`, {
          method: 'POST',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
          },
          body: bodyData
        });
        if(response.status === 200) {
          let data = await response.json();
          setUser(data.results[0]);
        }  
      } 
    }
    getUserInfo();
  }, [accountID]);


  function UserCard(user) {

    if(context) {
      const siteUrl = context.siteUrl;
      return (
        <Box xcss={contentStyles}>
          <Text>{user ? user.email : "Loading..."}</Text>
          <Text>{user ? user.timeZone : "Loading..."}</Text>
          <Image src={user ? (siteUrl + user.profilePicture.path) : ""} />
        </Box>
      );
    }
    return (
      <Box xcss={contentStyles}>
        <Text>Loading...</Text>
      </Box>
    );
    
  }

  return (
    <>
      <Popup
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        placement="bottom-start"
        content={() => UserCard(user)}
        trigger={() => (
          <Button
            appearance="primary"
            isSelected={isOpen}
            onClick={() => setIsOpen(!isOpen)}
          >
            {user ? "@" + user.displayName : "Loading..."}
          </Button>
        )}
      />
    </>
  );
};

ForgeReconciler.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

If this solution helps, please mark this reply as the solution.

Cheers!
Melissa

3

Thanks Melissa, it looks like this is the best option available at the moment. I was hoping to find an onHover-type solution, as the element in question is already a link (to the user’s personal space), so clicking it isn’t going to work. It looks like the only onHover trigger belongs to a Tooltip, which only accepts text.

I may restructure the link to an adjacent object and free up the username for your solution though, as I don’t see any alternaive right now.

Thanks so much for putting in the time and getting back to me with this.

Matthew