langgenius / dify

Dify is an open-source LLM app development platform. Dify's intuitive interface combines AI workflow, RAG pipeline, agent capabilities, model management, observability features and more, letting you quickly go from prototype to production.
https://dify.ai
Other
50.05k stars 7.15k forks source link

add team member window display bug #5729

Closed Winson-030 closed 3 months ago

Winson-030 commented 4 months ago

Self Checks

Dify version

0.6.12

Cloud or Self Hosted

Self Hosted (Docker)

Steps to reproduce

dify-bug_2024-06-29_01-17-29

Role select display bug

✔️ Expected Behavior

No response

❌ Actual Behavior

No response

dosubot[bot] commented 4 months ago

@Winson-030 Hello there! I'm here to help you with any bugs, questions, or contributions you may have while waiting for a human maintainer. Let's work together to solve this issue.

The display bug in the "Add Team Member" window's role selection dropdown might be related to recent changes in the codebase. The dropdown is implemented using the Listbox component from @headlessui/react, with roles defined in the InvitingRoles array. Custom styles are applied using Tailwind CSS and a CSS module (index.module.css).

Here is a relevant code snippet for the Listbox component:

const InvitingRoles = useMemo(() => [
  {
    name: 'normal',
    description: t('common.members.normalTip'),
  },
  {
    name: 'editor',
    description: t('common.members.editorTip'),
  },
  {
    name: 'admin',
    description: t('common.members.adminTip'),
  },
], [t])
const [role, setRole] = useState(InvitingRoles[0])

<Listbox value={role} onChange={setRole}>
  <div className="relative pb-6">
    <Listbox.Button className="relative w-full py-2 pl-3 pr-10 text-left bg-gray-100 outline-none border-none appearance-none text-sm text-gray-900 rounded-lg">
      <span className="block truncate capitalize">{t('common.members.invitedAsRole', { role: t(`common.members.${role.name}`) })}</span>
    </Listbox.Button>
    <Transition
      as={Fragment}
      leave="transition ease-in duration-200"
      leaveFrom="opacity-200"
      leaveTo="opacity-0"
    >
      <Listbox.Options className="absolute w-full py-1 my-2 overflow-auto text-base bg-white rounded-md shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
        {InvitingRoles.map(role =>
          <Listbox.Option
            key={role.name}
            className={({ active }) =>
              `${active ? ' bg-gray-50 rounded-xl' : ' bg-transparent'}
                cursor-default select-none relative py-2 px-4 mx-2 flex flex-col`
            }
            value={role}
          >
            {({ selected }) => (
              <div className='flex flex-row'>
                <span
                  className={cn(
                    'text-indigo-600 mr-2',
                    'flex items-center',
                  )}
                >
                  {selected && (<CheckIcon className="h-5 w-5" aria-hidden="true" />)}
                </span>
                <div className=' flex flex-col flex-grow'>
                  <span className={`${selected ? 'font-medium' : 'font-normal'} capitalize block truncate`}>
                    {t(`common.members.${role.name}`)}
                  </span>
                  <span className={`${selected ? 'font-medium' : 'font-normal'} capitalize block text-gray-500`}>
                    {role.description}
                  </span>
                </div>
              </div>
            )}
          </Listbox.Option>,
        )}
      </Listbox.Options>
    </Transition>
  </div>
</Listbox>

Additionally, the Menu component from @headlessui/react is used in another implementation for role selection:

return (
    <Menu as="div" className="relative w-full h-full">
      {
        ({ open }) => (
          <>
            <Menu.Button className={cn(
              `
                  group flex items-center justify-between w-full h-full
                  hover:bg-gray-100 cursor-pointer ${open && 'bg-gray-100'}
                  text-[13px] text-gray-700 px-3
                `,
            )}>
              {RoleMap[member.role] || RoleMap.normal}
              <ChevronDownIcon className={`w-4 h-4 group-hover:block ${open ? 'block' : 'hidden'}`} />
            </Menu.Button>
            <Transition
              as={Fragment}
              enter="transition ease-out duration-100"
              enterFrom="transform opacity-0 scale-95"
              enterTo="transform opacity-100 scale-100"
              leave="transition ease-in duration-75"
              leaveFrom="transform opacity-100 scale-100"
              leaveTo="transform opacity-0 scale-95"
            >
              <Menu.Items
                className={cn(
                  `
                      absolute right-0 top-[52px] z-10 bg-white border-[0.5px] border-gray-200
                      divide-y divide-gray-100 origin-top-right rounded-lg
                    `,
                  s.popup,
                )}
              >
                <div className="px-1 py-1">
                  {
                    ['admin', 'editor', 'normal'].map(role => (
                      <Menu.Item key={role}>
                        <div className={itemClassName} onClick={() => handleUpdateMemberRole(role)}>
                          {
                            role === member.role
                              ? <CheckIcon className={itemIconClassName} />
                              : <div className={itemIconClassName} />
                          }
                          <div>
                            <div className={itemTitleClassName}>{t(`common.members.${role}`)}</div>
                            <div className={itemDescClassName}>{t(`common.members.${role}Tip`)}</div>
                          </div>
                        </div>
                      </Menu.Item>
                    ))
                  }
                </div>
                <Menu.Item>
                  <div className='px-1 py-1'>
                    <div className={itemClassName} onClick={handleDeleteMemberOrCancelInvitation}>
                      <div className={itemIconClassName} />
                      <div>
                        <div className={itemTitleClassName}>{t('common.members.removeFromTeam')}</div>
                        <div className={itemDescClassName}>{t('common.members.removeFromTeamTip')}</div>
                      </div>
                    </div>
                  </div>
                </Menu.Item>
              </Menu.Items>
            </Transition>
          </>
        )
      }
    </Menu>
  )
}

export default Operation

These implementations use Tailwind CSS for styling and custom styles from index.module.css. The issue might be related to these styles or the recent changes in the codebase [1][2].

To continue talking to Dosu, mention @dosu.

Winson-030 commented 4 months ago

@dosu can please give some fix advices?

dosubot[bot] commented 4 months ago

To fix the display bug in the "Add Team Member" window's role selection dropdown, you can adjust the Listbox component's styling and behavior. Here is the relevant code snippet with potential fixes:

  1. Ensure the Listbox.Button and Listbox.Options have proper styling to handle visibility and positioning.
  2. Adjust the Transition component to ensure smooth transitions.

Here is the updated code snippet:

<Listbox value={role} onChange={setRole}>
  <div className="relative pb-6">
    <Listbox.Button className="relative w-full py-2 pl-3 pr-10 text-left bg-gray-100 outline-none border-none appearance-none text-sm text-gray-900 rounded-lg">
      <span className="block truncate capitalize">{t('common.members.invitedAsRole', { role: t(`common.members.${role.name}`) })}</span>
    </Listbox.Button>
    <Transition
      as={Fragment}
      leave="transition ease-in duration-200"
      leaveFrom="opacity-100"
      leaveTo="opacity-0"
    >
      <Listbox.Options className="absolute w-full py-1 my-2 overflow-auto text-base bg-white rounded-md shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
        {InvitingRoles.map(role =>
          <Listbox.Option
            key={role.name}
            className={({ active }) =>
              `${active ? 'bg-gray-50 rounded-xl' : 'bg-transparent'}
                cursor-default select-none relative py-2 px-4 mx-2 flex flex-col`
            }
            value={role}
          >
            {({ selected }) => (
              <div className='flex flex-row'>
                <span
                  className={cn(
                    'text-indigo-600 mr-2',
                    'flex items-center',
                  )}
                >
                  {selected && (<CheckIcon className="h-5 w-5" aria-hidden="true" />)}
                </span>
                <div className='flex flex-col flex-grow'>
                  <span className={`${selected ? 'font-medium' : 'font-normal'} capitalize block truncate`}>
                    {t(`common.members.${role.name}`)}
                  </span>
                  <span className={`${selected ? 'font-medium' : 'font-normal'} capitalize block text-gray-500`}>
                    {role.description}
                  </span>
                </div>
              </div>
            )}
          </Listbox.Option>,
        )}
      </Listbox.Options>
    </Transition>
  </div>
</Listbox>

Key changes:

These changes should help in fixing the display bug in the role selection dropdown [1].

To continue talking to Dosu, mention @dosu.

crazywoola commented 3 months ago

It has been fix in latest branch.