Add group history page

app/Http/Controllers/GroupHistoryController.php

@@ -7,6 +7,7 @@
 
 namespace App\Http\Controllers;
 
+use App\Models\Group;
 use App\Models\User;
 use App\Models\UserGroupEvent;
 
@@ -16,11 +17,10 @@ public function index()
     {
         $rawParams = request()->all();
         $params = get_params($rawParams, null, [
-            'group:string',
+            'group',
             'max_date:time',
             'min_date:time',
-            'sort:string',
-            'user:string',
+            'user',
         ], ['null_missing' => true]);
         $query = UserGroupEvent::visibleForUser(auth()->user());
 
@@ -35,11 +35,19 @@ public function index()
         }
 
         if ($params['max_date'] !== null) {
+            $params['max_date']->endOfDay();
+
             $query->where('created_at', '<=', $params['max_date']);
+
+            $params['max_date'] = json_date($params['max_date']);
         }
 
         if ($params['min_date'] !== null) {
+            $params['min_date']->startOfDay();
+
             $query->where('created_at', '>=', $params['min_date']);
+
+            $params['min_date'] = json_date($params['min_date']);
         }
 
         if ($params['user'] !== null) {
@@ -52,16 +60,28 @@ public function index()
             }
         }
 
-        $cursorHelper = UserGroupEvent::makeDbCursorHelper($params['sort']);
+        $cursorHelper = UserGroupEvent::makeDbCursorHelper($rawParams['sort'] ?? null);
+        $params['sort'] = $cursorHelper->getSortName();
         [$events, $hasMore] = $query
             ->cursorSort($cursorHelper, cursor_from_params($rawParams))
             ->limit(50)
             ->getWithHasMore();
-        $cursor = $cursorHelper->next($events, $hasMore);
 
-        return [
+        $eventGroupIds = $events->pluck('group_id');
+        $groups = app('groups')->all()->filter(
+            fn (Group $group) =>
+                $eventGroupIds->contains($group->getKey()) ||
+                priv_check('GroupShow', $group)->can(),
+        );
+        $json = [
+            ...cursor_for_response($cursorHelper->next($events, $hasMore)),
             'events' => json_collection($events, 'UserGroupEvent'),
-            ...cursor_for_response($cursor),
+            'groups' => json_collection($groups, 'Group'),
+            'params' => $params,
         ];
+
+        return is_json_request()
+            ? $json
+            : ext_view('group_history.index', compact('json'));
     }
 }

app/Singletons/OsuAuthorize.php

@@ -23,6 +23,7 @@
 use App\Models\Forum\Topic;
 use App\Models\Forum\TopicCover;
 use App\Models\Genre;
+use App\Models\Group;
 use App\Models\Language;
 use App\Models\LegacyMatch\LegacyMatch;
 use App\Models\Multiplayer\Room;
@@ -1805,6 +1806,15 @@ public function checkForumTopicVote(?User $user, Topic $topic): string
         return 'ok';
     }
 
+    public function checkGroupShow(?User $user, Group $group): string
+    {
+        if ($group->hasListing() || $user?->isGroup($group)) {
+            return 'ok';
+        }
+
+        return 'unauthorized';
+    }
+
     public function checkIsOwnClient(?User $user, Client $client): string
     {
         if ($user === null || $user->getKey() !== $client->user_id) {
@@ -1954,6 +1964,10 @@ public function checkScorePin(?User $user, ScoreBest|Solo\Score $score): string
 
     public function checkUserGroupEventShowActor(?User $user, UserGroupEvent $event): string
     {
+        if ($event->group->identifier === 'default') {
+            return $user?->isPrivileged() ? 'ok' : 'unauthorized';
+        }
+
         if ($user?->isGroup($event->group)) {
             return 'ok';
         }

app/Singletons/RouteSection.php

@@ -70,6 +70,9 @@ class RouteSection
             'friends_controller' => [
                 '_' => 'home',
             ],
+            'group_history_controller' => [
+                '_' => 'home',
+            ],
             'groups_controller' => [
                 '_' => 'home',
             ],

app/Transformers/UserGroupEventTransformer.php

@@ -43,6 +43,10 @@ public function transform(UserGroupEvent $event): array
 
     public function includeActor(UserGroupEvent $event): ResourceInterface
     {
+        if ($event->actor_id === null) {
+            return $this->null();
+        }
+
         return $this->primitive([
             'id' => $event->actor_id,
             'username' => $event->details['actor_name'],

package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@discordapp/twemoji": "^14.0.2",
-    "@fortawesome/fontawesome-free": "^5.6.3",
+    "@fortawesome/fontawesome-free": "^5.15.4",
     "@types/autosize": "^4.0.1",
     "@types/bootstrap": "^3.3.0",
     "@types/cloudflare-turnstile": "^0.1.5",

resources/css/bem-index.less

@@ -188,6 +188,9 @@
 @import "bem/game-mode-link";
 @import "bem/github-user";
 @import "bem/grid-items";
+@import "bem/group-history";
+@import "bem/group-history-event";
+@import "bem/group-history-search-form";
 @import "bem/header-buttons";
 @import "bem/header-nav-mobile";
 @import "bem/header-nav-v4";

resources/css/bem/form-select.less

@@ -2,6 +2,8 @@
 // See the LICENCE file in the repository root for full licence text.
 
 .form-select {
+  @_top: form-select;
+
   .default-border-radius();
   background-color: @osu-colour-b6;
   color: @osu-colour-c1;
@@ -40,6 +42,12 @@
     flex: 1;
   }
 
+  &--group-history {
+    background-color: inherit;
+    font-size: @font-size--title-small-3;
+    margin: -5px -10px -5px -5px;
+  }
+
   &--simple-form {
     background-color: @osu-colour-b4;
     color: @osu-colour-c1;
@@ -52,5 +60,10 @@
     background-color: inherit;
     border-radius: inherit;
     max-width: 100%;
+
+    .@{_top}--group-history & {
+      text-overflow: ellipsis;
+      width: 100%;
+    }
   }
 }

resources/css/bem/group-history-event.less

@@ -0,0 +1,65 @@
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+.group-history-event {
+  --message-weight: normal;
+  align-items: center;
+  display: flex;
+  font-size: @font-size--title-small;
+  gap: 15px;
+
+  @bold-events: group-add, group-remove, group-rename;
+  each(@bold-events, {
+    &--@{value} {
+      --message-weight: bold;
+    }
+  });
+
+  @icons: {
+    group-add: users;
+    group-remove: users-slash;
+    group-rename: users-cog;
+    user-add: user-plus;
+    user-add-playmodes: user-tag;
+    user-remove: user-minus;
+    user-remove-playmodes: user-tag;
+    user-set-default: user-cog;
+  };
+  each(@icons, {
+    &--@{key} {
+      @icon-var: 'fa-var-@{value}';
+      --icon: @@icon-var;
+    }
+  });
+
+  &__icon {
+    .fas();
+    background-color: var(--group-colour, hsl(var(--hsl-b1)));
+    border-radius: 10000px;
+    color: hsl(var(--hsl-b6));
+    padding: 3px 6px;
+
+    &::before {
+      content: var(--icon);
+    }
+  }
+
+  &__info {
+    align-items: end;
+    color: hsl(var(--hsl-f1));
+    column-gap: 15px;
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    font-size: @font-size--normal;
+
+    @media @desktop {
+      flex-direction: row-reverse;
+    }
+  }
+
+  &__message {
+    flex-grow: 1;
+    font-weight: var(--message-weight);
+  }
+}

resources/css/bem/group-history-search-form.less

@@ -0,0 +1,49 @@
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+.group-history-search-form {
+  --input-bg: hsl(var(--hsl-b5));
+  --input-border-radius: @border-radius--large;
+  background: hsl(var(--hsl-b4));
+
+  &__content {
+    .default-gutter-v2();
+    padding-bottom: 20px;
+    padding-top: 20px;
+
+    &--buttons {
+      background-color: hsl(var(--hsl-b3));
+      display: flex;
+      gap: 10px;
+      justify-content: center;
+      padding-bottom: 10px;
+      padding-top: 10px;
+    }
+
+    &--inputs {
+      color-scheme: dark;
+      display: grid;
+      gap: 10px;
+      grid-template-columns: repeat(2, 1fr) repeat(2, 180px);
+
+      @media @mobile {
+        grid-template-columns: repeat(2, 1fr);
+
+        > :nth-child(-n + 2) {
+          grid-column: span 2;
+        }
+      }
+    }
+  }
+
+  &__input {
+    .reset-input();
+    font-size: @font-size--title-small-3;
+    width: 100%;
+  }
+
+  &__label {
+    color: var(--label-colour);
+    padding-bottom: 5px;
+  }
+}

resources/css/bem/group-history.less

@@ -0,0 +1,16 @@
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+.group-history {
+  &--events {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  &--none {
+    font-size: @font-size--title-small-3;
+    margin: 0;
+    text-align: center;
+  }
+}

resources/css/bem/osu-page.less

@@ -188,6 +188,16 @@
     .default();
   }
 
+  &--group-history-footer {
+    .default();
+    .default-gutter-v2();
+    background-color: hsl(var(--hsl-b4));
+    font-size: @font-size--normal;
+    padding-bottom: 10px;
+    padding-top: 10px;
+    text-align: center;
+  }
+
   &--info-bar {
     .default-gutter-v2();
     padding-top: 5px;

resources/css/bem/show-more-link.less

@@ -38,7 +38,8 @@
     margin: 40px 0;
   }
 
-  &--chat-conversation-earlier-messages {
+  &--chat-conversation-earlier-messages,
+  &--group-history {
     margin: 20px auto 0;
   }
 

resources/js/entrypoints/group-history.tsx

@@ -0,0 +1,11 @@
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+import Main from 'group-history/main';
+import core from 'osu-core-singleton';
+import * as React from 'react';
+import { parseJson } from 'utils/json';
+
+core.reactTurbolinks.register('group-history', () => (
+  <Main {...parseJson('json-group-history')} />
+));