jobn / braid Goto Github PK

• setup eslint config
• have eslint play nice with prettier
• enforce linting with travis script

Got 2 failed snapshot tests when running npm run tests and selecting "run all tests"

• ProjectList, Snapshot name: ProjectList renders single project according to snapshot 1
• ProjectContainer, Snapshot name: ProjectContainer renders fetched and normalized data 1

Looks like it's just updated styling but snapshot wasn't updated to reflect it?

With no dev guide there's no guarantee I've done all required steps. I just did:

npm install
npm run lint #ok
npm run build #ok
npm run test #2 failed tests

Full test results:

 FAIL  src/ProjectList.test.js
  ● ProjectList › renders single project according to snapshot

    expect(received).toMatchSnapshot()

    Snapshot name: `ProjectList renders single project according to snapshot 1`

    - Snapshot
    + Received

    @@ -5,11 +5,11 @@
          class="title is-3"
        >
          Select project
        </h1>
        <div
    -     style="display: grid;"
    +     style="display: grid; grid-template-columns: 1fr 1fr 1fr;"
        >
          <a
            class="notification is-primary is-marginless"
            href="/projects/1"
          >

      40 |     );
      41 |
    > 42 |     expect(container.firstChild).toMatchSnapshot();
         |                                  ^
      43 |   });
      44 |
      45 |   it('renders alternating colors', () => {

      at Object.toMatchSnapshot (src/ProjectList.test.js:42:34)

 › 1 snapshot failed.
 PASS  src/Story.test.js
 PASS  src/Filters.test.js
 FAIL  src/ProjectContainer.test.js
  ● ProjectContainer › renders fetched and normalized data

    expect(received).toMatchSnapshot()

    Snapshot name: `ProjectContainer renders fetched and normalized data 1`

    - Snapshot
    + Received

    @@ -146,11 +146,11 @@
                </div>
              </div>
              <span
                class="tag is-warning"
                data-testid="blocked-tag"
    -           style="position: absolute; top: 10px; right: 0px; height: 1.75em; font-size: .65rem; opacity: 1; border-top-right-radius: 0; border-bottom-right-radius: 0;"
    +           style="position: absolute; top: 10px; right: 0px; height: 1.75em; font-size: .65rem; opacity: 1; transition: opacity 1s; border-top-right-radius: 0; border-bottom-right-radius: 0;"
              >
                Blocked
              </span>
            </div>
            <div
    @@ -245,11 +245,11 @@
                </div>
              </div>
              <span
                class="tag is-warning"
                data-testid="blocked-tag"
    -           style="position: absolute; top: 10px; right: 0px; height: 1.75em; font-size: .65rem; opacity: 0; border-top-right-radius: 0; border-bottom-right-radius: 0;"
    +           style="position: absolute; top: 10px; right: 0px; height: 1.75em; font-size: .65rem; opacity: 0; transition: opacity 1s; border-top-right-radius: 0; border-bottom-right-radius: 0;"
              >
                Blocked
              </span>
            </div>
          </div>

      49 |     await wait();
      50 |
    > 51 |     expect(container.firstChild).toMatchSnapshot();
         |                                  ^
      52 |   });
      53 |
      54 |   it('renders error on request error', async () => {

      at Object.toMatchSnapshot (src/ProjectContainer.test.js:51:34)

 › 1 snapshot failed.
 PASS  src/normalize.test.js
 PASS  src/FilterSummary.test.js
 PASS  src/Tray.test.js
 PASS  src/FilterContainer/filters.test.js
 PASS  src/utils/arrayShuffle.test.js
 PASS  src/utils/arrayToggle.test.js
 PASS  src/utils/arrayRotate.test.js

Snapshot Summary
 › 2 snapshots failed from 2 test suites. Inspect your code changes or press `u` to update them.

Test Suites: 2 failed, 9 passed, 11 total
Tests:       2 failed, 61 passed, 63 total
Snapshots:   2 failed, 2 passed, 4 total
Time:        6.546s
Ran all test suites.

When any request while fetching project data fails, we curretly render a div with the text error.
This should be replaced with a better message about what went wrong.

Some story types do not have all states enabled. This should be visible in the view. So when dragging a card that does not have a valid "review" state, it should not be possible to drop it in the "review" column

a story can have en owner that is inactive. The id is attached to the story, byt the person is not in the membership data from the api

the design of the filters should somewhat resemble the pill-buttons in the filter tray. Although they should not be clickable

The current column labels in Braid reflect how we interpret the storyState in the project that I work on, but that might not be the same for everybody.

Should we rename the columns to better reflect the pivotal story states?

The argument for changing is to remove the need for mentally mapping the states and make it easier for newcomers to Braid.

Please advise :)

so filters will be persisted across page reloads.

we need to handle the situation that a initialized/hydrated filter may not be valid. A member may not have any stories in the current sprint. This would lead to a situation where the user cannot remove the filter because the button with the member filer is not rendered.

Odd issue...out of 10 Pivotal Tracker projects, one does not work. I can navigate through all projects fine, but as soon as I select my Product Development project from either the main menu or the drop down menu, it displays for a brief second and then does not.
Verified in PT that "Allow the Tracker iOS and Android app and other third-party clients to access your project data." is checked.
I am an owner of all projects, using my API token.
The current iteration of the project that does not render using Braid does contain ~77 stories

Include

• actual description of what Braid does
• its purpose and development direction
• logo
• COC
• development and contribution guidelines

to enable keyboard accessibility.

also remove "feature" where Navbar menu collapses to burger menu

should be set in the settings tray, and persisted in localstorage

even if route is valid /projects/id in the eyes of braid, there still might not be a project with the given id. We should handle that gracefully

• Add a "blocked" button to the list of story-type filters
• when filtering stories, treat blocked as a type

when the slim theme is enabled the story cards show only the title

enabling the slim theme should be done using a "settings" tray to the right of the current filter tray.
the setting is persisted in the localstorage

rough outline of feature:

• user clicks and holds an anchor (icon) on a story.
• the other columns is rerendered as drop targets
• if the user drops the story on another column the update api request is fired
• state is set optimistically and colums + stories are rerendered
• handle succes/error response

the navbar menu should be accessible via keyboard and reabable by screen-readers

maybe entirely replacing the current dropdown with https://github.com/davidtheclark/react-aria-menubutton

• display a list of owners on the project page
• selecting a owner should only display stories owner by the selected person
• multiple owners can be selected at a time
• if no owners are selected all stories are displayed

so user dont have to guess that she should look in the navbar menu

• render list of projects with links in a nice looking container
• redirect user from / to /projects if authenticated

currently applying a filter will reveal the stories that "has" the filter.
with this change a filter can be either inclusive, exclusive or not applied.
when an exclusive filter is applied the stories that does not have the given attribute is revealed.

• come up with design that depicts the three states
• implement exclusive filtering

needs spec

The current fontawesome implementation that comes bundled with Bulma does not work well in a React setting.
Replace it with the @fortawesome/react-fontawesome package

navigating the browser history is hard because all Braid entries has the same title.
when a new history entry is pushed we should set the title to something like: Braid - TMI BE CHORE

ideas:
[n] => select next owner in filters, same is clicking the Next button
[p] => select previous owner in filters
[c] => clear owner filter
[f] => toggle filter tray

Currently you need to select the project everytime you login. This can be quite annoying if you are mostly just going to one project. It would be great if it would autoselect the last project.