package list can be sorted by ID, owners, downloads and version

[rocklan]

This adds support for ordering the "Published Packages" and "Unlisted Packages" tables on the "Manage my packages" screen, eg:

Clicking on any of the column headers sorts by that column. I am by no means a JS guru but hopefully this does what we want and works for most people.

Addresses #7806

[joelverhagen]

OMG this is amazing. /cc @jcjiang @skofman1

This may be a tall order, but would it be possible to have a gif recording of the behavior in action? Like initial state -> sort by downloads -> sort by downloads -> sort by package ID? If not I may be able to cook it up myself (i'm not a GIF recording pro)

One concern I have is the performance on owners with many package IDs. For example, the Microsoft org has nearly 5000 packages. Would it be possible to do some rough tests of how it "feels" as the number of package IDs goes up? If we run into trouble we can say "well, it's still okay for small pages" or we can disable the behavior for when there are too many rows (based on some hard coded safe threshold).

[joelverhagen]

Is there an associated issue for this PR? I see #123 in the description (perhaps from the template) but this doesn't seem right. If an issue does not exist, could you open one and start a discussion about the pain you have, your proposed solution, and other thoughts?

[rocklan]

Yes it's issue #7806. I've updated the description.

[rocklan]

OMG this is amazing. /cc @jcjiang @skofman1

This may be a tall order, but would it be possible to have a gif recording of the behavior in action? Like initial state -> sort by downloads -> sort by downloads -> sort by package ID? If not I may be able to cook it up myself (i'm not a GIF recording pro)

One concern I have is the performance on owners with many package IDs. For example, the Microsoft org has nearly 5000 packages. Would it be possible to do some rough tests of how it "feels" as the number of package IDs goes up? If we run into trouble we can say "well, it's still okay for small pages" or we can disable the behavior for when there are too many rows (based on some hard coded safe threshold).

ScreenToGif is your friend 👍

If you have a lot of packages, like 5000, on my machine it takes about 3-4 seconds to sort in chrome. (I don't have access to production data so I can't perf test it properly :) - The sorting is all done client side so it depends on the speed of the clients machine. For me, it seems ok, especially when downloading the page and expanding the list of packages takes 3-5 seconds anyway.

[joelverhagen]

Hey @jcjiang, could you take a look and provide some feedback from the PM perspective?

[joelverhagen]

Hey, it looks like this test is failing on your branch (per CI):

##[error]    NuGetGallery.ApiControllerFacts+TheGetStatsDownloadsAction.VerifyRecentPopularityStatsDownloads [FAIL]

      unexpected content result[3].Gallery
      Expected: True
      Actual:   False
      Stack Trace:
        tests\NuGetGallery.Facts\Controllers\ApiControllerFacts.cs(0,0): at NuGetGallery.ApiControllerFacts.TheGetStatsDownloadsAction.<VerifyRecentPopularityStatsDownloads>d__0.MoveNext()
        --- End of stack trace from previous location where exception was thrown ---
           at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
           at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
        --- End of stack trace from previous location where exception was thrown ---
           at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
           at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
        --- End of stack trace from previous location where exception was thrown ---
           at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
           at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
```

[rocklan]

like this test is failing on your branch (per CI): VerifyRecentPopularityStatsDownloads

This test and all other tests pass on my machine, not sure why this one failed. It doesn't seem related to the changes that I've made. Maybe the build can just be kicked off again?

[joelverhagen]

Already on the second build. Let me try locally and I'll get back to you. This line was suspicious to me because 1.1 is a non-normalized version:

NuGetGallery/tests/NuGetGallery.Facts/Controllers/ApiControllerFacts.cs

Line 2859 in b3c174e

Assert.True((string)result[3]["Gallery"] == "/packages/B/1.1", "unexpected content result[3].Gallery");

[joelverhagen]

Okay, I am crazy. I crossed my wires with your other PR #8157. Sorry about the confusion. I'll copy my comment over there for clarity.

[joelverhagen]

The test should be changed to be 1.1.0 but of course on the other PR (#8157).

[joelverhagen]

I am going to deploy this to our test environment and to give it another spin. After the UT and this smoke test, we should be good to go 😄

[joelverhagen]

I'm seeing some strange behavior with packages with some package versions being out of order. For example:

Could you take a look and see what's going on with this bug?
Packages

[rocklan]

I'm seeing some strange behavior with packages with some package versions being out of order

Ahha, found it. I was using the following javascript code to check if the "SortBy" attribute+value existed:

var sortby = td.data('sortby');

if (sortby) {
    return sortby;
}

so it turns out if the value of sortby is zero, it will return false, any other value it will return true :) as a result, the first item in the list will always appear last.

An easy fix:

if (typeof sortby !== 'undefined') {
    return sortby;
}

which is the correct way of checking if the attribute has a defined value or not.

[joelverhagen]

@rocklan, this should not be closed, right?

[joelverhagen]

Okay great! Once we get that UT mentioned in my comment #8158 (comment) above, we'll be good to go! We've got PM sign off and several devs have looked it over.

[joelverhagen]

This PR is ready to rock(lan) 😉!
Thanks!