about dialog for selected components (incomplete)

global/code/Request.class.php

@@ -0,0 +1,23 @@
+<?php
+
+namespace FormTools;
+
+
+
+class Request
+{
+
+	// extremely simple first kick at the can for getting a file from a URL
+    public static function getUrl($url)
+	{
+		$ch = curl_init();
+		curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
+		curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
+		curl_setopt($ch, CURLOPT_URL, $url);
+		$result = curl_exec($ch);
+		curl_close($ch);
+
+		return $result;
+	}
+
+}

global/code/actions-react.php

@@ -0,0 +1,67 @@
+<?php
+
+/**
+ * This is used for the new (React) client-side code. It provides as much info of the current user, depending on whether
+ * they're logged in or not, plus localization strings and other general info.
+ */
+require_once("../library.php");
+
+use FormTools\Core;
+use FormTools\Request;
+
+Core::init();
+
+$data = array(
+	"error" => "unknown_action"
+);
+
+switch ($_GET["action"]) {
+	case "init":
+		$data = array(
+			"is_logged_in" => Core::$user->isLoggedIn(),
+			"i18n" => Core::$L,
+			"constants" => array(
+				"root_dir" => Core::getRootDir(),
+				"root_url" => Core::getRootUrl(),
+				"data_source_url" => Core::getFormToolsDataSource(),
+				"core_version" => Core::getCoreVersion()
+			)
+		);
+		if ($data["is_logged_in"]) {
+			$data["user"] = array(
+				"account_id" => Core::$user->getAccountId(),
+				"username" => Core::$user->getUsername()
+			);
+		}
+		break;
+
+	case "get_component_info":
+		if (!in_array($_GET["type"], array("core", "api", "module", "theme")) || empty($_GET["component"]) || !is_string($_GET["component"])) {
+			break;
+		}
+
+		$url = Core::getFormToolsDataSource();
+		switch ($_GET["type"]) {
+			case "core":
+				$url .= "/core/core.json";
+				break;
+			case "api":
+				$url .= "/api/api.json";
+				break;
+			case "module":
+				$url .= "/modules/{$_GET["component"]}.json";
+				break;
+			case "theme":
+				$url .= "/themes/{$_GET["component"]}.json";
+				break;
+		}
+
+		$data = json_decode(Request::getUrl($url));
+		break;
+}
+
+
+header("Content-Type: text/javascript");
+header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
+
+echo json_encode($data);

global/code/actions.php

@@ -55,12 +55,6 @@
 }
 
 switch ($action) {
-
-	//
-	case "get_component_info":
-
-		break;
-
 	case "test_folder_permissions":
 		list($success, $message) = Files::checkUploadFolder($request["file_upload_dir"]);
 		$success = ($success) ? 1 : 0;

global/library.php

@@ -37,7 +37,7 @@
 require_once(__DIR__ . "/code/Packages.class.php");
 require_once(__DIR__ . "/code/Pages.class.php");
 require_once(__DIR__ . "/code/polyfills.php");
-require_once(__DIR__ . "/code/RequestsTransport.interface.php");
+require_once(__DIR__ . "/code/Request.class.php");
 require_once(__DIR__ . "/code/Schemas.class.php");
 require_once(__DIR__ . "/code/Sessions.class.php");
 require_once(__DIR__ . "/code/Settings.class.php");

package.json

@@ -34,6 +34,7 @@
     "grunt-sass": "^3.0.1",
     "load-grunt-tasks": "^4.0.0",
     "mini-css-extract-plugin": "^0.4.1",
+    "moment": "^2.22.2",
     "node-sass": "^4.9.3",
     "postcss-loader": "^3.0.0",
     "prop-types": "^15.6.1",
@@ -45,6 +46,7 @@
   },
   "dependencies": {
     "@material-ui/core": "^3.0.0",
+    "@material-ui/icons": "^3.0.1",
     "react": "^16.3.2",
     "react-dom": "^16.3.2",
     "react-redux": "^5.0.7",

src/scripts/components/CompatibleComponents/Changelog.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './Changelog.scss';
+import { formatDatetime } from '../../core/helpers';
+import IconButton from '@material-ui/core/IconButton';
+import DeleteIcon from '@material-ui/icons/Delete';
+import VersionBadge from './VersionBadge';
+
+
+const Changelog = ({ data }) => (
+    <table className={styles.changelog}>
+        <tbody>
+        <tr>
+            <th className={styles.colVersion}>Version</th>
+            <th className={styles.colReleaseDate}>Release Date</th>
+            <th>Release Notes</th>
+            <th className={styles.colGithubMilestone}></th>
+        </tr>
+        {data.map(({ version, release_date, desc }, i) => (
+            <tr key={i}>
+                <td className={styles.colVersion}>
+                    <VersionBadge label={version} />
+                </td>
+                <td className={styles.colReleaseDate}>{formatDatetime(release_date)}</td>
+                <td>{desc}</td>
+                <td>
+                    {/*<IconButton aria-label="Delete">*/}
+                        {/*<DeleteIcon />*/}
+                    {/*</IconButton>*/}
+                </td>
+            </tr>
+        ))}
+        </tbody>
+    </table>
+);
+
+Changelog.propTypes = {
+    data: PropTypes.array
+};
+
+export default Changelog;

src/scripts/components/CompatibleComponents/Changelog.scss

@@ -0,0 +1,16 @@
+.changelog {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+
+  .colVersion {
+    width: 80px;
+  }
+  .colReleaseDate {
+    width: 180px;
+  }
+  .colGithubMilestone {
+    width: 30px;
+  }
+}

src/scripts/components/CompatibleComponents/CompatibleComponents.jsx

@@ -4,34 +4,23 @@ import * as helpers from '../../core/helpers';
 import ComponentList from '../ComponentList/ComponentList';
 import EditableComponentList from '../EditableComponentList/EditableComponentList';
 import styles from './CompatibleComponents.scss';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogContentText from '@material-ui/core/DialogContentText';
-import DialogTitle from '@material-ui/core/DialogTitle';
+import ScrollableDialog from '../Dialogs/ScrollableDialog';
+import Changelog from './Changelog';
 
-class CompatibleComponents extends Component {
-
-    getComponentInfoModal () {
-        const { isShowingComponentInfoModal, onCloseComponentInfo } = this.props;
 
-        const style = {
-            top: '50%',
-            left: '50%',
-            width: 600,
-            height: 400,
-            transform: 'translate(-50%, -$50%)'
-        };
+class CompatibleComponents extends Component {
 
+    getModal () {
+        const { isShowingComponentInfoModal, onCloseComponentInfo, modalInfo, i18n } = this.props;
         return (
-            <Dialog
+            <ScrollableDialog
                 open={isShowingComponentInfoModal}
-                onClose={onCloseComponentInfo}>
-                <div style={style}>
-                    ...!
-                </div>
-            </Dialog>
-        );
+                onClose={onCloseComponentInfo}
+                isLoading={!modalInfo.loaded}
+                title={modalInfo.title}
+                desc={modalInfo.desc}
+                content={<Changelog data={modalInfo.data} />} />
+        )
     }
 
 	getSelectedComponentList () {
@@ -48,7 +37,7 @@ class CompatibleComponents extends Component {
 					needs.
 				</p>
 
-                {this.getComponentInfoModal()}
+                {this.getModal()}
 
 				<ComponentList components={selectedComponents} i18n={i18n} isEditing={false}
                     onShowComponentInfo={onShowComponentInfo} />
@@ -73,6 +62,8 @@ class CompatibleComponents extends Component {
 					Selected Components &raquo; Customize
                 </h2>
 
+                {this.getModal()}
+
                 <EditableComponentList
                     selectedComponentTypeSection={selectedComponentTypeSection}
                     onSelectComponentSection={onSelectComponentTypeSection}

src/scripts/components/CompatibleComponents/VersionBadge.jsx

@@ -0,0 +1,9 @@
+import styles from './VersionBadge.scss';
+
+const VersionBadge = ({ label }) => (
+    <span className={`badge ${styles.badge}`}>
+        {label}
+    </span>
+);
+
+export default VersionBadge;

src/scripts/components/CompatibleComponents/VersionBadge.scss

@@ -0,0 +1,9 @@
+.badge {
+  display: inline-block;
+  padding: 0 6px;
+  border-radius: 3px;
+  font-size: 9px;
+  line-height: 16px;
+  background-color: #01a0e4;
+  color: white;
+}