feat: add migration pref pane (#825)

* feat: add migration pane

* style: clean imports

* removeme: beta version

* fix: do no show dropzone when tag has no parent

* fix: hide the Folders toggle

* fix: hide migrations option when user has no folders

* fix: add delimiter on Folders mark

* removeme: bump beta

* fix: remove component viewer for tag folders

* removeme: bump beta

* chore(deps): snjs

app/assets/javascripts/preferences/components/MenuItem.tsx

@@ -16,7 +16,9 @@ export const MenuItem: FunctionComponent<Props> = ({
   onClick,
 }) => (
   <div
-    className={`preferences-menu-item select-none ${selected ? 'selected' : ''}`}
+    className={`preferences-menu-item select-none ${
+      selected ? 'selected' : ''
+    }`}
     onClick={(e) => {
       e.preventDefault();
       onClick();

app/assets/javascripts/preferences/panes/General.tsx

@@ -6,24 +6,26 @@ import { ErrorReporting, Tools, Defaults } from './general-segments';
 import { ExtensionsLatestVersions } from '@/preferences/panes/extensions-segments';
 import { Advanced } from '@/preferences/panes/account';
 import { observer } from 'mobx-react-lite';
+import { Migrations } from './general-segments/Migrations';
 
 interface GeneralProps {
   appState: AppState;
   application: WebApplication;
-  extensionsLatestVersions: ExtensionsLatestVersions,
+  extensionsLatestVersions: ExtensionsLatestVersions;
 }
 
 export const General: FunctionComponent<GeneralProps> = observer(
-  ({
-     appState,
-     application,
-     extensionsLatestVersions
-   }) => (
+  ({ appState, application, extensionsLatestVersions }) => (
     <PreferencesPane>
       <Tools application={application} />
       <Defaults application={application} />
       <ErrorReporting appState={appState} />
-      <Advanced application={application} appState={appState} extensionsLatestVersions={extensionsLatestVersions} />
+      <Migrations application={application} appState={appState} />
+      <Advanced
+        application={application}
+        appState={appState}
+        extensionsLatestVersions={extensionsLatestVersions}
+      />
     </PreferencesPane>
   )
 );

app/assets/javascripts/preferences/panes/general-segments/Migrations.tsx

@@ -0,0 +1,103 @@
+import { Button } from '@/components/Button';
+import { Icon } from '@/components/Icon';
+import { WebApplication } from '@/ui_models/application';
+import { AppState } from '@/ui_models/app_state';
+import { FunctionComponent } from 'preact';
+import { useCallback, useState } from 'preact/hooks';
+import {
+  PreferencesGroup,
+  PreferencesSegment,
+  Subtitle,
+  Text,
+  Title,
+} from '../../components';
+
+type Props = {
+  application: WebApplication;
+  appState: AppState;
+};
+
+export const CheckIcon: React.FC = () => {
+  return <Icon className="success min-w-4 min-h-4" type="check-bold" />;
+};
+
+const Migration3dot0dot0: FunctionComponent<Props> = ({ application }) => {
+  const [loading, setLoading] = useState(false);
+  const [complete, setComplete] = useState(false);
+  const [error, setError] = useState<unknown | null>(null);
+
+  const trigger = useCallback(() => {
+    setLoading(true);
+    setError(null);
+    setComplete(false);
+    application
+      .migrateTagDotsToHierarchy()
+      .then(() => {
+        setLoading(false);
+        setError(null);
+        setComplete(true);
+      })
+      .catch((error: unknown) => {
+        setLoading(false);
+        setError(error);
+        setComplete(false);
+      });
+  }, [application, setLoading, setError]);
+
+  return (
+    <>
+      <Subtitle>(3.0.0) Folders Component to Native Folders</Subtitle>
+      <Text>
+        This migration transform tags with "." in their title into a hierarchy
+        of parents. This lets your transform tag hierarchies created with the
+        folder component into native tag folders.
+      </Text>
+      <div className="flex flex-row items-center mt-3">
+        <Button
+          type="normal"
+          onClick={trigger}
+          className="m-2"
+          disabled={loading}
+          label="Run Now"
+        />
+        {complete && (
+          <div className="ml-3">
+            <Text>Migration successful.</Text>
+          </div>
+        )}
+        {error && (
+          <div className="ml-3">
+            <Text>Something wrong happened. Please contact support.</Text>
+          </div>
+        )}
+      </div>
+    </>
+  );
+};
+
+export const Migrations: FunctionComponent<Props> = ({
+  application,
+  appState,
+}) => {
+  const hasNativeFoldersEnabled = appState.features.enableNativeFoldersFeature;
+
+  if (!hasNativeFoldersEnabled) {
+    return null;
+  }
+
+  const hasFoldersFeature = appState.features.hasFolders;
+
+  if (!hasFoldersFeature) {
+    return null;
+  }
+
+  return (
+    <PreferencesGroup>
+      <PreferencesSegment>
+        <Title>Migrations</Title>
+        <div className="h-2 w-full" />
+        <Migration3dot0dot0 application={application} appState={appState} />
+      </PreferencesSegment>
+    </PreferencesGroup>
+  );
+};