Merge pull request #7193 from hotosm/feat/7053-start-indicator

Display the stars as per mapping level beside the username

Author: ramyaragupathy

frontend/src/components/svgIcons/index.js

@@ -23,7 +23,7 @@ export { ExitIcon } from './exit';
 export { EyeIcon } from './eye';
 export { HomeIcon } from './home';
 export { LockIcon } from './lock';
-export { StarIcon, FullStarIcon, HalfStarIcon } from './star';
+export { StarIcon, FullStarIcon, HalfStarIcon, FullStarIconYellow, FullStarIconBlue } from './star';
 export { GripIcon } from './grip';
 export { GithubIcon } from './github';
 export { RightIcon } from './right';

frontend/src/components/svgIcons/star.js

@@ -40,3 +40,28 @@ export class HalfStarIcon extends PureComponent {
     );
   }
 }
+
+export class FullStarIconYellow extends PureComponent {
+  render() {
+    return (
+      <svg viewBox="0 0 576 512" {...this.props}>
+        <path
+          fill="#ff8800ff"
+          d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
+        ></path>
+      </svg>
+    );
+  }
+}
+export class FullStarIconBlue extends PureComponent {
+  render() {
+    return (
+      <svg viewBox="0 0 576 512" {...this.props}>
+        <path
+          fill="#023e70e2"
+          d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
+        ></path>
+      </svg>
+    );
+  }
+}

frontend/src/components/taskSelection/contributions.js

@@ -12,46 +12,65 @@ import {
   MappedIcon,
   ValidatedIcon,
   AsteriskIcon,
+  StarIcon,
   HalfStarIcon,
   FullStarIcon,
+  FullStarIconYellow,
   ChartLineIcon,
+  FullStarIconBlue,
 } from '../svgIcons';
 import ProjectProgressBar from '../projectCard/projectProgressBar';
 import { useComputeCompleteness } from '../../hooks/UseProjectCompletenessCalc';
 import { useFilterContributors } from '../../hooks/UseFilterContributors';
 import { OSMChaButton } from '../projectDetail/osmchaButton';
 import { useProjectContributionsLevelQuery } from '../../api/projects.js';
 
-export const MappingLevelIcon = ({ mappingLevel }) => {
-  if (!mappingLevel) {
+export const MappingLevelIcon = ({ mappingLevel, mappingLevelList }: Object) => {
+  if (!mappingLevel || !mappingLevelList || mappingLevelList.length === 0) {
     return null;
   }
+
+  // Sort the mapping levels by ordering
+  const sortedLevels = [...mappingLevelList].sort((a, b) => a.ordering - b.ordering);
+
+  // Find the current mapping level in the sorted list
   const upperCaseLevelStr = mappingLevel.toUpperCase();
-  let level = null;
+  const currentLevel = sortedLevels.find((level) => level.name.toUpperCase() === upperCaseLevelStr);
 
-  if (upperCaseLevelStr.includes('ADVANCED')) {
-    level = 'ADVANCED';
-  } else if (upperCaseLevelStr.includes('INTERMEDIATE')) {
-    level = 'INTERMEDIATE';
+  if (!currentLevel) {
+    return null;
   }
 
-  if (level) {
-    return (
-      <FormattedMessage {...messages[`mappingLevel${level}`]}>
-        {(msg) => (
-          <span className="blue-grey ttl" title={msg}>
-            {level === 'ADVANCED' ? (
-              <FullStarIcon className="h1 w1 v-mid pb1" />
-            ) : (
-              <HalfStarIcon className="h1 w1 v-mid pb1" />
-            )}
-          </span>
-        )}
-      </FormattedMessage>
-    );
-  }
+  // Determine which icon to show based on position in sorted array
+  const getStarIcon = () => {
+    // Find the index (position) of the current level in the sorted array
+    const currentIndex = sortedLevels.findIndex((level) => level.name === currentLevel.name);
+    const lastIndex = sortedLevels.length - 1;
 
-  return null;
+    // First 3 positions (indices 0, 1, 2)
+    if (currentIndex === 0) {
+      // Empty star for first position
+      return <StarIcon className="h1 w1 v-mid pb1" />;
+    } else if (currentIndex === 1) {
+      // Half star for second position
+      return <HalfStarIcon className="h1 w1 v-mid pb1" />;
+    } else if (currentIndex === 2) {
+      // Full star for third position
+      return <FullStarIcon className="h1 w1 v-mid pb1" />;
+    } else if (currentIndex === lastIndex) {
+      // Yellow star for last position (highest level)
+      return <FullStarIconYellow className="h1 w1 v-mid pb1" />;
+    } else {
+      // Full stars for anything in between
+      return <FullStarIconBlue className="h1 w1 v-mid pb1" />;
+    }
+  };
+
+  return (
+    <span className="blue-grey ttl" title={currentLevel.name}>
+      {getStarIcon()}
+    </span>
+  );
 };
 
 const sortByLits = [
@@ -95,7 +114,7 @@ const SortingHeader = ({ sortBy, setSortBy }: Object) => {
   );
 };
 
-function Contributor({ user, activeUser, activeStatus, displayTasks }: Object) {
+function Contributor({ user, activeUser, activeStatus, displayTasks, mappingLevelList }: Object) {
   const intl = useIntl();
   const checkActiveUserAndStatus = (status, username) =>
     activeStatus === status && activeUser === username ? 'bg-blue-dark' : 'bg-grey-light';
@@ -123,7 +142,7 @@ function Contributor({ user, activeUser, activeStatus, displayTasks }: Object) {
             </>
           )}
         </FormattedMessage>
-        {/* <MappingLevelIcon mappingLevel={user.mappingLevel} /> */}
+        <MappingLevelIcon mappingLevel={user.mappingLevel} mappingLevelList={mappingLevelList} />
       </div>
 
       <div className="w-20 fl tr dib truncate">
@@ -170,9 +189,16 @@ function Contributor({ user, activeUser, activeStatus, displayTasks }: Object) {
   );
 }
 
-const Contributions = ({ project, tasks, contribsData, activeUser, activeStatus, selectTask }) => {
+const Contributions = ({
+  project,
+  tasks,
+  contribsData,
+  activeUser,
+  activeStatus,
+  selectTask,
+}: Object) => {
   const intl = useIntl();
-  const { data } = useProjectContributionsLevelQuery();
+  const { data: mappingLevelList } = useProjectContributionsLevelQuery();
 
   const mappingLevels = useMemo(() => {
     const getLevelLabel = (level) => {
@@ -183,7 +209,7 @@ const Contributions = ({ project, tasks, contribsData, activeUser, activeStatus,
     };
 
     const dynamicLevels =
-      data?.map((level) => ({
+      mappingLevelList?.map((level) => ({
         value: level.name,
         label: getLevelLabel(level.name || ''),
       })) || [];
@@ -193,7 +219,7 @@ const Contributions = ({ project, tasks, contribsData, activeUser, activeStatus,
       ...dynamicLevels,
       { value: 'NEWUSER', label: intl.formatMessage(messages.mappingLevelNEWUSER) },
     ];
-  }, [data, intl]);
+  }, [mappingLevelList, intl]);
 
   const defaultUserFilter = {
     label: intl.formatMessage(messages.userFilterDefaultLabel),
@@ -279,6 +305,7 @@ const Contributions = ({ project, tasks, contribsData, activeUser, activeStatus,
               activeStatus={activeStatus}
               displayTasks={displayTasks}
               key={k}
+              mappingLevelList={mappingLevelList}
             />
           ))}
         </ReactPlaceholder>

frontend/src/components/taskSelection/tests/mappingLevelIcon.test.js

@@ -1,34 +1,49 @@
-import { FormattedMessage } from 'react-intl';
-
 import { createComponentWithIntl } from '../../../utils/testWithIntl';
 import { MappingLevelIcon } from '../contributions';
-import { FullStarIcon, HalfStarIcon } from '../../svgIcons';
+import { FullStarIcon, FullStarIconYellow, HalfStarIcon } from '../../svgIcons';
+
+const mappingLevelList = [
+  { name: 'BEGINNER', ordering: 1 },
+  { name: 'INTERMEDIATE', ordering: 2 },
+  { name: 'ADVANCED', ordering: 3 },
+  { name: 'SUPER_MAPPER', ordering: 4 },
+];
 
 describe('if mappingLevel is "Intermediate mapper"', () => {
-  const element = createComponentWithIntl(<MappingLevelIcon mappingLevel="INTERMEDIATE" />);
+  const element = createComponentWithIntl(
+    <MappingLevelIcon mappingLevel="INTERMEDIATE" mappingLevelList={mappingLevelList} />,
+  );
   const instance = element.root;
   it('HalfStarIcon with correct classNames', () => {
     expect(instance.findByType(HalfStarIcon).props.className).toBe('h1 w1 v-mid pb1');
   });
-  it('FormattedMessage with the correct id', () => {
-    expect(instance.findByType(FormattedMessage).props.id).toBe('project.level.intermediate');
-  });
 });
 
 describe('if mappingLevel is "Advanced mapper"', () => {
-  const element = createComponentWithIntl(<MappingLevelIcon mappingLevel="ADVANCED" />);
+  const element = createComponentWithIntl(
+    <MappingLevelIcon mappingLevel="ADVANCED" mappingLevelList={mappingLevelList} />,
+  );
   const instance = element.root;
   it('should render a FullStarIcon', () => {
     expect(instance.findByType(FullStarIcon).props.className).toBe('h1 w1 v-mid pb1');
   });
-  it('should render a FormattedMessage with the correct id', () => {
-    expect(instance.findByType(FormattedMessage).props.id).toBe('project.level.advanced');
+});
+
+describe('if mappingLevel is "Super Mapper"', () => {
+  const element = createComponentWithIntl(
+    <MappingLevelIcon mappingLevel="SUPER_MAPPER" mappingLevelList={mappingLevelList} />,
+  );
+  const instance = element.root;
+  it('should render a FullStarIconYellow', () => {
+    expect(instance.findByType(FullStarIconYellow).props.className).toBe('h1 w1 v-mid pb1');
   });
 });
 
 describe('if mappingLevel is anything else', () => {
   it('should not render anything', () => {
-    const element = createComponentWithIntl(<MappingLevelIcon mappingLevel="BEGINNER" />);
+    const element = createComponentWithIntl(
+      <MappingLevelIcon mappingLevel="MAPPER" mappingLevelList={mappingLevelList} />,
+    );
     expect(element.toJSON()).toBeNull();
   });
 });