client: Add a link from settings page to individual sources

NEWS.md

@@ -19,6 +19,7 @@
 - Search will be carried out using regular expressions when the search query is wrapped in forward slashes, e.g. `/regex/`. The expression syntax is database specific. ([#1205](https://github.com/fossar/selfoss/pull/1205))
 - YouTube spout now supports following playlists. ([#1260](https://github.com/fossar/selfoss/pull/1260))
 - Confirmation is now required when leaving the setting page with unsaved source changes. ([#1300](https://github.com/fossar/selfoss/pull/1300))
+- Add link from settings page to individual sources. ([#1329](https://github.com/fossar/selfoss/pull/1329))
 - Translations into several new languages were added:
   - English (United Kingdom): `en-GB`
   - French (Canada): `fr-CA`

assets/js/templates/Source.jsx

@@ -1,4 +1,7 @@
 import React from 'react';
+import { Button as MenuButton, Wrapper as MenuWrapper, Menu, MenuItem } from 'react-aria-menubutton';
+import { useHistory, useLocation } from 'react-router-dom';
+import { makeEntriesLinkLocation } from '../helpers/uri';
 import PropTypes from 'prop-types';
 import nullable from 'prop-types-nullable';
 import { unescape } from 'html-escaper';
@@ -562,16 +565,24 @@ export default function Source({ source, setSources, spouts, setSpouts, dirty, s
         [source.id, setDirtySources]
     );
 
-    const deleteOnClick = React.useCallback(
-        (event) =>
-            handleDelete({
-                event,
-                source,
-                setSources,
-                setSourceBeingDeleted,
-                setDirty,
-            }),
-        [source, setSources, setDirty]
+    const history  = useHistory();
+    const location  = useLocation();
+
+    const extraMenuOnSelection = React.useCallback(
+        (value, event) => {
+            if (value === 'delete') {
+                handleDelete({
+                    event,
+                    source,
+                    setSources,
+                    setSourceBeingDeleted,
+                    setDirty,
+                });
+            } else if (value === 'browse') {
+                history.push(makeEntriesLinkLocation(location, { category: `source-${source.id}` }));
+            }
+        },
+        [source, setSources, setDirty, location, history]
     );
 
     const _ = React.useContext(LocalizationContext);
@@ -612,21 +623,41 @@ export default function Source({ source, setSources, spouts, setSpouts, dirty, s
                         {' • '}
                     </React.Fragment>
                 }
-                <button
-                    type="button"
-                    accessKey="d"
-                    className="source-delete"
-                    onClick={deleteOnClick}
+                <MenuWrapper
+                    className="popup-menu-wrapper"
+                    onSelection={extraMenuOnSelection}
                 >
-                    {_('source_delete')}
-
-                    {sourceBeingDeleted &&
-                        <React.Fragment>
-                            {' '}
-                            <Spinner />
-                        </React.Fragment>
-                    }
-                </button>
+                    <MenuButton
+                        className="source-menu-button"
+                    >
+                        {_('source_menu')}
+                    </MenuButton>
+                    <Menu
+                        className="popup-menu"
+                    >
+                        <MenuItem
+                            accessKey="d"
+                            className="popup-menu-item source-browse"
+                            value="browse"
+                        >
+                            {_('source_browse')}
+                        </MenuItem>
+                        <MenuItem
+                            accessKey="d"
+                            className="popup-menu-item source-delete"
+                            value="delete"
+                        >
+                            {_('source_delete')}
+
+                            {sourceBeingDeleted &&
+                                <React.Fragment>
+                                    {' '}
+                                    <Spinner />
+                                </React.Fragment>
+                            }
+                        </MenuItem>
+                    </Menu>
+                </MenuWrapper>
             </div>
             <div className="source-days">
                 {source.lastentry

assets/locale/cs.json

@@ -31,6 +31,8 @@
   "lang_source_export": "Export zdrojů",
   "lang_source_edit": "Upravit",
   "lang_source_filter": "Filtr",
+  "lang_source_menu": "Více akcí",
+  "lang_source_browse": "Prohlížet",
   "lang_source_delete": "Smazat",
   "lang_source_warn": "Opravdu chcete tento zdroj smazat?",
   "lang_source_warn_cancel_dirty": "Opravdu chcete zahodit neuložené změny?",

assets/locale/en.json

@@ -43,6 +43,8 @@
   "lang_source_export": "Export sources",
   "lang_source_edit": "Edit",
   "lang_source_filter": "Filter",
+  "lang_source_menu": "More actions",
+  "lang_source_browse": "Browse",
   "lang_source_delete": "Delete",
   "lang_source_warn": "Really delete this source?",
   "lang_source_warn_cancel_dirty": "Discard unsaved changes?",

assets/package.json

@@ -20,6 +20,7 @@
     "prop-types-nullable": "^1.0.1",
     "ramda": "^0.28.0",
     "react": "^17.0.1",
+    "react-aria-menubutton": "^7.0.3",
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
     "reset-css": "^5.0.1",

assets/styles/main.scss

@@ -15,6 +15,7 @@ $text-color: black;
     // Sass does not interportate code in CSS variable definitions unless explicitly unescaped.
     // https://github.com/sass/libsass/issues/2621
     --primary: #{$primary};
+    --primary-contrast: #ffffff;
     --primary-highlight: #{$primary-highlight};
     --primary-highlight-shadow: #{$primary-highlight-shadow};
     --text-color: #{$text-color};
@@ -58,6 +59,8 @@ button::-moz-focus-inner {
     border: 0;
 }
 
+@import 'popup-menu';
+
 #js-loading-message {
     margin: 1em;
     text-align: center;
@@ -715,7 +718,7 @@ span.offline-count.diff {
 }
 
 .source-showparams,
-.source-delete,
+.source-menu-button,
 .source-save,
 .source-cancel {
     padding: 0;

assets/styles/popup-menu.scss

@@ -0,0 +1,27 @@
+.popup-menu-wrapper {
+    display: inline-block;
+    position: relative;
+}
+
+.popup-menu {
+    background: var(--background-color);
+    color: var(--text-color);
+    border: 1px solid rgb(200 200 200 / 40%);
+    position: absolute;
+    top: 100%;
+    left: -1em;
+    z-index: 100;
+    margin: 0.25em 0 0;
+    box-shadow: 0 0.2em 1em rgb(0 0 0 / 15%);
+}
+
+.popup-menu-item {
+    cursor: pointer;
+    padding: 0.3em 1em;
+}
+
+.popup-menu-item:hover,
+.popup-menu-item:focus {
+    background-color: var(--primary);
+    color: var(--primary-contrast);
+}