Merge pull request #228 from davepgreene/orderable-profile-list

rapid7 · Aug 31, 2023 · fee7cfc · fee7cfc
2 parents 8827a54 + 9a7e89f
commit fee7cfc
Show file tree

Hide file tree

Showing 10 changed files with 2,119 additions and 3,189 deletions.
diff --git a/forge.config.js b/forge.config.js
@@ -79,6 +79,7 @@ const config = {
       name: '@electron-forge/maker-squirrel',
       config: {
         authors: awsaml.contributors.join(', '),
+        setupIcon: path.join(__dirname, 'images', 'icon.ico'),
       },
     },
     {

diff --git a/package.json b/package.json
@@ -43,9 +43,9 @@
   "proxy": "http://localhost:2600/",
   "main": "src/main/index.js",
   "dependencies": {
-    "@aws-sdk/client-sts": "^3.370.0",
+    "@aws-sdk/client-sts": "^3.398.0",
     "@node-saml/passport-saml": "^4.0.4",
-    "@xmldom/xmldom": "^0.8.9",
+    "@xmldom/xmldom": "^0.8.10",
     "body-parser": "^1.20.2",
     "cookie-parser": "^1.4.6",
     "electron-squirrel-startup": "^1.0.0",
@@ -62,54 +62,57 @@
     "xpath.js": "^1.1.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.9",
-    "@babel/eslint-parser": "^7.22.9",
-    "@babel/preset-env": "^7.22.9",
+    "@babel/core": "^7.22.11",
+    "@babel/eslint-parser": "^7.22.11",
+    "@babel/preset-env": "^7.22.14",
     "@babel/preset-react": "^7.22.5",
     "@craco/craco": "^7.1.0",
-    "@electron-forge/cli": "^6.2.1",
-    "@electron-forge/core": "^6.2.1",
-    "@electron-forge/maker-deb": "^6.2.1",
-    "@electron-forge/maker-rpm": "^6.2.1",
-    "@electron-forge/maker-squirrel": "^6.2.1",
-    "@electron-forge/maker-zip": "^6.2.1",
-    "@electron-forge/plugin-webpack": "^6.2.1",
-    "@electron-forge/publisher-github": "^6.2.1",
+    "@electron-forge/cli": "^6.4.1",
+    "@electron-forge/core": "^6.4.1",
+    "@electron-forge/maker-deb": "^6.4.1",
+    "@electron-forge/maker-rpm": "^6.4.1",
+    "@electron-forge/maker-squirrel": "^6.4.1",
+    "@electron-forge/maker-zip": "^6.4.1",
+    "@electron-forge/plugin-webpack": "^6.4.1",
+    "@electron-forge/publisher-github": "^6.4.1",
     "@electron/get": "^2.0.2",
-    "@electron/rebuild": "^3.2.13",
-    "@fortawesome/fontawesome-free": "^6.4.0",
-    "@fortawesome/fontawesome-svg-core": "^6.4.0",
-    "@fortawesome/free-brands-svg-icons": "^6.4.0",
-    "@fortawesome/free-regular-svg-icons": "^6.4.0",
-    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@electron/rebuild": "^3.3.0",
+    "@fortawesome/fontawesome-free": "^6.4.2",
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-brands-svg-icons": "^6.4.2",
+    "@fortawesome/free-regular-svg-icons": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@popperjs/core": "^2.11.8",
-    "babel-jest": "^29.6.1",
-    "bootstrap": "^5.3.0",
+    "babel-jest": "^29.6.4",
+    "bootstrap": "^5.3.1",
     "coveralls": "^3.1.1",
-    "electron": "^25.3.0",
-    "electron-packager": "^17.1.1",
-    "eslint": "^8.45.0",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-plugin-import": "^2.27.5",
+    "electron": "^26.1.0",
+    "electron-packager": "^17.1.2",
+    "eslint": "^8.48.0",
+    "eslint-config-airbnb": "latest",
+    "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-jest": "^27.2.3",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "glob": "^10.3.3",
     "history": "^5.3.0",
-    "jest": "^29.6.1",
+    "immutability-helper": "^3.1.1",
+    "jest": "^29.6.4",
     "jest-junit": "^16.0.0",
     "prismjs": "^1.29.0",
     "prop-types": "^15.8.1",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
     "react-is": "^18.2.0",
-    "react-router": "^6.14.1",
-    "react-router-dom": "^6.14.1",
+    "react-router": "^6.15.0",
+    "react-router-dom": "^6.15.0",
     "react-scripts": "^5.0.1",
     "reactstrap": "^9.2.0",
     "should": "^13.2.3",
-    "styled-components": "^6.0.4"
+    "styled-components": "^6.0.7"
   },
   "browserslist": {
     "production": [

diff --git a/src/main/containers/configure.js b/src/main/containers/configure.js
@@ -37,6 +37,10 @@ async function getMetadataUrls() {
   return storedMetadataUrls;
 }
 
+async function setMetadataUrls(event, metadataUrls) {
+  Storage.set('metadataUrls', metadataUrls);
+}
+
 async function getDefaultMetadata() {
   const storedMetadataUrls = (Storage.get('metadataUrls') || []);
 
@@ -278,6 +282,7 @@ async function hasMultipleRoles() {
 
 module.exports = {
   getMetadataUrls,
+  setMetadataUrls,
   getDefaultMetadata,
   login,
   deleteProfile,

diff --git a/src/main/containers/index.js b/src/main/containers/index.js
@@ -1,5 +1,6 @@
 const {
   getMetadataUrls,
+  setMetadataUrls,
   getDefaultMetadata,
   login,
   isAuthenticated,
@@ -25,6 +26,7 @@ module.exports = {
   channels: {
     configure: {
       'configure:metadataUrls:get': getMetadataUrls,
+      'configure:metadataUrls:set': setMetadataUrls,
       'configure:defaultMetadata:get': getDefaultMetadata,
       'configure:profile:delete': deleteProfile,
       'configure:profile:get': getProfile,

diff --git a/src/main/containers/refresh-jit.js b/src/main/containers/refresh-jit.js
@@ -21,7 +21,7 @@ async function refreshJitCallback(profileName, session) {
       headers: session.header,
     });
   } catch (err) {
-    console.error(err);
+    console.error(err); // eslint-disable-line no-console
     Manager.removeByName(profileName);
     throw new Error('AWSAML is unable to fetch credentials from ICS');
   }

diff --git a/src/main/preload.js b/src/main/preload.js
@@ -5,6 +5,7 @@ const {
 
 contextBridge.exposeInMainWorld('electronAPI', {
   getMetadataUrls: () => ipcRenderer.invoke('configure:metadataUrls:get'),
+  setMetadataUrls: (args) => ipcRenderer.invoke('configure:metadataUrls:set', args),
   getDefaultMetadata: () => ipcRenderer.invoke('configure:defaultMetadata:get'),
   login: (args) => ipcRenderer.invoke('configure:login', args),
   isAuthenticated: () => ipcRenderer.invoke('configure:is-authenticated'),

diff --git a/src/renderer/containers/configure/Login.js b/src/renderer/containers/configure/Login.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import {
@@ -9,6 +9,7 @@ import {
   Collapse,
 } from 'reactstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useDrag, useDrop } from 'react-dnd';
 import {
   BORDER_COLOR_SCHEME_MEDIA_QUERY,
 } from '../../constants/styles';
@@ -30,6 +31,8 @@ const PaddedCollapse = styled(Collapse)`
   margin-top: 0.4rem;
 `;
 
+const LoginType = 'login';
+
 function Login(props) {
   const {
     url,
@@ -38,12 +41,69 @@ function Login(props) {
     deleteCallback,
     errorHandler,
     darkMode,
+    index,
+    moveLogin,
   } = props;
 
   const [profileName, setProfileName] = useState('');
   const [isOpen, setIsOpen] = useState(false);
   const [caretDirection, setCaretDirection] = useState('right');
 
+  const ref = useRef(null);
+  const [{ handlerId }, drop] = useDrop({
+    accept: LoginType,
+    collect(monitor) {
+      return {
+        handlerId: monitor.getHandlerId(),
+      };
+    },
+    hover(item, monitor) {
+      if (!ref.current) {
+        return;
+      }
+      const dragIndex = item.index;
+      const hoverIndex = index;
+      // Don't replace items with themselves
+      if (dragIndex === hoverIndex) {
+        return;
+      }
+      // Determine rectangle on screen
+      const hoverBoundingRect = ref.current?.getBoundingClientRect();
+      // Get vertical middle
+      const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+      // Determine mouse position
+      const clientOffset = monitor.getClientOffset();
+      // Get pixels to the top
+      const hoverClientY = clientOffset.y - hoverBoundingRect.top;
+      // Only perform the move when the mouse has crossed half of the items height
+      // When dragging downwards, only move when the cursor is below 50%
+      // When dragging upwards, only move when the cursor is above 50%
+
+      // Dragging downwards
+      if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
+        return;
+      }
+      // Dragging upwards
+      if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
+        return;
+      }
+      // Time to actually perform the action
+      moveLogin(dragIndex, hoverIndex);
+      // Note: we're mutating the monitor item here!
+      // Generally it's better to avoid mutations,
+      // but it's good here for the sake of performance
+      // to avoid expensive index searches.
+      // eslint-disable-next-line no-param-reassign
+      item.index = hoverIndex;
+    },
+  });
+  const [{ isDragging }, drag] = useDrag(() => ({
+    type: LoginType,
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
+    }),
+  }));
+
   const handleInputChange = ({ target: { value } }) => {
     setProfileName(value);
   };
@@ -100,47 +160,58 @@ function Login(props) {
     setIsOpen(!isOpen);
   };
 
+  const opacity = isDragging ? 0 : 1;
+  drag(drop(ref));
+
   return (
-    <TransparentlistGroupItem key={url}>
-      <ProfileInputGroup>
-        <Button
-          onClick={handleCollapse}
-          outline={!darkMode}
-        >
-          <FontAwesomeIcon icon={['fas', `fa-caret-${caretDirection}`]} />
-        </Button>
-        <Input
-          className="form-control"
-          defaultValue={pretty}
-          name="profileName"
-          onChange={handleInputChange}
-          onKeyDown={handleKeyDown}
-          type="text"
-        />
-        <Button
-          color="secondary"
-          onClick={handleSubmit}
-          outline={!darkMode}
-        >
-          Login
-        </Button>
-        <Button
-          color="danger"
-          onClick={handleDelete}
-          outline={!darkMode}
-        >
-          <FontAwesomeIcon icon={['far', 'trash-alt']} />
-        </Button>
-      </ProfileInputGroup>
-      <PaddedCollapse isOpen={isOpen}>
-        <InputGroupWithCopyButton
-          id={profileUuid}
-          name={pretty}
-          value={url}
-          darkMode={darkMode}
-        />
-      </PaddedCollapse>
-    </TransparentlistGroupItem>
+    <div
+      ref={ref}
+      style={{
+        opacity,
+      }}
+      data-handler-id={handlerId}
+    >
+      <TransparentlistGroupItem key={url}>
+        <ProfileInputGroup>
+          <Button
+            onClick={handleCollapse}
+            outline={!darkMode}
+          >
+            <FontAwesomeIcon icon={['fas', `fa-caret-${caretDirection}`]} />
+          </Button>
+          <Input
+            className="form-control"
+            defaultValue={pretty}
+            name="profileName"
+            onChange={handleInputChange}
+            onKeyDown={handleKeyDown}
+            type="text"
+          />
+          <Button
+            color="secondary"
+            onClick={handleSubmit}
+            outline={!darkMode}
+          >
+            Login
+          </Button>
+          <Button
+            color="danger"
+            onClick={handleDelete}
+            outline={!darkMode}
+          >
+            <FontAwesomeIcon icon={['far', 'trash-alt']} />
+          </Button>
+        </ProfileInputGroup>
+        <PaddedCollapse isOpen={isOpen}>
+          <InputGroupWithCopyButton
+            id={profileUuid}
+            name={pretty}
+            value={url}
+            darkMode={darkMode}
+          />
+        </PaddedCollapse>
+      </TransparentlistGroupItem>
+    </div>
   );
 }
 
@@ -151,6 +222,8 @@ Login.propTypes = {
   deleteCallback: PropTypes.func.isRequired,
   errorHandler: PropTypes.func.isRequired,
   darkMode: PropTypes.bool.isRequired,
+  index: PropTypes.number.isRequired,
+  moveLogin: PropTypes.func.isRequired,
 };
 
 Login.defaultProps = {