Merge pull request #267 from wakatime/feature/enhanced-input-ui

Custom Project Name List
2024-08-30 14:50:00 +02:00
parent 872161f655 ee4aa8377e
commit 242bac455c
11 changed files with 273 additions and 96 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -21,6 +21,7 @@ module.exports = {
    'plugin:react/recommended',
    'plugin:react/jsx-runtime',
    'plugin:typescript-sort-keys/recommended',
+    'plugin:react-hooks/recommended',
  ],
  globals: {
    browser: true,
--- a/package-lock.json
+++ b/package-lock.json
@@ -71,6 +71,7 @@
        "eslint-plugin-jest-dom": "^4.0.3",
        "eslint-plugin-prettier": "^4.2.1",
        "eslint-plugin-react": "^7.32.0",
+        "eslint-plugin-react-hooks": "^4.6.2",
        "eslint-plugin-sort-keys-fix": "^1.1.2",
        "eslint-plugin-testing-library": "^5.9.1",
        "eslint-plugin-typescript-sort-keys": "^2.1.0",
@@ -9693,10 +9694,11 @@
      }
    },
    "node_modules/eslint-plugin-react-hooks": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz",
-      "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==",
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.2.tgz",
+      "integrity": "sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==",
      "dev": true,
+      "license": "MIT",
      "engines": {
        "node": ">=10"
      },
@@ -30036,9 +30038,9 @@
      }
    },
    "eslint-plugin-react-hooks": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz",
-      "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==",
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.2.tgz",
+      "integrity": "sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==",
      "dev": true,
      "requires": {}
    },
--- a/package.json
+++ b/package.json
@@ -92,6 +92,7 @@
    "eslint-plugin-jest-dom": "^4.0.3",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.32.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
    "eslint-plugin-sort-keys-fix": "^1.1.2",
    "eslint-plugin-testing-library": "^5.9.1",
    "eslint-plugin-typescript-sort-keys": "^2.1.0",
--- a/src/components/CustomProjectNameList.tsx
+++ b/src/components/CustomProjectNameList.tsx
@@ -0,0 +1,93 @@
+import React, { useCallback } from 'react';
+import { ProjectName } from '../utils/settings';
+
+type Props = {
+  handleChange: (sites: ProjectName[]) => void;
+  helpText: string;
+  label: string;
+  projectNamePlaceholder?: string;
+  sites: ProjectName[];
+  urlPlaceholder?: string;
+};
+
+export default function CustomProjectNameList({
+  handleChange,
+  label,
+  urlPlaceholder,
+  projectNamePlaceholder,
+  sites,
+}: Props): JSX.Element {
+  const handleAddNewSite = useCallback(() => {
+    handleChange([...sites, { projectName: '', url: '' }]);
+  }, [handleChange, sites]);
+
+  const handleUrlChangeForSite = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>, index: number) => {
+      handleChange(
+        sites.map((item, i) => (i === index ? { ...item, url: event.target.value } : item)),
+      );
+    },
+    [handleChange, sites],
+  );
+
+  const handleOnProjectNameChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>, index: number) => {
+      handleChange(
+        sites.map((item, i) => (i === index ? { ...item, projectName: event.target.value } : item)),
+      );
+    },
+    [handleChange, sites],
+  );
+
+  const handleRemoveSite = useCallback(
+    (index: number) => {
+      handleChange(sites.filter((_, i) => i !== index));
+    },
+    [handleChange, sites],
+  );
+
+  return (
+    <div className="form-group mb-4 d-flex flex-column gap-3">
+      <label htmlFor={`${label}-siteList`} className="control-label">
+        {label}
+      </label>
+
+      {sites.length > 0 && (
+        <div className="d-flex flex-column gap-2">
+          {sites.map((site, i) => (
+            <div key={i} className="d-flex gap-2">
+              <div className="flex-fill">
+                <input
+                  placeholder={urlPlaceholder ?? 'https://google.com'}
+                  className="form-control"
+                  value={site.url}
+                  onChange={(e) => handleUrlChangeForSite(e, i)}
+                />
+              </div>
+              <div className="flex-fill">
+                <input
+                  placeholder={projectNamePlaceholder ?? 'Project Name'}
+                  value={site.projectName}
+                  className="form-control"
+                  onChange={(e) => handleOnProjectNameChange(e, i)}
+                />
+              </div>
+              <button
+                type="button"
+                className="btn btn-sm btn-default"
+                onClick={() => handleRemoveSite(i)}
+              >
+                <i className="fa fa-fw fa-times"></i>
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <button type="button" onClick={handleAddNewSite} className="btn btn-default col-12">
+        <i className="fa fa-fw fa-plus me-2"></i>
+        Add Project Name
+      </button>
+    </div>
+  );
+}
--- a/src/components/Options.tsx
+++ b/src/components/Options.tsx
@@ -1,9 +1,10 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import config, { SuccessOrFailType } from '../config/config';
 import apiKeyInvalid from '../utils/apiKey';
 import { IS_CHROME } from '../utils/operatingSystem';
-import { getSettings, saveSettings, Settings } from '../utils/settings';
+import { getSettings, ProjectName, saveSettings, Settings } from '../utils/settings';
 import { logUserIn } from '../utils/user';
+import CustomProjectNameList from './CustomProjectNameList';
 import SitesList from './SitesList';

 interface State extends Settings {
@@ -19,6 +20,7 @@ export default function Options(): JSX.Element {
    allowList: [],
    apiKey: '',
    apiUrl: config.apiUrl,
+    customProjectNames: [],
    denyList: [],
    extensionStatus: 'allGood',
    hostname: '',
@@ -31,37 +33,42 @@ export default function Options(): JSX.Element {
    trackSocialMedia: config.trackSocialMedia,
  });

+  const isApiKeyValid = useMemo(() => apiKeyInvalid(state.apiKey) === '', [state.apiKey]);
+
  const loggingStyleRef = useRef(null);

-  const restoreSettings = async (): Promise<void> => {
+  const restoreSettings = useCallback(async () => {
    const settings = await getSettings();
-    setState({
-      ...state,
+    setState((oldState) => ({
+      ...oldState,
      ...settings,
-    });
-  };
+    }));
+  }, []);

  useEffect(() => {
    void restoreSettings();
-  }, []);
+  }, [restoreSettings]);

  const handleSubmit = async () => {
    if (state.loading) return;
-    setState({ ...state, loading: true });
+    setState((oldState) => ({ ...oldState, loading: true }));
    if (state.apiUrl.endsWith('/')) {
      state.apiUrl = state.apiUrl.slice(0, -1);
    }
    await saveSettings({
-      allowList: state.allowList,
+      allowList: state.allowList.filter((item) => !!item.trim()),
      apiKey: state.apiKey,
      apiUrl: state.apiUrl,
-      denyList: state.denyList,
+      customProjectNames: state.customProjectNames.filter(
+        (item) => !!item.url.trim() && !!item.projectName.trim(),
+      ),
+      denyList: state.denyList.filter((item) => !!item.trim()),
      extensionStatus: state.extensionStatus,
      hostname: state.hostname,
      loggingEnabled: state.loggingEnabled,
      loggingStyle: state.loggingStyle,
      loggingType: state.loggingType,
-      socialMediaSites: state.socialMediaSites,
+      socialMediaSites: state.socialMediaSites.filter((item) => !!item.trim()),
      theme: state.theme,
      trackSocialMedia: state.trackSocialMedia,
    });
@@ -72,46 +79,56 @@ export default function Options(): JSX.Element {
    }
  };

-  const updateDenyListState = (sites: string) => {
-    setState({
-      ...state,
-      denyList: sites.trim().split('\n'),
-    });
-  };
+  const updateDenyListState = useCallback((denyList: string[]) => {
+    setState((oldState) => ({
+      ...oldState,
+      denyList,
+    }));
+  }, []);

-  const updateAllowListState = (sites: string) => {
-    setState({
-      ...state,
-      allowList: sites.trim().split('\n'),
-    });
-  };
+  const updateAllowListState = useCallback((allowList: string[]) => {
+    setState((oldState) => ({
+      ...oldState,
+      allowList,
+    }));
+  }, []);

-  const updateLoggingStyle = (style: string) => {
-    setState({
-      ...state,
+  const updateCustomProjectNamesState = useCallback((customProjectNames: ProjectName[]) => {
+    setState((oldState) => ({
+      ...oldState,
+      customProjectNames,
+    }));
+  }, []);
+
+  const updateLoggingStyle = useCallback((style: string) => {
+    setState((oldState) => ({
+      ...oldState,
      loggingStyle: style === 'allow' ? 'allow' : 'deny',
-    });
-  };
+    }));
+  }, []);

-  const updateLoggingType = (type: string) => {
-    setState({
-      ...state,
+  const updateLoggingType = useCallback((type: string) => {
+    setState((oldState) => ({
+      ...oldState,
      loggingType: type === 'url' ? 'url' : 'domain',
-    });
-  };
+    }));
+  }, []);

-  const updateTheme = (theme: string) => {
-    setState({
-      ...state,
+  const updateTheme = useCallback((theme: string) => {
+    setState((oldState) => ({
+      ...oldState,
      theme: theme === 'light' ? 'light' : 'dark',
-    });
-  };
+    }));
+  }, []);

-  const toggleSocialMedia = () => {
-    setState({ ...state, trackSocialMedia: !state.trackSocialMedia });
-  };
+  const toggleSocialMedia = useCallback(() => {
+    setState((oldState) => ({
+      ...oldState,
+      trackSocialMedia: !oldState.trackSocialMedia,
+    }));
+  }, []);

-  const loggingStyle = function () {
+  const loggingStyle = useCallback(() => {
    // TODO: rewrite SitesList to be structured inputs instead of textarea

    if (state.loggingStyle == 'deny') {
@@ -119,7 +136,7 @@ export default function Options(): JSX.Element {
        <SitesList
          handleChange={updateDenyListState}
          label="Exclude"
-          sites={state.denyList.join('\n')}
+          sites={state.denyList}
          helpText="Sites that you don't want to show in your reports."
        />
      );
@@ -128,14 +145,18 @@ export default function Options(): JSX.Element {
      <SitesList
        handleChange={updateAllowListState}
        label="Include"
-        sites={state.allowList.join('\n')}
-        placeholder="http://google.com&#10;http://myproject.com/MyProject"
-        helpText="Only track these sites. You can assign URL to project by adding @@YourProject at the end of line."
+        sites={state.allowList}
+        projectNamePlaceholder="http://google.com&#10;http://myproject.com/MyProject"
+        helpText="Only track these sites."
      />
    );
-  };
-
-  const isApiKeyValid = apiKeyInvalid(state.apiKey) === '';
+  }, [
+    state.allowList,
+    state.denyList,
+    state.loggingStyle,
+    updateAllowListState,
+    updateDenyListState,
+  ]);

  return (
    <div className="container">
@@ -168,8 +189,8 @@ export default function Options(): JSX.Element {
                value={state.loggingStyle}
                onChange={(e) => updateLoggingStyle(e.target.value)}
              >
-                <option value="denyList">All except excluded sites</option>
-                <option value="allowList">Only allowed sites</option>
+                <option value="deny">All except excluded sites</option>
+                <option value="allow">Only allowed sites</option>
              </select>
            </div>

@@ -221,6 +242,13 @@ export default function Options(): JSX.Element {
              </span>
            </div>

+            <CustomProjectNameList
+              sites={state.customProjectNames}
+              label="Custom Project Names"
+              handleChange={updateCustomProjectNamesState}
+              helpText=""
+            />
+
            <div className="form-group mb-4">
              <label htmlFor="apiUrl" className="form-label mb-0">
                API Url
@@ -277,16 +305,15 @@ export default function Options(): JSX.Element {
                      </div>
                      <div className="modal-body">
                        <SitesList
-                          handleChange={(sites: string) => {
-                            setState({
-                              ...state,
-                              socialMediaSites: sites.split('\n'),
-                            });
+                          handleChange={(socialMediaSites) => {
+                            setState((oldState) => ({
+                              ...oldState,
+                              socialMediaSites,
+                            }));
                          }}
                          label="Social"
-                          sites={state.socialMediaSites.join('\n')}
+                          sites={state.socialMediaSites}
                          helpText="Sites that you don't want to show in your reports."
-                          rows={5}
                        />
                      </div>
                      <div className="modal-footer">
--- a/src/components/SitesList.tsx
+++ b/src/components/SitesList.tsx
@@ -1,47 +1,74 @@
-import React from 'react';
+import React, { useCallback } from 'react';

 type Props = {
-  handleChange: (sites: string) => void;
+  handleChange: (sites: string[]) => void;
  helpText: string;
  label: string;
-  placeholder?: string;
-  rows?: number;
-  sites: string;
+  projectNamePlaceholder?: string;
+  sites: string[];
+  urlPlaceholder?: string;
 };

 export default function SitesList({
  handleChange,
  label,
-  placeholder,
-  rows,
+  urlPlaceholder,
  sites,
  helpText,
 }: Props): JSX.Element {
-  const textareaChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    handleChange(event.target.value);
-  };
+  const handleAddNewSite = useCallback(() => {
+    handleChange([...sites, '']);
+  }, [handleChange, sites]);
+
+  const handleUrlChangeForSite = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>, index: number) => {
+      handleChange(sites.map((item, i) => (i === index ? event.target.value : item)));
+    },
+    [handleChange, sites],
+  );
+
+  const handleRemoveSite = useCallback(
+    (index: number) => {
+      handleChange(sites.filter((_, i) => i !== index));
+    },
+    [handleChange, sites],
+  );

  return (
-    <div className="form-group mb-4">
-      <label htmlFor={`${label}-siteList`} className="col-lg-2 control-label">
+    <div className="form-group mb-4 d-flex flex-column gap-2">
+      <label htmlFor={`${label}-siteList`} className="control-label">
        {label}
      </label>

-      <div className="col-lg-10">
-        <textarea
-          id={`${label}-siteList`}
-          className="form-control"
-          rows={rows ?? 3}
-          onChange={textareaChange}
-          placeholder={placeholder ?? 'http://google.com'}
-          value={sites}
-        ></textarea>
-        <span className="text-secondary">
-          {helpText}
-          <br />
-          One line per site.
-        </span>
-      </div>
+      {sites.length > 0 && (
+        <div className="d-flex flex-column gap-2">
+          {sites.map((site, i) => (
+            <div key={i} className="d-flex gap-2">
+              <div className="flex-fill">
+                <input
+                  placeholder={urlPlaceholder ?? 'https://google.com'}
+                  className="form-control"
+                  value={site}
+                  onChange={(e) => handleUrlChangeForSite(e, i)}
+                />
+              </div>
+              <button
+                type="button"
+                className="btn btn-sm btn-default"
+                onClick={() => handleRemoveSite(i)}
+              >
+                <i className="fa fa-fw fa-times"></i>
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <button type="button" onClick={handleAddNewSite} className="btn btn-default col-12">
+        <i className="fa fa-fw fa-plus me-2"></i>
+        Add Site
+      </button>
+      <span className="text-secondary">{helpText}</span>
    </div>
  );
 }
--- a/src/components/WakaTime.tsx
+++ b/src/components/WakaTime.tsx
@@ -21,10 +21,16 @@ export default function WakaTime(): JSX.Element {
  useEffect(() => {
    const fetchData = async () => {
      await fetchUserData(apiKeyFromRedux, dispatch);
+    };
+    void fetchData();
+  }, [apiKeyFromRedux, dispatch]);
+
+  useEffect(() => {
+    const init = async () => {
      const items = await browser.storage.sync.get({ extensionStatus: '' });
      setExtensionStatus(items.extensionStatus as string);
    };
-    void fetchData();
+    void init();
  }, []);

  const isApiKeyValid = apiKeyInvalid(apiKeyFromRedux) === '';
--- a/src/config/config.test.ts
+++ b/src/config/config.test.ts
@@ -57,6 +57,7 @@ describe('wakatime config', () => {
          "chrome://",
          "about:",
        ],
+        "queueName": "heartbeatQueue",
        "socialMediaSites": [
          "facebook.com",
          "instagram.com",
--- a/src/core/WakaTimeCore.ts
+++ b/src/core/WakaTimeCore.ts
@@ -81,6 +81,14 @@ class WakaTimeCore {
    );
  }

+  getProjectNameFromList(url: string, settings: Settings) {
+    const site = settings.customProjectNames.find((pattern) => {
+      const re = new RegExp(pattern.url);
+      return re.test(url);
+    });
+    return site?.projectName;
+  }
+
  async handleActivity(tabId: number) {
    const settings = await getSettings();
    if (!settings.loggingEnabled) {
@@ -135,14 +143,18 @@ class WakaTimeCore {
    ).heartbeat;

    const entity = settings.loggingType === 'domain' ? getDomainFromUrl(url) : url;
+
+    const projectNameFromList = this.getProjectNameFromList(url, settings);
+
    return {
      branch: heartbeat?.branch ?? '<<LAST_BRANCH>>',
      category: heartbeat?.category,
      entity: heartbeat?.entity ?? entity,
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
      id: uuid4(),
      language: heartbeat?.language,
      plugin: heartbeat?.plugin,
-      project: heartbeat?.project ?? '<<LAST_PROJECT>>',
+      project: projectNameFromList ?? heartbeat?.project ?? '<<LAST_PROJECT>>',
      time: this.getCurrentTime(),
      type: heartbeat?.entityType ?? (settings.loggingType as EntityType),
    };
--- a/src/utils/settings.ts
+++ b/src/utils/settings.ts
@@ -1,10 +1,16 @@
 import browser from 'webextension-polyfill';
 import config, { ExtensionStatus, LoggingStyle, LoggingType, Theme } from '../config/config';

+export interface ProjectName {
+  projectName: string;
+  url: string;
+}
+
 export interface Settings {
  allowList: string[];
  apiKey: string;
  apiUrl: string;
+  customProjectNames: ProjectName[];
  denyList: string[];
  extensionStatus: ExtensionStatus;
  hostname: string;
@@ -22,6 +28,7 @@ export const getSettings = async (): Promise<Settings> => {
    apiKey: config.apiKey,
    apiUrl: config.apiUrl,
    blacklist: null,
+    customProjectNames: [],
    denyList: [],
    hostname: config.hostname,
    loggingEnabled: config.loggingEnabled,
@@ -48,6 +55,7 @@ export const getSettings = async (): Promise<Settings> => {
    await browser.storage.sync.set({ denyList: settings.denyList });
    await browser.storage.sync.remove('blacklist');
  }
+
  if (typeof settings.socialMediaSites === 'string') {
    settings.socialMediaSites = settings.socialMediaSites.trim().split('\n');
    await browser.storage.sync.set({
@@ -59,6 +67,7 @@ export const getSettings = async (): Promise<Settings> => {
    allowList: settings.allowList,
    apiKey: settings.apiKey,
    apiUrl: settings.apiUrl,
+    customProjectNames: settings.customProjectNames,
    denyList: settings.denyList,
    extensionStatus: settings.extensionStatus,
    hostname: settings.hostname,
--- a/src/wakatimeScript.ts
+++ b/src/wakatimeScript.ts
@@ -40,8 +40,6 @@ chrome.runtime.onMessage.addListener(
        return;
      }

-      const heartbeat = site.parser(request.url);
-
      sendResponse({ heartbeat: site.parser(request.url) });
    }
  },