Create Tag generator page

[nrrao]

Overview

The Beta version of the tag generator provides a tutorial on how to manually add Topic Tags to your repo that is customized to the repo the person is trying to tag. This allows us to suggest tags based on affiliation and allow the user to define tags based on the topics of their repo.

Action Items to launch

• Product and Design
  • Define requirements
• Design
  • Design wireframes layouts for pages that match the requirements
• Development
  • design display states
  • build logic to determine and produce the right display state
  • integrate github api to pull tag data and drive error states

Requirements

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

Resources

• The design

[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.

[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?

[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.