Release 20251202

src/common/components/WatcherList/MemberAddAutoComplete.tsx

@@ -0,0 +1,48 @@
+import {
+  Autocomplete,
+  DropdownFieldNew,
+  MD,
+} from '@appquality/unguess-design-system';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const MemberAddAutocomplete = ({
+  onSelect,
+  users,
+  isLoading,
+}: {
+  onSelect: (selectionValue: number) => void;
+  isLoading: boolean;
+  users: Array<{ id: number; name: string; email: string }>;
+}) => {
+  const { t } = useTranslation();
+  const [inputValue, setInputValue] = useState('');
+
+  if (!users || isLoading) return null;
+
+  return (
+    <DropdownFieldNew>
+      <Autocomplete
+        onInputChange={(value) => setInputValue(value)}
+        inputValue={inputValue}
+        selectionValue={null}
+        placeholder={t(
+          '__PLAN_PAGE_WATCHER_LIST_SELECT_ADD_MEMBERS_PLACEHOLDER'
+        )}
+        options={users.map((user) => ({
+          children: <MD isBold>{user.name}</MD>,
+          meta: user.email,
+          id: `user-${user.id}`,
+          label: `${user.name} - ${user.email}`,
+          value: `${user.id}`,
+        }))}
+        onOptionClick={({ selectionValue }) => {
+          setInputValue('');
+          onSelect(Number(selectionValue));
+        }}
+      />
+    </DropdownFieldNew>
+  );
+};
+
+export { MemberAddAutocomplete };

src/common/components/WatcherList/UserItemComponent.tsx

@@ -0,0 +1,129 @@
+import {
+  Avatar,
+  Ellipsis,
+  getColor,
+  IconButton,
+  MD,
+  SM,
+  Tooltip,
+} from '@appquality/unguess-design-system';
+import { t } from 'i18next';
+import { appTheme } from 'src/app/theme';
+import { ReactComponent as XStroke } from 'src/assets/icons/x-stroke.svg';
+import { getInitials } from 'src/common/components/navigation/header/utils';
+import { prepareGravatar } from 'src/common/utils';
+import styled from 'styled-components';
+
+const StyledEllipsis = styled(Ellipsis)``;
+
+const UserListItem = styled.div`
+  display: flex;
+  padding: ${({ theme }) => `${theme.space.xs} 0`};
+  align-items: center;
+  gap: ${({ theme }) => theme.space.sm};
+
+  ${StyledEllipsis} {
+    width: 250px;
+  }
+`;
+
+const UserAvatar = ({
+  image,
+  name,
+  isInternal,
+}: {
+  image?: string;
+  name: string;
+  isInternal: boolean;
+}) => {
+  if (isInternal) {
+    return <Avatar avatarType="system" />;
+  }
+  return (
+    <Avatar avatarType={image ? 'image' : 'text'}>
+      {image ? prepareGravatar(image, 64) : getInitials(name)}
+    </Avatar>
+  );
+};
+
+const UserItem = ({
+  onClick,
+  hideRemoveButton,
+  isLastOne,
+  user,
+}: {
+  onClick: () => void;
+  hideRemoveButton?: boolean;
+  isLastOne: boolean;
+  user: {
+    id: number;
+    name: string;
+    email: string;
+    image?: string;
+    isInternal: boolean;
+    isMe?: boolean;
+  };
+}) => {
+  const { isMe } = user;
+
+  const iconButton = (
+    <IconButton disabled={isLastOne} onClick={onClick}>
+      <XStroke />
+    </IconButton>
+  );
+
+  return (
+    <UserListItem>
+      <div style={{ paddingLeft: '2px' }}>
+        <UserAvatar
+          image={user.image}
+          name={user.name.length ? user.name : user.email}
+          isInternal={user.isInternal}
+        />
+      </div>
+      <div>
+        <MD
+          isBold
+          style={{
+            color: getColor(appTheme.colors.primaryHue, 600),
+          }}
+        >
+          <StyledEllipsis>
+            {user.name.length ? user.name : user.email}{' '}
+            {isMe && t('__WORKSPACE_SETTINGS_CURRENT_MEMBER_YOU_LABEL')}
+          </StyledEllipsis>
+        </MD>
+        {user.name.length > 0 && (
+          <SM
+            style={{
+              color: appTheme.palette.grey[700],
+            }}
+          >
+            <StyledEllipsis>{user.email}</StyledEllipsis>
+          </SM>
+        )}
+      </div>
+      <div>
+        {!hideRemoveButton && (
+          <Tooltip
+            placement="start"
+            type="light"
+            size="large"
+            content={
+              isLastOne
+                ? t(
+                    '__PLAN_PAGE_WATCHER_LIST_MODAL_REMOVE_BUTTON_DISABLED_TOOLTIP'
+                  )
+                : t('__PLAN_PAGE_WATCHER_LIST_MODAL_REMOVE_BUTTON_TOOLTIP')
+            }
+          >
+            {/* the following div is necessary to make Tooltip work with disabled IconButton */}
+            <div>{iconButton}</div>
+          </Tooltip>
+        )}
+      </div>
+    </UserListItem>
+  );
+};
+
+export { UserItem };

src/common/components/WatcherList/WatchButton.tsx

@@ -0,0 +1,75 @@
+import { Button, Tooltip } from '@appquality/unguess-design-system';
+import { useTranslation } from 'react-i18next';
+import { appTheme } from 'src/app/theme';
+
+import { ReactComponent as EyeIconFill } from 'src/assets/icons/eye-icon-fill.svg';
+import { ReactComponent as EyeIconSlash } from 'src/assets/icons/eye-icon-slash.svg';
+import { useGetUsersMeQuery } from 'src/features/api';
+
+const WatchButton = ({
+  isWatching,
+  isLastOne,
+  onClick,
+  isDisabled,
+}: {
+  isWatching: boolean;
+  isDisabled: boolean;
+  isLastOne: boolean;
+  onClick: () => void;
+}) => {
+  const { data: currentUser } = useGetUsersMeQuery();
+  const { t } = useTranslation();
+
+  const isLastWatcher = isWatching && isLastOne;
+
+  const iconColor = (() => {
+    if (isDisabled) return appTheme.palette.grey[400];
+    if (!isWatching) return '#fff';
+    return undefined;
+  })();
+
+  const EyeIcon = isWatching ? EyeIconSlash : EyeIconFill;
+
+  if (!currentUser) return null;
+
+  const button = (
+    <Button
+      isStretched
+      disabled={isDisabled}
+      isPrimary={!isWatching}
+      onClick={onClick}
+    >
+      <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+        <EyeIcon color={iconColor} />
+
+        {isWatching
+          ? t('__PLAN_PAGE_WATCHER_LIST_MODAL_UNFOLLOW_BUTTON')
+          : t('__PLAN_PAGE_WATCHER_LIST_MODAL_FOLLOW_BUTTON')}
+      </div>
+    </Button>
+  );
+
+  if (isDisabled) {
+    return (
+      <Tooltip
+        placement="start"
+        type="light"
+        size="large"
+        content={
+          isLastWatcher
+            ? t(
+                '__PLAN_PAGE_WATCHER_LIST_MODAL_UNFOLLOW_BUTTON_DISABLED_TOOLTIP'
+              )
+            : t('__PLAN_PAGE_WATCHER_LIST_MODAL_FOLLOW_BUTTON_DISABLED_TOOLTIP')
+        }
+      >
+        {/* the following div is necessary to make Tooltip work with disabled Button */}
+        <div>{button}</div>
+      </Tooltip>
+    );
+  }
+
+  return button;
+};
+
+export { WatchButton };