Create Tag generator page

[civictechindex]

Create Tag generator page

[nrrao]

@Abhishek-AC yes,I was able to get the topics tags.No need for authentication

[nrrao]

1.Progress: working on mobile screens of tag generator and need to contact GitHub support team
2.Blockers: none
3.Availability: medium
4.ETA: 1 week

[chalimar]

Need to discuss with team: Adding a stepper for the wizard for better UX and progress indication.

[giosce]

@Gio @emecas - it looks like a ui decision was made that affects the technical working of the tag generator and the user experience to make it less flexible. Let's talk about the motivation for changing it and how we can adress your concerns without changing flexibility of the application.

What is this UI decision?

[ExperimentsInHonesty]

@nrrao will share code with @Abhishek-AC for component hiding.

[Abhishek-AC]

@nrrao shared the code and was able to fix the code for on state change visibility of components.

[Abhishek-AC]

@nrrao
GitHub API to list the existing repository tags. No Authentication Required.

Method-Type GET
URL: https://api.github.com/repos/:owner/:repo/topics

Fetch the owner and repository from the user-entered GitHub URL.
Set the path variable as the following example:
KEY: owner VALUE: civictechindex
KEY: repo VALUE: website

Here is the implementation in Postman Window

Let me know if you face any issues.

[nrrao]

@chalimar, need clarification when a project is not affiliated to the organization and has tags.

[ExperimentsInHonesty]

1. Progress: got api working and figured out returning to add more tags function
2. Blocks: none
3. Availability: Very
4. ETA: automated process will be done by next week.

[nrtestweb]

1. Progress: was able to add topics to the repository, now need to refactor the components
   2.Blocks: none
   3.Availability: Medium
   4.ETA: need one more week to complete the automated process

[nrrao]

1. Progress: Was able to get access token and generate secret code
2. Blocks: After logging in to GitHub, when it gets redirected the react page is not holding the same state.
3. Availability: Medium
   4 ETA: Need help to move forward

[arunprakash87]

@ExperimentsInHonesty will connect to Tyler

[ExperimentsInHonesty]

I also posted this in slack
Nandana please check out: #54 (comment). I still think it might be possible to give a redirect link made up of a link + parameters and have it deliver back the url+ the new argument that is the authorization code.

[nrrao]

1:Progress: I was able to update topics by sending repo, owner, and topics as query parameters along with redirect URL
2:Blocks: Need to check if it works for org repo with different scopes./permission levels
3:Availability: Medium
4 ETA: 1 week

[nrrao]

1.Progress: I have opened a Github ticket regarding users with admin and maintain rights not being able to update topics.
Need to make success and manual pages.
2.Blocks: Waiting for GitHub to reply.
3.Availability: medium
4.ETA: About a week

[ExperimentsInHonesty]

First step is Owner must approve 3rd access app for the github org
tags can be added.

@ExperimentsInHonesty denied access to the oath app tag generator
@nrrao is going to try it again, and see if it will queue up a user request for owner to install
if it doesn't work, try modeling travisCI install on sandbox

@Abhishek-AC has setup the oath app on civic tech index
https://github.com/organizations/civictechindex/settings/applications/1308050

[nrrao]

@ExperimentsInHonesty I have requested for permission for adding topic tags. It will be by the civic tech index.

[ExperimentsInHonesty]

I received the email

Clicking on the link took me to this page

Clicking on the accept link changes the page's status to

[nrrao]

When I clicked Login it takes me to the permission request page.

I requested for Organization access and also clicked on Authorize civictechindex.

The user can see the request pending in the settings/applications/Authrized Oauth Apps in the github account

[ExperimentsInHonesty]

@nrrao can you post an update

1. Progress
2. Blockers
3. Availability
4. ETA

[nrrao]

Screenshots of the response I got from GitHub support

I tried using the scope with space the recommended way, still getting the same kind of errors will write to the support team for further suggestions.

[nrrao]

1.Progress: working on mobile screens of tag generator and need to contact GitHub support team
2.Blockers: none
3.Availability: medium
4.ETA: 1 to 2 weeks

[nrrao]

@ExperimentsInHonesty As discussed the data we need to keep track is
existing tags, new tags, project name( for social media),URL of the repository, manual/automated process.
We also discussed a separate database for wizard user results.

[jsachsman]

@Abhishek-AC can you get the current version of this branch running in development when you have time? Thanks!

[Abhishek-AC]

I have deployed the taggenerator-nandana branch
Link: https://cti-dev.herokuapp.com/

[ExperimentsInHonesty]

@chalimar
Currently it says:
Do you want to add additional topic tags to increase your project visibility?

It should say
Do you want to add more tags specific to your project's subject area to increase visibility?

[jsachsman]

A few notes in no particular order:
When you are requested to add the Repository URL, we need a better description there and the text box should have a default which suggests what a correctly formatted repository URL looks like.
Errors also need to match whether user has a blank entry here versus whether it was inaccurate
@chalimar please add a visual for this showing a 'chart' for a correctly formatted URL

The flow for the Tag Generator needs to be reflected by parameters in the URL so users can pick back up when they lose the thread. This is a new requirement so I'll outline it here subject to @ExperimentsInHonesty's revisions:

• As the user makes choices, the URL should add parameters which match those choices
• If the user uses the 'back' button it should pull them back one choice
• Copying and pasting a URL with parameters and going directly to that screen should put a user in the correct 'state' (so you can leave the process and come back)

[jsachsman]

@chalimar is currently updating the Figma with the updated versions for the Tag Generator screens.
Please look there to see how this needs to be updated for the MVP, including a new flow which goes directly to a 'Manual Entry' screen at the end.

[ExperimentsInHonesty]

WIP -

Anything on this list that is unchecked in not live yet or needs reworking.

• design
  • Yes organization/step 2 (without project repository url field)
  • Error state for Project Repository URL
• development
  Wizard
  Questions and buttons that only show up after each answer is given
• Is your project affiliated with an organization? (yes/no)
  • Which Organization? (input box with type ahead to our db) - _conditional on above _ & allows you to add a new org if the type ahead does not apply
  • Project Repository URL: (input box)
  • That does not seem to be a valid repository URL (error state)
• Find Project (button)
  • These are your repository’s current topic tags: (lists tags) OR There are currently no topic tags in your project's repository.
  • Add tags to increase your project's visibility - conditional on project being found through github api call
  • What topic(s), cause(s), or civic issues(s) does your project address? (input bar with + for adding)
  • Reset Tags (button) - deletes the tags you have inputted from state
  • Reset Form (button) - takes you back to beginning of tag generator
  • Generate Tags (button)
    • Add these topic tags to your repository: (shows tags with copy paste icon)
    • Opps! I need to add another tag (button) - returns you to the state after you inputted your tags but before you hit Generate Tags
    • Reset Tags (button) - returns you to state before you hit Generate Tags and removes the tags you have inputted.
    • Reset Form (button) - takes you back to beginning of tag generator
    • Add these tags to your repo (button)

Tutorial
Once the Generate Tags button has been pushed
Is your organization affiliated with an Organization (yes)
Organization
Project Repository URL:
Add these topic tags to your repository:
[a list of the topic tags you added and the ones we know you need (civictechindex, code-for-all possibly, etc.)]
How to add your tags to your project's repository
We recommend having your project's repository open in another browser for ease of convenience.

1. Navigate to your project's repository in another browser to add your generated tags.
2. Under your project's repository, click [image of gear] to paste your tags.
   • screenshot
3. Under "Topics", paste the topic you want to add to your repository.
   • screenshot
4. Repeat until you have finished adding all of your tags, then Save Changes.
   • screenshot
     This project is so new, we are celebrating every win!
     Let us know when you've added #civictechindex (button)
     Add another project
     Tag Generator (button) - takes you back to the beginning
     Collaborate with us
     Learn More (button) - takes you to the Radical Collaboration page

[ExperimentsInHonesty]

This is the library to use when we are ready to have them add tags via the clipboard feature on the tag generator wizard https://webdesign.tutsplus.com/tutorials/copy-to-clipboard-made-easy-with-clipboardjs--cms-25086

[captain-nimo]

Discussion to have with design team:

• What happens when an organization is not in our database.
• Need to add drop-down to select project language (post MVP).

[captain-nimo]

• Step#0: Error state: Tag Generator page is not available (404 page).

• Step#1: We should show the tag generator page without any radio button being selected.

• Step#2: User selects radio button No.

  • Select Organization drop-down should not appear.
  • Rest of the steps/cases are same when user selects radio button Yes (Step#3 to Step#5).

• Step#2: User selects radio button Yes.

• Step#3: Which organization drop-down and Project Repository URL text-box should appear.

  • Question: Should we show Select Organization as default item selected?
  • What happens if user is affiliated with multiple organizations?
  • We should show empty Project Repository URL text-box
  • Need to add: error state if user hits Find Project button without selecting organization.
  • Need to add: error state if user hits Find Project button, but Project Repository URL text-box is empty.
  • Need to add drop-down to select project language (post MVP).
  • Need to add: the project URL user used is incorrect.

• Step#4: Project was found in GitHub

  • Need to add: error state when there is no current topic tag available for the project.
  • User should be given option to add tag for the project.
  • ‘Generate Tags’ buttons should not appear until at least one tag is added for the project.
  • Current topic tags for the projects are shown under These are your current topic tags message.
  • Radio buttons (Yes/No) should not be by default selected for Do you want to add more tags to your project’s subject area to increase visibility? message.
  • If there is at least one existing tag for the project and user selects No radio button: only Reset Form buttons should appear.
    • Reset Form button takes you back to beginning of tag generator.
  • User selects Yes radio button: What topic(s), cause(s), or civic issues(s) does your project address? (input bar with + for adding). [No button should appear yet].
    • After selecting/adding a topic(s)/cause(s) suggested tags should appear under Add these topic tags to your repository message.
    • Opps! I need to add another tag, Reset Tags and Reset Tags buttons should appear.
      • Opps! I need to add another tag button should take user to the state right after user inputted tags but didn't hit Generate Tags. Also user should be able to add new tags.
      • Reset Tags button should take the user to state before user hit Generate Tags and removes all the tags user has added.
      • Reset Form button should take the user back to beginning of tag generator.
      • Add these tags to your repo button should take the user summary page.

• Step#5: Summary of all the selected/added info should be shown in this page.

  • List of all added tags should be shown here (with copy/paste icon).
  • Tutorial of How add tags to your project's repository should be shown.

[anirbank91]

• No workflow

• Step#1: User selects radio button No in question Is your project affiliated with an organization?

• Step#2: Project Repository URL text-box should appear.

  • We should show empty Project Repository URL textbox
  • Need to add: error state if user Project repository URL is invalid
  • Need to add: error state if Project Repository URL text-box is empty and user clicks on Find Project button,
  • Question: Should we add button to Add organization in this use case?

• Step#3: Project was found in GitHub

  • User is given the option to Add topic tag, Reset tags and Reset forms for the project, and every button is enabled
  • Generate Tags button should not be enabled until at least one tag is added for the project.
  • Step#3.1: Topic tags present in project
    • Current topic tags for the projects are shown under "What topic(s) does your project address?” message.
  • Step#3.2: Topic tags not present in project
    • Need to add: error state when there is no topic tag available for the project.

• Step#4: Add tags

  • Allows the user to enter a tag
  • Allows the user to remove a tag by selecting the x button
  • Question: Is there a limit to the maximum number of tags that can be added?
  • Need to add: Warning state if maximum tags reached

• Step#5: Reset tags

  • Resets all the tags and restores to default state

• Step#6: Reset forms

  • Resets form
  • No option is selected in the Is project affiliated button radio button

• Step#7: Click Generate Tags

  • ‘Oops! I need to add another tag’ option appears
  • Step#7.1: Click Oops! I need to add another tag
    • Takes user to the edit tag page, where Add Topic tag is available
  • Add these tags to your repo button appears

• Step#8: Click Add these tags to your repo

  • Message confirming "Tags added to the repository"
  • Tag Generator home page appears

[celeste-hub]

@ExperimentsInHonesty suggested for the entire flow chart

[captain-nimo]

Also, we'll add one document for the whole user flow.

[captain-nimo]

Accumulated @anirbank91's and my work on the ticket in one document (see my comment above). Will meet @anirbank91 again and create a flow chart for the workflow.

[anirbank91]

CTI_TagGenerator_workflow.pdf

Added the Tag generator flowchart.

[giosce]

Comments on pdf:
I think the second step should be "Select Organization" instead of "Add Organization".
If user clicks "Find Project" without typing in anything, error message
If user clicks "Find Project" after typing something there are 2 paths, project found and project not found.
If project not found, error message
If project found, retrieve it from Github and there are 2 paths. Project has tags or it doesn't.

There are also 2 paths if the user says that the project is affiliated to an Organization: Either select an existing Organization (from our DB) or if Organization is not listed, add it.

I think that whether there are existing tags or not, it can go to the same step "add tags".
But there is also the addition of the TagGenerator generating some tags automatically (that the user can accept or remove).

It doesn't seem clear what happens after the "Reset Tags" step.

[Olivia-Chiong]

@giosce to connect with Thad for Mural account to create team collaborated visual workflow.
Updates expected Thursday.

[giosce]

This is the Miro board https://miro.com/app/board/o9J_la6PMkY=/

I think we can use it for more than one feature if useful.

[giosce]

Draft of the flowchart is available at https://miro.com/app/board/o9J_la6PMkY=/

[giosce]

Reviewed and made adjustments with @captain-nimo.
CTI Tag GEnerator Workflow.pdf

[giosce]

From the flowchart we have a couple of questions:
Are some tags of a new project generated by the system (like food-insecurity and food-pantry in the wireframe)?
Can they be removed by the user?
How does the system generate them? Involving the back-end or is it a front-end functionality? By a (sophisticate) parsing of the name of the project or for example reading something out of github? Or reading from a taxonomy?

From 12/27 meeting: The system doesn't generate any tag, food-insecurity and food-pantry are generated by the user (and so they can also be removed).
Wireframes will be updated to convey the functionality.

[Olivia-Chiong]

Design

Please create mock ups for following pages

YES path

• step 3 on tag generator should have NO tags
• step 4 on tag generator should have "food-insecurity" and "food pantry" tags

NO path

• step 2 on tag generator should have "Please fill in the URL" in the URL box
• step 3 on tag generator should be the current Step 2 (Sample error message)
  Example error messages depending on conditions

[ExperimentsInHonesty]

@Gio @emecas - it looks like a ui decision was made that affects the technical working of the tag generator and the user experience to make it less flexible. Let's talk about the motivation for changing it and how we can adress your concerns without changing flexibility of the application.

[chalimar]

@meismith your assignment has been moved to #216

[giosce]

I think this is now complete, let's review it one last time on Sunday.

[chalimar]

Please add radio buttons to change organization affiliation status (Yes / No) in the wizard if the user needs to revise.

See screens that need to be edited below for reference:

[Olivia-Chiong]

Tag generator work flow has been completed. This issue is closed. We will open a new issue for the development part of this so as not to confuse the engineers.