- Username: {" "} - {userName} -
) } diff --git a/src/views/Base/DashboardPlugin/DashboardPlugin.js b/src/views/Base/DashboardPlugin/DashboardPlugin.js new file mode 100644 index 000000000..b6b9bd6a4 --- /dev/null +++ b/src/views/Base/DashboardPlugin/DashboardPlugin.js @@ -0,0 +1,30 @@ +import React from "react"; +import Iframe from "react-iframe"; +import * as PropTypes from "prop-types"; + +/** + * Dashboard plugin loads a plugin in an iframe + * @param pluginUrl {string} + * @return {*} + * @constructor + */ +function DashboardPlugin({pluginUrl}) { + return ( +
+ {(pluginUrl) ?
+ :
+ );
+}
+
+DashboardPlugin.propTypes = {
+ pluginUrl: PropTypes.string.isRequired
+}
+
+export default DashboardPlugin;
\ No newline at end of file
diff --git a/src/views/Base/DashboardPlugin/DashboardPlugin.test.js b/src/views/Base/DashboardPlugin/DashboardPlugin.test.js
new file mode 100644
index 000000000..ba36fe087
--- /dev/null
+++ b/src/views/Base/DashboardPlugin/DashboardPlugin.test.js
@@ -0,0 +1,39 @@
+import React from "react";
+import {shallow} from "enzyme";
+import toJson from "enzyme-to-json";
+import DashboardPlugin from "./DashboardPlugin";
+import {findByTestAttr, testStore} from "../../../../Utils";
+
+
+const setUp = (intialState = {}, props = {}) => {
+ const store = testStore(intialState);
+
+ const component = shallow(Could not find any appropriate plugin to load
} +
+
+`;
diff --git a/src/views/Base/PluginsHandler/NoPluginAvailableModal/NoPluginAvailableModal.js b/src/views/Base/PluginsHandler/NoPluginAvailableModal/NoPluginAvailableModal.js
new file mode 100644
index 000000000..ac91ee2d0
--- /dev/null
+++ b/src/views/Base/PluginsHandler/NoPluginAvailableModal/NoPluginAvailableModal.js
@@ -0,0 +1,75 @@
+import React from 'react';
+import {Button, Modal, ModalBody, ModalFooter, ModalHeader, Table} from "reactstrap";
+import * as PropTypes from 'prop-types';
+
+const NoPluginAvailableModal = (props) => {
+
+ const {
+ className,
+ isOpen,
+ setIsOpen,
+ availablePlugins,
+ processOpenPlugin
+ } = props;
+
+
+ const toggle = () => {
+ setIsOpen(!isOpen);
+ }
+
+
+ const openPlugin = (plugin) => {
+ processOpenPlugin(plugin.name, plugin.author);
+ }
+
+ return (+ Could not find any appropriate plugin to load +
+
+
+ Couldn't find a plugin to open this file
+
+
+
+
+
+
+
+ {' '}
+
+
+
+
);
+}
+
+NoPluginAvailableModal.propTypes = {
+ className: PropTypes.string.isRequired,
+ availablePlugins: PropTypes.array.isRequired,
+ isOpen: PropTypes.bool.isRequired,
+ setIsOpen: PropTypes.func.isRequired,
+ processOpenPlugin: PropTypes.func.isRequired
+}
+
+export default NoPluginAvailableModal;
\ No newline at end of file
diff --git a/src/views/Base/PluginsHandler/NoPluginAvailableModal/NoPluginAvailableModal.test.js b/src/views/Base/PluginsHandler/NoPluginAvailableModal/NoPluginAvailableModal.test.js
new file mode 100644
index 000000000..0a0c68cff
--- /dev/null
+++ b/src/views/Base/PluginsHandler/NoPluginAvailableModal/NoPluginAvailableModal.test.js
@@ -0,0 +1,51 @@
+import React from "react";
+import {shallow} from "enzyme";
+import toJson from "enzyme-to-json";
+import {findByTestAttr, testStore} from "../../../../../Utils";
+import NoPluginAvailableModal from "./NoPluginAvailableModal";
+
+
+const setUp = (intialState = {}, props = {}) => {
+ const store = testStore(intialState);
+
+ const component = shallow(| Name | +Author | +Description | ++ |
|---|---|---|---|
| {value.name} | +{value.author} | +{value.description} | ++ + | +
+
+
+ Couldn't find a plugin to open this file
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
diff --git a/src/views/Base/PluginsHandler/PluginsHandler.js b/src/views/Base/PluginsHandler/PluginsHandler.js
new file mode 100644
index 000000000..1ea9b476f
--- /dev/null
+++ b/src/views/Base/PluginsHandler/PluginsHandler.js
@@ -0,0 +1,137 @@
+import React, {useState} from 'react';
+import * as PropTypes from 'prop-types'
+import {IP_ADDRESS_KEY} from "../../../utils/Constants";
+import {connect} from "react-redux";
+import {PROP_CURRENT_PATH, PROP_FS_INFO} from "../../../utils/RclonePropTypes";
+import ErrorBoundary from "../../../ErrorHandling/ErrorBoundary";
+import {Button} from "reactstrap";
+import NoPluginAvailableModal from "./NoPluginAvailableModal/NoPluginAvailableModal";
+import {filterPluginsByMimeType, getPluginsArray, getPluginServeUrl} from "../../../utils/PluginTools";
+import {openInWindow} from "../../../utils/Tools";
+import {toast} from "react-toastify";
+
+function PluginsHandler(props) {
+ const {fsInfo, item, currentPath, loadedPlugins, loadedTestPlugins} = props;
+
+ const [showPluginsModal, setShowPluginsModal] = useState(false);
+
+ const [availablePlugins, setAvailablePlugins] = useState([]);
+
+ let downloadURL = "";
+
+ const processOpenPlugin = (pluginName, author) => {
+ const {remoteName, remotePath} = currentPath;
+ const {MimeType} = item;
+ const ipAddress = localStorage.getItem(IP_ADDRESS_KEY);
+ if (fsInfo.Features.BucketBased) {
+ downloadURL = ipAddress + `[${remoteName}]/${remotePath}/${item.Name}`;
+ } else {
+ downloadURL = ipAddress + `[${remoteName}:${remotePath}]/${item.Name}`;
+ }
+ try {
+ const pluginUrl = getPluginServeUrl(ipAddress, pluginName, author, downloadURL, MimeType);
+ openInWindow(pluginUrl)
+ } catch (e) {
+ toast.error("Error loading URL: " + e);
+ }
+ }
+
+
+ const openPlugin = () => {
+ let {MimeType} = item;
+ console.log("Plugin Item", item)
+ if (item.IsDir) {
+ // Directory mimetype to be searched
+ MimeType = "rclone/dir";
+ }
+ console.log("loaded Plugins", loadedPlugins);
+ // const availableTestPlugins = [];
+ let availableTestPlugins = getPluginsArray(loadedTestPlugins);
+ availableTestPlugins = filterPluginsByMimeType(availableTestPlugins, MimeType);
+
+
+ let availablePlugins = getPluginsArray(loadedPlugins);
+ availablePlugins = filterPluginsByMimeType(availablePlugins, MimeType);
+
+ // add test plugins as well
+ availablePlugins = availablePlugins.concat(availableTestPlugins);
+ // Set in state to pass to modal
+ setAvailablePlugins(availablePlugins);
+ if (availablePlugins.length === 0) {
+ // No plugins available, show modal for redirecting to the store
+ setShowPluginsModal(true);
+ } else if (availablePlugins.length === 1) {
+ // open the default available plugin
+ processOpenPlugin(availablePlugins[0].name, availablePlugins[0].author);
+ } else {
+ // display modal with multiple options
+ setShowPluginsModal(true);
+ }
+ }
+
+
+ return | + Name + | ++ Author + | ++ Description + | ++ |
|---|
Cannot load plugin
; // Load the video const subtitleURL = playbackURL.substring(0, playbackURL.lastIndexOf('.')) + ".vtt"; @@ -89,32 +94,40 @@ function VideoPlayer({playbackURL, MimeType}) { }; - element = ReactDOM.createPortal(( -
+
+ {/**/}
+
+ {/**/}
- {
+ getPlugins();
+ })
+
+ let dashboardPlugins = getPluginsArray(loadedPlugins);
+ dashboardPlugins = filterPluginsByType(dashboardPlugins, pluginTypes.DASHBOARD);
+ return (
+
+ {dashboardPlugins.map(element =>
+ )
+}
+
+const mapStateToProps = state => ({
+ loadedPlugins: state.plugins.loadedPlugins,
+});
+
+DashboardPluginWidgets.propTypes = {
+ loadedPlugins: PropTypes.object.isRequired,
+ getPlugins: PropTypes.func.isRequired,
+};
+
+export default connect(mapStateToProps, {getPlugins})(DashboardPluginWidgets);
\ No newline at end of file
diff --git a/src/views/DashboardPluginWidgets/DashboardPluginWidgets.test.js b/src/views/DashboardPluginWidgets/DashboardPluginWidgets.test.js
new file mode 100644
index 000000000..5c9aefd6d
--- /dev/null
+++ b/src/views/DashboardPluginWidgets/DashboardPluginWidgets.test.js
@@ -0,0 +1,37 @@
+import React from "react";
+import {shallow} from "enzyme";
+import {findByTestAttr, testStore} from "../../../Utils";
+import toJson from "enzyme-to-json";
+import DashboardPluginWidgets from "./DashboardPluginWidgets";
+
+
+const setUp = (intialState = {}, props = {}) => {
+ const store = testStore(intialState);
+
+ const component = shallow();
+ return component.childAt(0).dive();
+};
+
+
+describe('Dashboard Plugin Widget', function () {
+
+ describe('renders', function () {
+ let wrapper;
+ beforeEach(() => {
+ const initialState = {};
+
+ const props = {};
+ wrapper = setUp(initialState, props)
+ });
+
+ it('should render without crashing', function () {
+ const component = findByTestAttr(wrapper, "dashboardPluginWidget");
+ expect(component).toHaveLength(1);
+ });
+
+ it('should match snapshot', function () {
+ expect(toJson(wrapper)).toMatchSnapshot()
+ });
+ });
+
+});
diff --git a/src/views/DashboardPluginWidgets/__snapshots__/DashboardPluginWidgets.test.js.snap b/src/views/DashboardPluginWidgets/__snapshots__/DashboardPluginWidgets.test.js.snap
new file mode 100644
index 000000000..52bb7c6e7
--- /dev/null
+++ b/src/views/DashboardPluginWidgets/__snapshots__/DashboardPluginWidgets.test.js.snap
@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Dashboard Plugin Widget renders should match snapshot 1`] = `
+|
+`;
diff --git a/src/views/Explorer/FilesView/FileComponent.js b/src/views/Explorer/FilesView/FileComponent.js
index e5e6d9051..b9f37517d 100644
--- a/src/views/Explorer/FilesView/FileComponent.js
+++ b/src/views/Explorer/FilesView/FileComponent.js
@@ -1,5 +1,14 @@
import React from "react";
-import {Card, CardBody, CardFooter,} from "reactstrap";
+import {
+ Button,
+ Card,
+ CardBody,
+ CardFooter,
+ DropdownItem,
+ DropdownMenu,
+ DropdownToggle,
+ UncontrolledButtonDropdown,
+} from "reactstrap";
import {ItemTypes} from './Constants'
import {DragSource} from 'react-dnd'
@@ -13,6 +22,7 @@ import {PROP_ITEM} from "../../../utils/RclonePropTypes";
import ErrorBoundary from "../../../ErrorHandling/ErrorBoundary";
import FileActions from "./FileActions";
import FileIcon from "./FileIcon";
+import PluginsHandler from "../../Base/PluginsHandler/PluginsHandler";
async function performCopyMoveOperation(params) {
const {srcRemoteName, srcRemotePath, destRemoteName, destRemotePath, Name, IsDir, dropEffect, updateHandler} = params;
@@ -87,7 +97,76 @@ function collect(connect, monitor) {
}
}
+function confirmDelete(deleteHandle, item) {
+ if (window.confirm(`Are you sure you want to delete ${item.Name}`)) {
+ deleteHandle(item);
+ }
+}
+
+function Actions({downloadHandle, deleteHandle, item, linkShareHandle, containerID}) {
+
+ const {IsDir} = item;
+ // let {ID, Name} = item;
+ // // Using fallback as fileName when the ID is not available (for local file system)
+ // if (ID === undefined) {
+ // ID = Name;
+ // }
+
+
+ if (!IsDir) {
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ Actions
+ linkShareHandle(item)}> Share with link
+ confirmDelete(deleteHandle, item)}> Delete
+
+
+
+
+ );
+ } else {
+ return (
+
+
+
+
+
+
+
+
+
+ Actions
+ linkShareHandle(item)}> Share with link
+ confirmDelete(deleteHandle, item)}> Delete
+
+
+
+ )
+ }
+}
/**
* Main class for individual render of file/directory in the files view.
@@ -127,7 +206,11 @@ class FileComponent extends React.Component {
}
}
render() {
- const {containerID, inViewport, item, loadImages, clickHandler, downloadHandle, linkShareHandle, deleteHandle, connectDragSource, gridMode /*isDragging, remoteName*/} = this.props;
+ const {
+ containerID, inViewport, item, loadImages,
+ clickHandler, downloadHandle, linkShareHandle, deleteHandle, pluginHandle,
+ connectDragSource, gridMode /*isDragging, remoteName*/
+ } = this.props;
const {IsDir, MimeType, ModTime, Name, Size} = item;
@@ -156,14 +239,15 @@ class FileComponent extends React.Component {
} else {
if (inViewport) {
element = connectDragSource(
-
+
clickHandler(e, item)}>
{" "}{Name}
{Size === -1 ? "-" : formatBytes(Size, 2)}
{modTime.toLocaleDateString()}
-
)
} else {
@@ -197,6 +281,11 @@ FileComponent.propTypes = {
* Function to delete a file.
*/
deleteHandle: PropTypes.func.isRequired,
+
+ /**
+ * Used for handling the plugins click
+ */
+ pluginHandle: PropTypes.func.isRequired,
/**
* Function to share the link of a file.
*/
diff --git a/src/views/Explorer/FilesView/FilesView.js b/src/views/Explorer/FilesView/FilesView.js
index 3952cfd88..3baf0b544 100644
--- a/src/views/Explorer/FilesView/FilesView.js
+++ b/src/views/Explorer/FilesView/FilesView.js
@@ -138,6 +138,11 @@ class FilesView extends React.PureComponent {
if (IsDir || IsBucket) {
this.updateRemotePath(Path, IsDir, IsBucket);
} else {
+ // check for compatible plugin
+ // if plugin is found, open using the plugin. If not found, then Open modal
+ // display plugins which can be used with this mime type if plugins are absent
+ // else allow to use plugin.
+
this.downloadHandle(item);
}
@@ -274,6 +279,10 @@ class FilesView extends React.PureComponent {
};
+ pluginHandle = (item) => {
+ console.log(item);
+ }
+
getFileComponents = (isDir) => {
const {files, containerID, gridMode, fsInfo, loadImages} = this.props;
const {remoteName, remotePath} = this.props.currentPath;
@@ -293,6 +302,7 @@ class FilesView extends React.PureComponent {
containerID={containerID}
linkShareHandle={this.linkShareHandle}
loadImages={loadImages}
+ pluginHandle={this.pluginHandle}
isBucketBased={fsInfo.Features.BucketBased}
canCopy={fsInfo.Features.Copy} canMove={fsInfo.Features.Move} itemIdx={1}>
diff --git a/src/views/Explorer/FilesView/FilesView.test.js b/src/views/Explorer/FilesView/FilesView.test.js
index 29e793dfe..f3c7dacbb 100644
--- a/src/views/Explorer/FilesView/FilesView.test.js
+++ b/src/views/Explorer/FilesView/FilesView.test.js
@@ -30,6 +30,7 @@ describe("Files View", function () {
wrapper = setUp(initialState, props)
});
+
it('should render without crashing', function () {
expect(wrapper).toHaveLength(1)
});
diff --git a/src/views/Explorer/RemoteExplorerLayout/RemoteExplorerLayout.js b/src/views/Explorer/RemoteExplorerLayout/RemoteExplorerLayout.js
index 8347a3385..733722a87 100644
--- a/src/views/Explorer/RemoteExplorerLayout/RemoteExplorerLayout.js
+++ b/src/views/Explorer/RemoteExplorerLayout/RemoteExplorerLayout.js
@@ -5,6 +5,7 @@ import {connect} from "react-redux";
import {createPath} from "../../../actions/explorerStateActions";
import * as PropTypes from 'prop-types';
import {addRemoteContainer, changeDistractionFreeMode, changeNumCols} from "../../../actions/explorerActions";
+import {getPlugins} from "../../../actions/pluginActions";
import ErrorBoundary from "../../../ErrorHandling/ErrorBoundary";
import singlePaneImg from '../../../assets/img/single-pane.png';
@@ -27,11 +28,15 @@ class RemoteExplorerLayout extends React.Component {
componentDidMount() {
//Load one explorer layout
- const {numContainers, addRemoteContainer} = this.props;
+ const {numContainers, addRemoteContainer, getPlugins} = this.props;
if (numContainers < 1) {
addRemoteContainer(0)
}
+
+ // Load the test plugins
+ getPlugins();
+
}
toggleDistractionFreeMode = (_) => {
@@ -88,14 +93,14 @@ class RemoteExplorerLayout extends React.Component {
}
-
-
+
+
);
@@ -110,6 +115,8 @@ const mapStateToProps = (state) => ({
splitMode: state.remote.splitMode,
activeRemoteContainerID: state.remote.activeRemoteContainerID,
containers: state.remote.containers,
+ loadedTestPlugins: state.plugins.loadedTestPlugins,
+ loadedPlugins: state.plugins.loadedPlugins
});
RemoteExplorerLayout.propTypes = {
@@ -117,6 +124,10 @@ RemoteExplorerLayout.propTypes = {
createPath: PropTypes.func.isRequired,
changeNumCols: PropTypes.func.isRequired,
distractionFreeMode: PropTypes.bool.isRequired,
+ getPlugins: PropTypes.func.isRequired,
+
+ loadedTestPlugins: PropTypes.object.isRequired,
+ loadedPlugins: PropTypes.object.isRequired,
activeRemoteContainerID: PropTypes.object.isRequired
};
@@ -124,6 +135,7 @@ export default connect(mapStateToProps, {
createPath,
changeNumCols,
changeDistractionFreeMode,
- addRemoteContainer
+ addRemoteContainer,
+ getPlugins
})
(RemoteExplorerLayout);
diff --git a/src/views/Home/Home.js b/src/views/Home/Home.js
index 528caabab..dae4729f4 100644
--- a/src/views/Home/Home.js
+++ b/src/views/Home/Home.js
@@ -6,6 +6,7 @@ import BandwidthStatusCard from "../Base/BandwidthStatusCard/BandwidthStatusCard
import {connect} from "react-redux";
import * as PropTypes from 'prop-types';
import {IP_ADDRESS_KEY} from "../../utils/Constants";
+import DashboardPluginWidgets from "../DashboardPluginWidgets/DashboardPluginWidgets";
class Home extends React.Component {
@@ -23,9 +24,11 @@ class Home extends React.Component {
:
);
}
}
diff --git a/src/views/Home/__snapshots__/Home.test.js.snap b/src/views/Home/__snapshots__/Home.test.js.snap
index 9ed89f648..3172cfbc2 100644
--- a/src/views/Home/__snapshots__/Home.test.js.snap
+++ b/src/views/Home/__snapshots__/Home.test.js.snap
@@ -52,6 +52,7 @@ exports[`Home Component renders should match snapshot 1`] = `
Jobs
{checkStatus ?Not Monitoring
} +Jobs
diff --git a/src/views/PluginDashboard/NewPluginModal.js b/src/views/PluginDashboard/NewPluginModal.js new file mode 100644 index 000000000..d6ebd34f7 --- /dev/null +++ b/src/views/PluginDashboard/NewPluginModal.js @@ -0,0 +1,114 @@ +import React, {useState} from 'react'; +import { + Button, + Col, + Form, + FormFeedback, + FormGroup, + Input, + Label, + Modal, + ModalBody, + ModalFooter, + ModalHeader +} from 'reactstrap'; +import * as PropTypes from "prop-types" + +/** + * NewPluginModal shows a button for opening a modal for new mount and then executes okHandle when positive + * button is clicked + * @param props + * @returns {*} + * @constructor + */ +const NewPluginModal = (props) => { + const { + buttonLabel, + className, + okHandle + } = props; + + const [modal, setModal] = useState(false); + + const [pluginDownloadURL, setPluginDownloadURL] = useState(""); + + const [pluginType, setPluginType] = useState(""); + + const toggle = () => setModal(!modal); + + const handleCreateMount = () => { + if (!okHandle) { + throw new Error("Ok handle is null"); + } + okHandle(pluginDownloadURL, pluginType); + } + + const isCreateDisabled = () => { + return !pluginDownloadURL || pluginDownloadURL === ""; + } + + const submitForm = (e) => { + e.preventDefault(); + handleCreateMount(); + } + + return ( +
+
+
+
+ );
+}
+
+NewPluginModal.propTypes = {
+ /**
+ * Text for open modal button
+ */
+ buttonLabel: PropTypes.string,
+ /**
+ * Class for open modal button
+ */
+ buttonClass: PropTypes.string,
+ /**
+ * Function to be called when ok button is clicked.
+ */
+ okHandle: PropTypes.func.isRequired,
+}
+
+export default NewPluginModal;
\ No newline at end of file
diff --git a/src/views/PluginDashboard/NewPluginModal.test.js b/src/views/PluginDashboard/NewPluginModal.test.js
new file mode 100644
index 000000000..d96e8c376
--- /dev/null
+++ b/src/views/PluginDashboard/NewPluginModal.test.js
@@ -0,0 +1,55 @@
+import React from "react";
+import {shallow} from "enzyme";
+import {findByTestAttr, testStore} from "../../../Utils";
+import toJson from "enzyme-to-json";
+import NewPluginModal from "./NewPluginModal";
+
+
+const setUp = (intialState = {}, props = {}) => {
+ const store = testStore(intialState);
+
+ const component = shallow(
+
+
+
+
+
+
+
+
+
);
+ }
+}
+
+const mapStateToProps = state => ({
+ loadedPlugins: state.plugins.loadedPlugins,
+});
+
+PluginDashboard.propTypes = {
+ loadedPlugins: PropTypes.object.isRequired,
+
+ getPlugins: PropTypes.func.isRequired,
+
+ addPlugin: PropTypes.func.isRequired,
+};
+
+export default connect(mapStateToProps, {getPlugins, addPlugin})(PluginDashboard);
diff --git a/src/views/PluginDashboard/PluginDashboard.test.js b/src/views/PluginDashboard/PluginDashboard.test.js
new file mode 100644
index 000000000..c24a38675
--- /dev/null
+++ b/src/views/PluginDashboard/PluginDashboard.test.js
@@ -0,0 +1,41 @@
+import React from "react";
+import {shallow} from "enzyme";
+import {findByTestAttr, testStore} from "../../../Utils";
+import PluginDashboard from "./PluginDashboard";
+import toJson from "enzyme-to-json";
+
+
+const setUp = (intialState = {}, props = {}) => {
+ const store = testStore(intialState);
+
+ const component = shallow(| Name | +Author | +Description | +Actions | +
|---|
+
+
+
+`;
diff --git a/src/views/PluginDashboard/__snapshots__/PluginDashboard.test.js.snap b/src/views/PluginDashboard/__snapshots__/PluginDashboard.test.js.snap
new file mode 100644
index 000000000..7e8a37a0a
--- /dev/null
+++ b/src/views/PluginDashboard/__snapshots__/PluginDashboard.test.js.snap
@@ -0,0 +1,76 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Plugin Dashboard renders should match snapshot 1`] = `
+
+
+
+
+
+
+
+`;
diff --git a/src/views/PluginDashboard/package.json b/src/views/PluginDashboard/package.json
new file mode 100644
index 000000000..92416c3be
--- /dev/null
+++ b/src/views/PluginDashboard/package.json
@@ -0,0 +1,6 @@
+{
+ "name": "PluginDashboard",
+ "version": "0.0.0",
+ "private": true,
+ "main": "PluginDashboard.js"
+}
diff --git a/src/views/StoreDashboard/PluginPlaceHolder.test.js b/src/views/StoreDashboard/PluginPlaceHolder.test.js
new file mode 100644
index 000000000..5a656c130
--- /dev/null
+++ b/src/views/StoreDashboard/PluginPlaceHolder.test.js
@@ -0,0 +1,47 @@
+import React from "react";
+import {shallow} from "enzyme";
+import toJson from "enzyme-to-json";
+import {findByTestAttr, testStore} from "../../../Utils";
+import PluginPlaceHolderCard from "./PluginPlaceHolderCard";
+
+const setUp = (intialState = {}, props = {}) => {
+ const store = testStore(intialState);
+
+ const component = shallow(| + Name + | ++ Author + | ++ Description + | ++ Actions + | +
|---|
{description}
+ +{longDescription}
+ +By {author}
+ +Loading
); + } else { + const filteredList = pluginsList ? pluginsList.filter(element => { + return ( + element.name.toLowerCase().includes(searchQuery) || + element.description.toLowerCase().includes(searchQuery) || + element.longDescription.toLowerCase().includes(searchQuery) || + element.author.toLowerCase().includes(searchQuery) + ); + }) : []; + element = ( + <> +${element}
+ }
+}
+
+const mapStateToProps = state => ({
+ loadedPlugins: state.plugins.loadedPlugins,
+});
+
+StoreDashboard.propTypes = {
+ loadedPlugins: PropTypes.object.isRequired,
+
+ getPlugins: PropTypes.func.isRequired,
+
+ addPlugin: PropTypes.func.isRequired,
+};
+
+export default connect(mapStateToProps, {getPlugins, addPlugin})(StoreDashboard);
diff --git a/src/views/StoreDashboard/StoreDashboard.test.js b/src/views/StoreDashboard/StoreDashboard.test.js
new file mode 100644
index 000000000..b296ec2ea
--- /dev/null
+++ b/src/views/StoreDashboard/StoreDashboard.test.js
@@ -0,0 +1,41 @@
+import React from "react";
+import {shallow} from "enzyme";
+import {findByTestAttr, testStore} from "../../../Utils";
+import toJson from "enzyme-to-json";
+import StoreDashboard from "./StoreDashboard";
+
+
+const setUp = (intialState = {}, props = {}) => {
+ const store = testStore(intialState);
+
+ const component = shallow(
+
+ + A video player for rclone +
++ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. +
++ By + negative0 +
+ +
+ $
+
+`;
diff --git a/src/views/StoreDashboard/package.json b/src/views/StoreDashboard/package.json
new file mode 100644
index 000000000..20e01ae4f
--- /dev/null
+++ b/src/views/StoreDashboard/package.json
@@ -0,0 +1,6 @@
+{
+ "name": "StoreDashboard",
+ "version": "0.0.0",
+ "private": true,
+ "main": "StoreDashboard.js"
+}
diff --git a/src/views/TerminalDashboard/TerminalDashboard.js b/src/views/TerminalDashboard/TerminalDashboard.js
new file mode 100644
index 000000000..e0044f3ce
--- /dev/null
+++ b/src/views/TerminalDashboard/TerminalDashboard.js
@@ -0,0 +1,57 @@
+import React, {useEffect, useState} from 'react';
+import Iframe from "react-iframe";
+import * as PropTypes from "prop-types";
+import {connect} from "react-redux";
+import {getPlugins} from "../../actions/pluginActions";
+import {filterPluginsByType, getPluginBaseUrl, getPluginsArray} from "../../utils/PluginTools";
+import {getIPAddress} from "../../utils/API/API";
+import pluginTypes from "../../pluginTypes";
+
+function TerminalDashboard(props) {
+ const {
+ getPlugins,
+ loadedPlugins
+ } = props;
+
+ const [pluginUrl, setPluginUrl] = useState("");
+
+ const [pluginArray, setPluginArray] = useState([]);
+
+ useEffect(() => {
+ getPlugins();
+ let availablePlugins = getPluginsArray(loadedPlugins);
+ availablePlugins = filterPluginsByType(availablePlugins, pluginTypes.TERMINAL);
+ setPluginArray(availablePlugins);
+
+ if (availablePlugins.length > 0) {
+ // open the default (first) available plugin
+ setPluginUrl(getPluginBaseUrl(getIPAddress(), availablePlugins[0].name, availablePlugins[0].author));
+ } else {
+
+ }
+
+ }, [getPlugins, loadedPlugins]);
+
+ return (
+ + Loading +
+
+ {(pluginArray.length > 0) ?
+ :
+ );
+}
+
+const mapStateToProps = state => ({
+ loadedPlugins: state.plugins.loadedPlugins,
+});
+
+TerminalDashboard.propTypes = {
+ loadedPlugins: PropTypes.object.isRequired,
+
+ getPlugins: PropTypes.func.isRequired,
+};
+export default connect(mapStateToProps, {getPlugins})(TerminalDashboard);
diff --git a/src/views/TerminalDashboard/package.json b/src/views/TerminalDashboard/package.json
new file mode 100644
index 000000000..37098924a
--- /dev/null
+++ b/src/views/TerminalDashboard/package.json
@@ -0,0 +1,6 @@
+{
+ "name": "Terminal",
+ "version": "0.0.0",
+ "private": true,
+ "main": "TerminalDashboard.js"
+}
Could not find any appropriate plugin to load
} +