feathersjs-ecosystem
diff --git a/.depcheckrc b/.depcheckrc
@@ -0,0 +1 @@
+ignores: ["@svgr/parcel-plugin-svgr", "parcel-*"]
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -39,5 +39,6 @@ module.exports = {
     'react/jsx-curly-newline': 0,
     'no-param-reassign': 0,
     camelcase: 0,
+    'no-underscore-dangle': 0,
   },
 };
diff --git a/package.json b/package.json
@@ -1,11 +1,13 @@
 {
   "name": "feathers-debugger",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "FeathersJS Debugger Chrome Extension",
   "main": "src/index.html",
   "scripts": {
     "dev": "parcel src/devtools.html --out-dir build/output --cache-dir build/cache src/popup.html --port 3000",
-    "build": "export NODE_ENV=production && parcel --cache-dir build/cache --no-source-maps build src/devtools.html src/popup.html"
+    "build": "export NODE_ENV=production && parcel --cache-dir build/cache --no-source-maps build src/devtools.html src/popup.html -d dist",
+    "lint": "eslint ./src",
+    "depcheck": "depcheck"
   },
   "keywords": [
     "feathers",
@@ -35,10 +37,10 @@
   "devDependencies": {
     "@svgr/parcel-plugin-svgr": "^5.4.0",
     "babel-eslint": "^10.1.0",
+    "depcheck": "^1.2.0",
     "eslint": "^7.7.0",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-config-prettier": "^6.11.0",
-    "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-jest": "^23.20.0",
     "eslint-plugin-jsx-a11y": "^6.3.1",

diff --git a/src/assets/check.svg b/src/assets/check.svg
diff --git a/src/assets/index.js b/src/assets/index.js
@@ -7,6 +7,8 @@ import Trash from './trash.svg';
 import ErrorTriangle from './error.svg';
 import ErrorColor from './error-color.svg';
 import Condensed from './condensed.svg';
+import Settings from './settings.svg';
+import Check from './check.svg';
 
 export {
   ZoomIn,
@@ -18,4 +20,6 @@ export {
   ErrorTriangle,
   ErrorColor,
   Condensed,
+  Settings,
+  Check,
 };
diff --git a/src/assets/settings.svg b/src/assets/settings.svg
diff --git a/src/components/Waterfall/NoData.jsx → src/components/NoData/NoData.jsx b/src/components/Waterfall/NoData.jsx → src/components/NoData/NoData.jsx
@@ -15,7 +15,7 @@ const Root = styled.div`
   }
 `;
 
-export default function NoData({ error, port }) {
+export default function NoData({ error, url, protocol }) {
   return (
     <Root>
       <div>
@@ -32,8 +32,12 @@ export default function NoData({ error, port }) {
         {error === 'Failed to fetch' && (
           <p>
             Feathers debugger <strong>not found</strong> on{' '}
-            <a href={`http://localhost:${port}/feathers-debugger`}>
-              http://localhost:{port}/feathers-debugger
+            <a
+              href={`${protocol}://${url}/feathers-debugger`}
+              target="_blank"
+              rel="noreferrer"
+            >
+              {protocol}://{url}/feathers-debugger
             </a>
           </p>
         )}
@@ -46,8 +50,15 @@ export default function NoData({ error, port }) {
           </p>
         )}
         <p>
-          Make sure you installed Feathers Debugger hook in{' '}
-          <code>app.hooks</code>.
+          Make sure you installed and configured{' '}
+          <a
+            href="https://www.npmjs.com/package/feathers-debugger-service"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Debugger Service
+          </a>{' '}
+          on your server.
           <br />
           Read documentation{' '}
           <a
@@ -57,7 +68,7 @@ export default function NoData({ error, port }) {
           >
             here
           </a>{' '}
-          on how to configure FeathersJS Debugger.
+          on how to configure Feathers debugger.
         </p>
       </div>
     </Root>

diff --git a/src/components/Settings/Settings.jsx b/src/components/Settings/Settings.jsx
@@ -0,0 +1,155 @@
+import React, { useEffect, useState } from 'react';
+import ms from 'ms';
+import ReactTooltip from 'react-tooltip';
+import packageJson from '../../../package.json';
+import {
+  Settings as SettingsIcon,
+  Check,
+  ErrorTriangle,
+  Sync,
+} from '../../assets';
+
+import {
+  Root,
+  Overlay,
+  Modal,
+  ModalHeader,
+  Title,
+  ModalBody,
+  Close,
+  UrlInput,
+  Label,
+  Protocol,
+  UrlInputContainer,
+  Group,
+  Btn,
+  BtnGroup,
+  Footer,
+  ConnectionState,
+} from './SettingsStyles';
+
+let settingsDebounce;
+
+export default function Settings({ close, ctx, fetchData }) {
+  const { url, protocol, pollInterval, pollIntervals, fetchError } = ctx;
+  const [loading, setLoading] = useState(0);
+
+  // Refetch on settings change
+  useEffect(() => {
+    clearTimeout(settingsDebounce);
+    setLoading(1);
+    settingsDebounce = setTimeout(() => {
+      // Sanitize fields
+      let sanitizedUrl = url;
+      let sanitizedProtocol = protocol;
+      if (sanitizedUrl && sanitizedUrl.endsWith('/')) {
+        sanitizedUrl = url.slice(0, -1);
+      }
+      if (sanitizedUrl && sanitizedUrl.endsWith('/feathers-debugger')) {
+        sanitizedUrl = url.slice(0, -18);
+      }
+      if (sanitizedUrl && sanitizedUrl.startsWith('http://')) {
+        sanitizedUrl = url.slice(7);
+        sanitizedProtocol = 'http';
+      }
+      if (sanitizedUrl && sanitizedUrl.startsWith('https://')) {
+        sanitizedUrl = url.slice(8);
+        sanitizedProtocol = 'https';
+      }
+      ctx.update({ url: sanitizedUrl, protocol: sanitizedProtocol }, fetchData);
+      setLoading(0);
+    }, 500);
+    return () => clearTimeout(settingsDebounce);
+  }, [url, protocol, pollInterval]);
+
+  const changeProtocol = () => {
+    ctx.update({ protocol: protocol === 'http' ? 'https' : 'http' });
+  };
+
+  const changePollInterval = val => () => {
+    ctx.update({ pollInterval: val });
+  };
+
+  return (
+    <Root>
+      <ReactTooltip
+        delayShow={550}
+        place="bottom"
+        type="dark"
+        effect="solid"
+        id="settings-tooltip"
+      />
+      <Overlay onClick={close} />
+      <Modal>
+        <ModalHeader>
+          <Title>
+            <SettingsIcon />
+            Settings
+          </Title>
+          <Close onClick={close}>&times;</Close>
+        </ModalHeader>
+        <ModalBody>
+          <Group>
+            <Label>Server URL:</Label>
+            <UrlInputContainer>
+              <Protocol
+                data-for="settings-tooltip"
+                data-tip="Protocol (http or https)"
+                onClick={changeProtocol}
+              >
+                {protocol}
+              </Protocol>
+              <UrlInput
+                data-multiline
+                data-for="settings-tooltip"
+                data-tip="Feathers Server URL <br/> Without trailing slash and /feathers-debugger"
+                type="url"
+                onChange={e => ctx.update({ url: e.target.value })}
+                value={url}
+              />
+              <ConnectionState
+                error={fetchError || 0}
+                loading={loading}
+                data-for="settings-tooltip"
+                data-tip="Connnection state"
+              >
+                {fetchError && !loading && <ErrorTriangle />}
+                {!fetchError && !loading && <Check />}
+                {loading === 1 && <Sync />}
+              </ConnectionState>
+            </UrlInputContainer>
+          </Group>
+
+          <Group>
+            <Label>Poll Interval:</Label>
+            <BtnGroup
+              style={{ margin: 0 }}
+              data-for="settings-tooltip"
+              data-tip="How often to refresh data, only used in watch mode."
+            >
+              {pollIntervals.map(int => (
+                <Btn
+                  key={int}
+                  onClick={changePollInterval(int)}
+                  active={pollInterval === int}
+                >
+                  {ms(int)}
+                </Btn>
+              ))}
+            </BtnGroup>
+          </Group>
+        </ModalBody>
+        <Footer>
+          <a
+            href="https://github.com/radenkovic/feathers-debugger"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Feathers Debugger
+          </a>{' '}
+          v{packageJson.version}
+        </Footer>
+      </Modal>
+    </Root>
+  );
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		ignores: ["@svgr/parcel-plugin-svgr", "parcel-*"]