Move Fix Splits to Settings → Advanced (#456)

packages/desktop-client/src/components/FinancesApp.js

@@ -52,8 +52,6 @@ import LinkSchedule from './schedules/LinkSchedule';
 import PostsOfflineNotification from './schedules/PostsOfflineNotification';
 import Settings from './settings';
 import Titlebar, { TitlebarProvider } from './Titlebar';
-import FixSplitsTool from './tools/FixSplitsTool';
-
 // import Debugger from './Debugger';
 
 function PageRoute({ path, component: Component }) {
@@ -98,9 +96,10 @@ function Routes({ isMobile, location }) {
           component={PostsOfflineNotification}
         />
 
-        <Route path="/rules" exact component={ManageRulesPage} />
         <Route path="/payees" exact component={ManagePayeesPage} />
-        <Route path="/tools/fix-splits" exact component={FixSplitsTool} />
+        <Route path="/rules" exact component={ManageRulesPage} />
+        <Route path="/settings" component={Settings} />
+
         <Route
           path="/accounts/:id"
           exact
@@ -116,7 +115,6 @@ function Routes({ isMobile, location }) {
           exact
           component={isMobile ? MobileAccounts : Account}
         />
-        <Route path="/settings" component={Settings} />
       </Route>
     </Switch>
   );

packages/desktop-client/src/components/tools/FixSplitsTool.js → packages/desktop-client/src/components/settings/FixSplits.js

 import React, { useState } from 'react';
 
 import { send } from 'loot-core/src/platform/client/fetch';
-import { View, P, ButtonWithLoading } from 'loot-design/src/components/common';
+import {
+  View,
+  Text,
+  P,
+  ButtonWithLoading
+} from 'loot-design/src/components/common';
 import { colors } from 'loot-design/src/style';
 
-import { Page } from '../Page';
+import { ButtonSetting } from './UI';
 
 function renderResults(results) {
   let { numBlankPayees, numCleared, numDeleted } = results;
+  let result = '';
   if (numBlankPayees === 0 && numCleared === 0 && numDeleted === 0) {
-    return (
-      <P style={{ alignSelf: 'center', color: colors.g3 }}>
-        No split transactions found needing repair.
-      </P>
-    );
-  }
-
-  let fixed = '';
-  if (numBlankPayees > 0) {
-    fixed += `${numBlankPayees} split transactions with a blank payee`;
-  }
-  if (numCleared > 0) {
-    if (fixed !== '') {
-      fixed += ', and ';
+    result = 'No split transactions found needing repair.';
+  } else {
+    if (numBlankPayees > 0) {
+      result += `Fixed ${numBlankPayees} splits with a blank payee.`;
     }
-    fixed += `${numCleared} split transactions with the wrong cleared flag`;
-  }
-  if (numDeleted > 0) {
-    if (fixed !== '') {
-      fixed += ', and ';
+    if (numCleared > 0) {
+      if (result !== '') {
+        result += '\n';
+      }
+      result += `Fixed ${numCleared} splits with the wrong cleared flag.`;
+    }
+    if (numDeleted > 0) {
+      if (result !== '') {
+        result += '\n';
+      }
+      result += `Fixed ${numDeleted} splits that weren't properly deleted.`;
     }
-    fixed += `${numDeleted} split transactions that weren't properly deleted`;
   }
 
   return (
-    <P style={{ alignSelf: 'center', color: colors.g3 }}>Fixed {fixed}.</P>
+    <P
+      style={{
+        color: colors.g3,
+        marginBottom: 0,
+        marginLeft: '1em',
+        textAlign: 'right',
+        whiteSpace: 'pre-wrap'
+      }}
+    >
+      {result}
+    </P>
   );
 }
 
@@ -50,11 +61,34 @@ export default function FixSplitsTool() {
   }
 
   return (
-    <Page title="Repair Split Transactions" modalSize={{ width: 650 }}>
+    <ButtonSetting
+      button={
+        <View
+          style={{
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            maxWidth: 500,
+            width: '100%',
+            alignItems: 'center'
+          }}
+        >
+          <ButtonWithLoading loading={loading} onClick={onFix}>
+            Repair split transactions
+          </ButtonWithLoading>
+          {results && renderResults(results)}
+        </View>
+      }
+    >
+      <Text>
+        <strong>Repair split transactions</strong> if you are experiencing bugs
+        relating to split transactions and the “Reset budget cache” button above
+        does not help. If you see blank payees on splits or account balances (or
+        any balances) are incorrect, this tool may fix them.
+      </Text>
       <View style={{ alignItems: 'flex-start' }}>
         <P>This tool does two things:</P>
         <P>
-          <ul style={{ margin: 0 }}>
+          <ul style={{ margin: 0, paddingLeft: '1.5em' }}>
             <li style={{ marginBottom: '1em' }}>
               Ensures that deleted split transactions are fully deleted. In
               previous versions of the app, certain split transactions may
@@ -69,20 +103,7 @@ export default function FixSplitsTool() {
             </li>
           </ul>
         </P>
-        <P>
-          If you see blank payees on splits or account balances (or any
-          balances) are incorrect, this may fix it.
-        </P>
-        <ButtonWithLoading
-          primary
-          loading={loading}
-          onClick={onFix}
-          style={{ alignSelf: 'center', margin: '15px 0' }}
-        >
-          Repair split transactions
-        </ButtonWithLoading>
-        {results && renderResults(results)}
       </View>
-    </Page>
+    </ButtonSetting>
   );
 }

packages/desktop-client/src/components/settings/UI.js

 import React, { useState } from 'react';
+import { useEffect } from 'react';
+import { useLocation } from 'react-router';
 
 import { css, media } from 'glamor';
 
@@ -52,9 +54,17 @@ export function ButtonSetting({ button, children }) {
 }
 
 export function AdvancedToggle({ children }) {
-  let [expanded, setExpanded] = useState(false);
+  let location = useLocation();
+  let [expanded, setExpanded] = useState(location.hash === '#advanced');
+
   return expanded ? (
     <Section
+      innerRef={el => {
+        if (el && location.hash === '#advanced') {
+          el.scrollIntoView(true);
+        }
+      }}
+      id="advanced"
       title="Advanced Settings"
       {...css(
         {
@@ -70,6 +80,7 @@ export function AdvancedToggle({ children }) {
     </Section>
   ) : (
     <Link
+      id="advanced"
       onClick={() => setExpanded(true)}
       style={{
         flexShrink: 0,

packages/desktop-client/src/components/settings/index.js

@@ -17,6 +17,7 @@ import { isMobile } from '../../util';
 import { Page } from '../Page';
 import EncryptionSettings from './Encryption';
 import ExportBudget from './Export';
+import FixSplitsTool from './FixSplits';
 import FormatSettings from './Format';
 import GlobalSettings from './Global';
 import { ResetCache, ResetSync } from './Reset';
@@ -107,6 +108,7 @@ function Settings({
             <AdvancedAbout prefs={prefs} />
             <ResetCache />
             <ResetSync resetSync={resetSync} />
+            <FixSplitsTool />
           </AdvancedToggle>
         </View>
       </Page>

packages/loot-design/src/components/sidebar.js

@@ -15,7 +15,6 @@ import CheveronDown from '../svg/v1/CheveronDown';
 import CheveronRight from '../svg/v1/CheveronRight';
 import Cog from '../svg/v1/Cog';
 import DotsHorizontalTriple from '../svg/v1/DotsHorizontalTriple';
-import LoadBalancer from '../svg/v1/LoadBalancer';
 import Reports from '../svg/v1/Reports';
 import StoreFrontIcon from '../svg/v1/StoreFront';
 import TuningIcon from '../svg/v1/Tuning';
@@ -541,12 +540,6 @@ function Tools() {
             to="/rules"
             indent={15}
           />
-          <SecondaryItem
-            title="Repair split transactions"
-            Icon={LoadBalancer}
-            to="/tools/fix-splits"
-            indent={15}
-          />
         </>
       )}
     </View>