client: Add link from source entries to settings

NEWS.md

@@ -19,7 +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))
+- Add link from settings page to individual sources and vice versa. ([#1329](https://github.com/fossar/selfoss/pull/1329), [#1340](https://github.com/fossar/selfoss/pull/1340))
 - Tag colour can be now changed using keyboard. ([#1335](https://github.com/fossar/selfoss/pull/1335))
 - YouTube spout now supports all YouTube URLs that provide feeds. ([#1273](https://github.com/fossar/selfoss/issues/1273))
 - Translations into several new languages were added:

assets/js/templates/EntriesPage.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useLocation, useParams } from 'react-router-dom';
+import { Link, useLocation, useParams } from 'react-router-dom';
 import { useOnline } from 'rooks';
 import { useStateWithDeps } from 'use-state-with-deps';
 import nullable from 'prop-types-nullable';
@@ -11,7 +11,7 @@ import * as sourceRequests from '../requests/sources';
 import { LoadingState } from '../requests/LoadingState';
 import { Spinner, SpinnerBig } from './Spinner';
 import classNames from 'classnames';
-import { useAllowedToUpdate } from '../helpers/authorizations';
+import { useAllowedToUpdate, useAllowedToWrite } from '../helpers/authorizations';
 import { LocalizationContext } from '../helpers/i18n';
 import { useShouldReload } from '../helpers/hooks';
 import { forceReload } from '../helpers/uri';
@@ -144,6 +144,7 @@ function handleRefreshSource({ event, source, setLoadingState, setNavExpanded, r
 
 export function EntriesPage({ entries, hasMore, loadingState, setLoadingState, selectedEntry, expandedEntries, setNavExpanded, navSourcesExpanded, reload }) {
     const allowedToUpdate = useAllowedToUpdate();
+    const allowedToWrite = useAllowedToWrite();
 
     const location = useLocation();
     const forceReload = useShouldReload();
@@ -308,6 +309,18 @@ export function EntriesPage({ entries, hasMore, loadingState, setLoadingState, s
                 </button>
                 : null
             }
+            {currentSource !== null && allowedToWrite && isOnline ?
+                <Link
+                    to={{
+                        pathname: '/manage/sources',
+                        hash: `#source-${currentSource}`
+                    }}
+                    className="entries-go-to-settings"
+                >
+                    {_('source_go_to_settings')}
+                </Link>
+                : null
+            }
             {entries.map((entry) => (
                 <Item
                     key={entry.id}

assets/js/templates/Source.jsx

@@ -588,7 +588,7 @@ export default function Source({ source, setSources, spouts, setSpouts, dirty, s
     const _ = React.useContext(LocalizationContext);
 
     return (
-        <form className={classNames(classes)} data-id={source.id}>
+        <form className={classNames(classes)} data-id={source.id} id={`source-${source.id}`}>
             <div className="source-icon">
                 {source.icon && source.icon != '0' ? (
                     <img

assets/js/templates/SourcesPage.jsx

@@ -42,7 +42,7 @@ function handleAddSource({
 }
 
 // load sources
-function loadSources({ abortController, setSpouts, setSources, setLoadingState }) {
+function loadSources({ abortController, location, setSpouts, setSources, setLoadingState }) {
     if (abortController.signal.aborted) {
         return Promise.resolve();
     }
@@ -57,6 +57,19 @@ function loadSources({ abortController, setSpouts, setSources, setLoadingState }
         setSpouts(spouts);
         setSources(sources);
         setLoadingState(LoadingState.SUCCESS);
+
+        if (location.hash.startsWith('#source-')) {
+            const source = document.querySelector(`.source[data-id="${location.hash.replace(/^#source-/, '')}"]`);
+
+            if (!source) {
+                return;
+            }
+
+            // needs to be delayed for some reason
+            requestAnimationFrame(() => {
+                source.scrollIntoView();
+            });
+        }
     }).catch((error) => {
         if (error.name === 'AbortError' || abortController.signal.aborted) {
             return;
@@ -92,7 +105,7 @@ export default function SourcesPage() {
     React.useEffect(() => {
         const abortController = new AbortController();
 
-        loadSources({ abortController, setSpouts, setSources, setLoadingState })
+        loadSources({ abortController, location, setSpouts, setSources, setLoadingState })
             .then(() => {
                 if (isAdding) {
                     const params = new URLSearchParams(location.search);

assets/locale/cs.json

@@ -49,6 +49,7 @@
   "lang_source_saved": "Uloženo",
   "lang_source_last_post": "Poslední příspěvek spatřen",
   "lang_source_refresh": "Obnovit tento zdroj",
+  "lang_source_go_to_settings": "Otevřít v nastavení",
   "lang_sources_leaving_unsaved_prompt": "Na stránce jsou neuložené změny. Opravdu chcete opustit nastavení?",
   "lang_tag_change_color_button_title": "Změnit barvu",
   "lang_no_entries": "Žádný záznam",

assets/locale/en.json

@@ -61,6 +61,7 @@
   "lang_source_saved": "Saved",
   "lang_source_last_post": "Last post seen",
   "lang_source_refresh": "Refresh this source",
+  "lang_source_go_to_settings": "Open in settings",
   "lang_sources_leaving_unsaved_prompt": "Leave settings with unsaved source changes?",
   "lang_tag_change_color_button_title": "Change color",
   "lang_no_entries": "No entries found",

assets/styles/main.scss

@@ -35,6 +35,10 @@ body {
     background: url('../images/bg.gif') repeat;
 }
 
+button {
+    font-family: 'Open Sans', Arial, sans-serif;
+}
+
 select,
 input {
     border: solid 1px #cccccc;
@@ -779,9 +783,11 @@ span.offline-count.diff {
 
 .source-add,
 .source-export,
-.refresh-source {
+.refresh-source,
+.entries-go-to-settings {
     font-size: 0.85em;
     line-height: 2;
+    text-decoration: none;
 }
 
 .source-add {
@@ -794,13 +800,15 @@ span.offline-count.diff {
     float: left;
 }
 
-.refresh-source {
+.refresh-source,
+.entries-go-to-settings {
     background: transparent;
     border: none;
     color: var(--text-color);
     padding: 0;
     cursor: pointer;
     margin-left: 20px;
+    font-weight: normal;
 }
 
 .source-export {