Created new settings card for tags-related options

src/container/index.ts

@@ -18,7 +18,8 @@ import { ConnectDecorator } from './types';
 type LazyActionMap = Record<string, Function>;
 
 const bottle = new Bottle();
-const { container } = bottle;
+
+export const { container } = bottle;
 
 const lazyService = <T extends Function, K>(container: IContainer, serviceName: string) =>
   (...args: any[]) => (container[serviceName] as T)(...args) as K;
@@ -44,5 +45,3 @@ provideUtilsServices(bottle);
 provideMercureServices(bottle);
 provideSettingsServices(bottle, connect);
 provideDomainsServices(bottle, connect);
-
-export default container;

src/container/store.ts

@@ -2,6 +2,8 @@ import ReduxThunk from 'redux-thunk';
 import { applyMiddleware, compose, createStore } from 'redux';
 import { save, load, RLSOptions } from 'redux-localstorage-simple';
 import reducers from '../reducers';
+import { migrateDeprecatedSettings } from '../settings/helpers';
+import { ShlinkState } from './types';
 
 const isProduction = process.env.NODE_ENV !== 'production';
 const composeEnhancers: Function = !isProduction && (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
@@ -12,9 +14,8 @@ const localStorageConfig: RLSOptions = {
   namespaceSeparator: '.',
   debounce: 300,
 };
+const preloadedState = migrateDeprecatedSettings(load(localStorageConfig) as ShlinkState);
 
-const store = createStore(reducers, load(localStorageConfig), composeEnhancers(
+export const store = createStore(reducers, preloadedState, composeEnhancers(
   applyMiddleware(save(localStorageConfig), ReduxThunk),
 ));
-
-export default store;

src/index.tsx

@@ -2,8 +2,8 @@ import { render } from 'react-dom';
 import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom';
 import { homepage } from '../package.json';
-import container from './container';
-import store from './container/store';
+import { container } from './container';
+import { store } from './container/store';
 import { fixLeafletIcons } from './utils/helpers/leaflet';
 import { register as registerServiceWorker } from './serviceWorkerRegistration';
 import 'react-datepicker/dist/react-datepicker.css';

src/settings/Settings.tsx

@@ -7,7 +7,7 @@ const SettingsSections: FC<{ items: ReactNode[][] }> = ({ items }) => (
     {items.map((child, index) => (
       <Row key={index}>
         {child.map((subChild, subIndex) => (
-          <div key={subIndex} className="col-lg-6 mb-3">
+          <div key={subIndex} className={`col-lg-${12 / child.length} mb-3`}>
             {subChild}
           </div>
         ))}
@@ -16,12 +16,13 @@ const SettingsSections: FC<{ items: ReactNode[][] }> = ({ items }) => (
   </>
 );
 
-const Settings = (RealTimeUpdates: FC, ShortUrlCreation: FC, UserInterface: FC, Visits: FC) => () => (
+const Settings = (RealTimeUpdates: FC, ShortUrlCreation: FC, UserInterface: FC, Visits: FC, Tags: FC) => () => (
   <NoMenuLayout>
     <SettingsSections
       items={[
-        [ <UserInterface />, <Visits /> ], // eslint-disable-line react/jsx-key
+        [ <UserInterface /> ], // eslint-disable-line react/jsx-key
         [ <ShortUrlCreation />, <RealTimeUpdates /> ], // eslint-disable-line react/jsx-key
+        [ <Tags />, <Visits /> ], // eslint-disable-line react/jsx-key
       ]}
     />
   </NoMenuLayout>

src/settings/Tags.tsx

@@ -0,0 +1,25 @@
+import { FC } from 'react';
+import { FormGroup } from 'reactstrap';
+import { SimpleCard } from '../utils/SimpleCard';
+import { TagsModeDropdown } from '../tags/TagsModeDropdown';
+import { capitalize } from '../utils/utils';
+import { Settings, TagsSettings } from './reducers/settings';
+
+interface TagsProps {
+  settings: Settings;
+  setTagsSettings: (settings: TagsSettings) => void;
+}
+
+export const Tags: FC<TagsProps> = ({ settings: { tags }, setTagsSettings }) => (
+  <SimpleCard title="Tags">
+    <FormGroup className="mb-0">
+      <label>Default display mode when managing tags:</label>
+      <TagsModeDropdown
+        mode={tags?.defaultMode ?? 'cards'}
+        renderTitle={(tagsMode) => capitalize(tagsMode)}
+        onChange={(defaultMode) => setTagsSettings({ ...tags, defaultMode })}
+      />
+      <small className="form-text text-muted">Tags will be displayed as <b>{tags?.defaultMode ?? 'cards'}</b>.</small>
+    </FormGroup>
+  </SimpleCard>
+);

src/settings/UserInterface.tsx

@@ -5,8 +5,6 @@ import { FormGroup } from 'reactstrap';
 import { SimpleCard } from '../utils/SimpleCard';
 import ToggleSwitch from '../utils/ToggleSwitch';
 import { changeThemeInMarkup, Theme } from '../utils/theme';
-import { TagsModeDropdown } from '../tags/TagsModeDropdown';
-import { capitalize } from '../utils/utils';
 import { Settings, UiSettings } from './reducers/settings';
 import './UserInterface.scss';
 
@@ -31,14 +29,5 @@ export const UserInterface: FC<UserInterfaceProps> = ({ settings: { ui }, setUiS
         Use dark theme.
       </ToggleSwitch>
     </FormGroup>
-    <FormGroup className="mb-0">
-      <label>Default display mode when managing tags:</label>
-      <TagsModeDropdown
-        mode={ui?.tagsMode ?? 'cards'}
-        renderTitle={(tagsMode) => capitalize(tagsMode)}
-        onChange={(tagsMode) => setUiSettings({ ...ui ?? { theme: 'light' }, tagsMode })}
-      />
-      <small className="form-text text-muted">Tags will be displayed as <b>{ui?.tagsMode ?? 'cards'}</b>.</small>
-    </FormGroup>
   </SimpleCard>
 );

src/settings/helpers/index.ts

@@ -0,0 +1,17 @@
+import { ShlinkState } from '../../container/types';
+
+export const migrateDeprecatedSettings = (state: ShlinkState): ShlinkState => {
+  // The "last180Days" interval had a typo, with a lowercase d
+  if ((state.settings.visits?.defaultInterval as any) === 'last180days') {
+    state.settings.visits && (state.settings.visits.defaultInterval = 'last180Days');
+  }
+
+  // The "tags display mode" option has been moved from "ui" to "tags"
+  state.settings.tags = {
+    ...state.settings.tags,
+    defaultMode: state.settings.tags?.defaultMode ?? (state.settings.ui as any)?.tagsMode,
+  };
+  state.settings.ui && delete (state.settings.ui as any).tagsMode;
+
+  return state;
+};

src/settings/reducers/settings.ts

@@ -4,6 +4,7 @@ import { buildReducer } from '../../utils/helpers/redux';
 import { RecursivePartial } from '../../utils/utils';
 import { Theme } from '../../utils/theme';
 import { DateInterval } from '../../utils/dates/types';
+import { TagsOrder } from '../../tags/data/TagsListChildrenProps';
 
 export const SET_SETTINGS = 'shlink/realTimeUpdates/SET_SETTINGS';
 
@@ -29,18 +30,23 @@ export type TagsMode = 'cards' | 'list';
 
 export interface UiSettings {
   theme: Theme;
-  tagsMode?: TagsMode;
 }
 
 export interface VisitsSettings {
   defaultInterval: DateInterval;
 }
 
+export interface TagsSettings {
+  defaultOrdering?: TagsOrder;
+  defaultMode?: TagsMode;
+}
+
 export interface Settings {
   realTimeUpdates: RealTimeUpdatesSettings;
   shortUrlCreation?: ShortUrlCreationSettings;
   ui?: UiSettings;
   visits?: VisitsSettings;
+  tags?: TagsSettings;
 }
 
 const initialState: Settings = {
@@ -90,3 +96,8 @@ export const setVisitsSettings = (settings: VisitsSettings): PartialSettingsActi
   type: SET_SETTINGS,
   visits: settings,
 });
+
+export const setTagsSettings = (settings: TagsSettings): PartialSettingsAction => ({
+  type: SET_SETTINGS,
+  tags: settings,
+});

src/settings/services/provideServices.ts

@@ -4,6 +4,7 @@ import Settings from '../Settings';
 import {
   setRealTimeUpdatesInterval,
   setShortUrlCreationSettings,
+  setTagsSettings,
   setUiSettings,
   setVisitsSettings,
   toggleRealTimeUpdates,
@@ -13,10 +14,11 @@ import { withoutSelectedServer } from '../../servers/helpers/withoutSelectedServ
 import { ShortUrlCreation } from '../ShortUrlCreation';
 import { UserInterface } from '../UserInterface';
 import { Visits } from '../Visits';
+import { Tags } from '../Tags';
 
 const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   // Components
-  bottle.serviceFactory('Settings', Settings, 'RealTimeUpdates', 'ShortUrlCreation', 'UserInterface', 'Visits');
+  bottle.serviceFactory('Settings', Settings, 'RealTimeUpdates', 'ShortUrlCreation', 'UserInterface', 'Visits', 'Tags');
   bottle.decorator('Settings', withoutSelectedServer);
   bottle.decorator('Settings', connect(null, [ 'resetSelectedServer' ]));
 
@@ -35,12 +37,16 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   bottle.serviceFactory('Visits', () => Visits);
   bottle.decorator('Visits', connect([ 'settings' ], [ 'setVisitsSettings' ]));
 
+  bottle.serviceFactory('Tags', () => Tags);
+  bottle.decorator('Tags', connect([ 'settings' ], [ 'setTagsSettings' ]));
+
   // Actions
   bottle.serviceFactory('toggleRealTimeUpdates', () => toggleRealTimeUpdates);
   bottle.serviceFactory('setRealTimeUpdatesInterval', () => setRealTimeUpdatesInterval);
   bottle.serviceFactory('setShortUrlCreationSettings', () => setShortUrlCreationSettings);
   bottle.serviceFactory('setUiSettings', () => setUiSettings);
   bottle.serviceFactory('setVisitsSettings', () => setVisitsSettings);
+  bottle.serviceFactory('setTagsSettings', () => setTagsSettings);
 };
 
 export default provideServices;

src/tags/TagsList.tsx

@@ -28,7 +28,7 @@ export interface TagsListProps {
 const TagsList = (TagsCards: FC<TagsListChildrenProps>, TagsTable: FC<TagsTableProps>) => boundToMercureHub((
   { filterTags, forceListTags, tagsList, selectedServer, settings }: TagsListProps,
 ) => {
-  const [ mode, setMode ] = useState<TagsMode>(settings.ui?.tagsMode ?? 'cards');
+  const [ mode, setMode ] = useState<TagsMode>(settings.tags?.defaultMode ?? 'cards');
   const [ order, setOrder ] = useState<TagsOrder>({});
   const resolveSortedTags = pipe(
     () => tagsList.filteredTags.map((tag): NormalizedTag => ({