[$30] - Add Predix badges to profiles

[ajefts]

No description provided.

[ajefts]

@talesforce Let's chat about this one tomorrow. I'd like to get this going relatively soon. It involves adding a couple new badges to the existing badge framework.

[ajefts]

Here are the images for the badges.

tc-predix-community-badge.zip

@talesforce Can we get these added to the current sprite for the badges and get the profile page updated so it uses the new sprite? These badges should show up like the other badges do on the profile page.

We will be adding the data for the badge assignment separately, so you can assume that part is done.

[birdofpreyru]

@ajefts Do you mean by badges the image shown in the Skills section of the Profile page? It looks to me, there is no sprite for those, they are just stored and served as separate .svg images.

[ajefts]

Thanks for jumping in @birdofpreyru . This is one we need to get done soon.

I'm referring to the badge modal you see if you click "Badges" under your profile pic:

I believe it uses sprites like these: https://github.com/appirio-tech/topcoder-app/blob/dev/assets/images/badge.grid.large.png

So, we need to get the sprite updated and the code logic that defines which badge to display based on the given badge id.

@dmessing Do you have your scripts handy for manually assigning badges? Can you attach them here please?

[birdofpreyru]

Expected Fix:

1. Add provided Predix Badge (https://github.com/appirio-tech/topcoder-app/files/699268/tc-predix-community-badge.zip) to the sprite (https://github.com/appirio-tech/topcoder-app/blob/dev/assets/images/badge.grid.large.png)

2. For testing, mock the badges of the test user in the locally deployed App:
   In /app/services/user.service.js add after the line 5:
   import { getMockUserProfile } from '../../tests/test-helpers/mock-data.js'
   and change the getV2UserProfile function into:

    function getV2UserProfile(handle) {
      var profile = getMockUserProfile().data;
      profile.Achievements.push({
        date: "2017-01-01T00:00:00.000-04:00",
        description: "Predix Coder",
      });
      return Promise.resolve(profile);
    }

3. Make any necessary modifications in other code, to ensure that Predix badge is properly displayed in the Badges modal of the user profile.

4. Revert the changes done for testing (2) before submitting PR.