From af693b4c8f28b9b65bf9d2be18052c39067b6ca1 Mon Sep 17 00:00:00 2001
From: Gang Li <ligangty@users.noreply.github.com>
Date: Thu, 16 Nov 2023 14:46:49 +0800
Subject: [PATCH] Re-organize: move pages conponent to dedicated folders

---
 .../webui/src/app/components/content/Main.jsx |  18 +-
 .../components/content/common/ListControl.jsx |  10 +-
 .../content/common/StoreBasicSections.jsx     | 117 +++++++++
 .../content/common/StoreControlPanels.jsx     |  92 +++----
 .../content/{ => group}/GroupEdit.jsx         |   0
 .../content/{ => group}/GroupList.jsx         |   0
 .../content/{ => group}/GroupView.jsx         |   0
 .../content/{ => hosted}/HostedEdit.jsx       |   0
 .../content/{ => hosted}/HostedList.jsx       |   0
 .../content/{ => hosted}/HostedView.jsx       |   0
 .../content/{ => remote}/RemoteEdit.jsx       |  12 +-
 .../content/{ => remote}/RemoteList.jsx       |  12 +-
 .../content/{ => remote}/RemoteView.jsx       | 230 +++++-------------
 13 files changed, 254 insertions(+), 237 deletions(-)
 create mode 100644 src/main/webui/src/app/components/content/common/StoreBasicSections.jsx
 rename src/main/webui/src/app/components/content/{ => group}/GroupEdit.jsx (100%)
 rename src/main/webui/src/app/components/content/{ => group}/GroupList.jsx (100%)
 rename src/main/webui/src/app/components/content/{ => group}/GroupView.jsx (100%)
 rename src/main/webui/src/app/components/content/{ => hosted}/HostedEdit.jsx (100%)
 rename src/main/webui/src/app/components/content/{ => hosted}/HostedList.jsx (100%)
 rename src/main/webui/src/app/components/content/{ => hosted}/HostedView.jsx (100%)
 rename src/main/webui/src/app/components/content/{ => remote}/RemoteEdit.jsx (97%)
 rename src/main/webui/src/app/components/content/{ => remote}/RemoteList.jsx (89%)
 rename src/main/webui/src/app/components/content/{ => remote}/RemoteView.jsx (66%)

diff --git a/src/main/webui/src/app/components/content/Main.jsx b/src/main/webui/src/app/components/content/Main.jsx
index 803d903..dc0d008 100644
--- a/src/main/webui/src/app/components/content/Main.jsx
+++ b/src/main/webui/src/app/components/content/Main.jsx
@@ -16,15 +16,15 @@
 
 import React from 'react';
 import {Route, Routes} from 'react-router-dom';
-import RemoteList from './RemoteList.jsx';
-import HostedList from './HostedList.jsx';
-import GroupList from './GroupList.jsx';
-import RemoteView from './RemoteView.jsx';
-import HostedView from './HostedView.jsx';
-import GroupView from './GroupView.jsx';
-import RemoteEdit from './RemoteEdit.jsx';
-import GroupEdit from './GroupEdit.jsx';
-import HostedEdit from './HostedEdit.jsx';
+import RemoteList from './remote/RemoteList.jsx';
+import HostedList from './hosted/HostedList.jsx';
+import GroupList from './group/GroupList.jsx';
+import RemoteView from './remote/RemoteView.jsx';
+import HostedView from './hosted/HostedView.jsx';
+import GroupView from './group/GroupView.jsx';
+import RemoteEdit from './remote/RemoteEdit.jsx';
+import GroupEdit from './group/GroupEdit.jsx';
+import HostedEdit from './hosted/HostedEdit.jsx';
 
 // const browseCompatible=`<!--[if lt IE 7]>
 //     <p className="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
diff --git a/src/main/webui/src/app/components/content/common/ListControl.jsx b/src/main/webui/src/app/components/content/common/ListControl.jsx
index c5cb744..5a40bf8 100644
--- a/src/main/webui/src/app/components/content/common/ListControl.jsx
+++ b/src/main/webui/src/app/components/content/common/ListControl.jsx
@@ -57,11 +57,11 @@ export default function ListControl({handleCreateNew, useHideAll, handleHideAll,
               <ul>
                 {
                   legends.map(option => <li key={option.title}>
-                          <div>
-                            <span className="key">{option.icon} </span>
-                            <span>{option.title}</span>
-                          </div>
-                        </li>)
+                    <div>
+                      <span className="key">{option.icon} </span>
+                      <span>{option.title}</span>
+                    </div>
+                  </li>)
                 }
               </ul>
             </div>
diff --git a/src/main/webui/src/app/components/content/common/StoreBasicSections.jsx b/src/main/webui/src/app/components/content/common/StoreBasicSections.jsx
new file mode 100644
index 0000000..ff7fe3e
--- /dev/null
+++ b/src/main/webui/src/app/components/content/common/StoreBasicSections.jsx
@@ -0,0 +1,117 @@
+/**
+ * Copyright (C) 2023 Red Hat, Inc. (https://github.com/Commonjava/indy-ui-service)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import {PropTypes} from 'prop-types';
+import {DisableTimeoutHint, PrefetchHint, Hint} from './Hints.jsx';
+import {Filters} from '../../../utils/Filters.js';
+import {Utils} from '../../../utils/AppUtils.js';
+import {TimeUtils} from '../../../utils/TimeUtils.js';
+
+export const StoreViewBasicSection = ({store})=>{
+  let authoritativeIndexHints = "Make the content index authoritative to this repository";
+  if(store.type==="hosted"){
+    authoritativeIndexHints += " (when readonly, this will be enabled automatically)";
+  }
+  return <div className="fieldset">
+    <div className="detail-field">
+        <label>Package Type:</label>
+        <span className="key">{store.packageType}</span>
+    </div>
+    <div className="detail-field">
+        <label>Name:</label>
+        <span className="key">{store.name}</span>
+    </div>
+    <div className="detail-field">
+        <span>{Filters.checkmark(!store.disabled)}</span>
+        <label>Enabled?</label>
+        {
+          store.disabled && store.disableExpiration &&
+          <span className="hint">Set to automatically re-enable at {TimeUtils.timestampToDateFormat(store.disableExpiration)}</span>
+        }
+    </div>
+    <div className="detail-field">
+      <span>{Filters.checkmark(store.authoritative_index)}</span>
+      <label>Authoritative index enabled?</label>
+      {
+        (store.type==="remote" || store.type==="hosted") && !store.authoritative_index &&
+        <span className="hint">{authoritativeIndexHints}</span>
+      }
+    </div>
+    <div className="sub-fields">
+      <div className="detail-field">
+        <label>Disable Timeout:</label>
+        <span>{store.disable_timeout}</span>
+        <DisableTimeoutHint />
+      </div>
+    </div>
+    <div className="detail-field">
+      <label>Local URL:</label>
+      {
+        // TODO: is this store.demo still available now?
+        store.demo ?
+        <span>{Utils.storeHref(store.key)}</span> :
+        <span><a href={Utils.storeHref(store.key)} target="_new">{Utils.storeHref(store.key)}</a></span>
+      }
+    </div>
+    <div className="detail-field">
+      <label>Remote URL:</label>
+      <span><a href={store.url} target="_new">{store.url}</a></span>
+    </div>
+    <div className="sub-fields">
+      <div className="detail-field">
+        <span>{Filters.checkmark(!store.is_passthrough)}</span>
+        <label>Allow Content Caching</label>
+        <span><Hint hintKey="passthrough" /></span>
+      </div>
+      {
+        !store.is_passthrough &&
+
+          <div>
+            <div className="detail-field">
+              <label>Content Cache Timeout:</label>
+              <span>{TimeUtils.secondsToDuration(store.cache_timeout_seconds)}</span>
+            </div>
+            <div className="detail-field">
+              <label>Metadata Cache Timeout:</label>
+              <span>{TimeUtils.secondsToDuration(store.metadata_timeout_seconds, true)}</span>
+            </div>
+          </div>
+
+      }
+    </div>
+
+    <div className="sub-fields">
+      <div className="detail-field">
+        <label>Pre-fetching Priority:</label>
+        <span>{store.prefetch_priority}</span>
+        <PrefetchHint />
+      </div>
+      <div className="detail-field">
+        <span>{Filters.checkmark(store.prefetch_rescan)}</span>
+        <label>Allow Pre-fetching Rescan?</label>
+      </div>
+      <div className="detail-field">
+        <label>Pre-fetching Listing Type:</label>
+        <span>{store.prefetch_listing_type}</span>
+      </div>
+    </div>
+  </div>;
+};
+
+StoreViewBasicSection.propTypes = {
+  store: PropTypes.object.isRequired
+};
diff --git a/src/main/webui/src/app/components/content/common/StoreControlPanels.jsx b/src/main/webui/src/app/components/content/common/StoreControlPanels.jsx
index 791b1c9..27559f8 100644
--- a/src/main/webui/src/app/components/content/common/StoreControlPanels.jsx
+++ b/src/main/webui/src/app/components/content/common/StoreControlPanels.jsx
@@ -20,6 +20,51 @@ import {PropTypes} from 'prop-types';
 import {Utils} from '../../../utils/AppUtils';
 import {jsonRest,http} from '../../../utils/RestClient';
 
+const StoreViewControlPanel = function({store}){
+  const handleEnable = () =>{
+    // TODO: need to implement
+  };
+  const handleDisable = () =>{
+    // TODO: need to implement
+  };
+  const [enableText, enableHandler] = store.disabled?["Enable",handleEnable]:["Disable",handleDisable];
+  const navigate = useNavigate();
+
+  const [pkgType, storeType, storeName] = [store.packageType, store.type, store.name];
+  const storeUrl = `/api/admin/stores/${pkgType}/${storeType}/${storeName}`;
+  const handleRemove = async ()=>{
+    const response = await http.delete(storeUrl);
+    if(!response.ok && response.status >= 400){
+      // TODO: Some other way to handle errors?
+      response.text().then(error=>Utils.logMessage(error));
+    }
+    if(response.status===204){
+      // TODO: Some other way to show deletion success?
+      Utils.logMessage("Store deleted.");
+    }
+    navigate(`/${store.type}`);
+  };
+
+  return(
+    <div className="cp-row-group">
+      <div className="cp-row">
+        <button onClick={enableHandler}>{enableText}</button>
+      </div>
+      <div className="cp-row">
+        <button onClick={()=>navigate(`/${storeType}/${pkgType}/edit/${storeName}`)}>Edit</button>{'  '}
+        <button onClick={()=>navigate(`/${storeType}/new`)}>New...</button>{'  '}
+        <button name="del" onClick={handleRemove} className="del-button cp-button">
+          Delete
+        </button>
+      </div>
+    </div>
+  );
+};
+
+StoreViewControlPanel.propTypes={
+  store: PropTypes.object
+};
+
 const StoreEditControlPanel = ({mode, store}) =>{
   const navigate = useNavigate();
   const handleSave = () => {
@@ -84,49 +129,4 @@ StoreEditControlPanel.propTypes={
   store: PropTypes.object
 };
 
-const StoreViewControlPanel = function({store}){
-  const handleEnable = () =>{
-    // TODO: need to implement
-  };
-  const handleDisable = () =>{
-    // TODO: need to implement
-  };
-  const [enableText, enableHandler] = store.disabled?["Enable",handleEnable]:["Disable",handleDisable];
-  const navigate = useNavigate();
-
-  const [pkgType, storeType, storeName] = [store.packageType, store.type, store.name];
-  const storeUrl = `/api/admin/stores/${pkgType}/${storeType}/${storeName}`;
-  const handleRemove = async ()=>{
-    const response = await http.delete(storeUrl);
-    if(!response.ok && response.status >= 400){
-      // TODO: Some other way to handle errors?
-      response.text().then(error=>Utils.logMessage(error));
-    }
-    if(response.status===204){
-      // TODO: Some other way to show deletion success?
-      Utils.logMessage("Store deleted.");
-    }
-    navigate(`/${store.type}`);
-  };
-
-  return(
-    <div className="cp-row-group">
-      <div className="cp-row">
-        <button onClick={enableHandler}>{enableText}</button>
-      </div>
-      <div className="cp-row">
-        <button onClick={()=>navigate(`/${storeType}/${pkgType}/edit/${storeName}`)}>Edit</button>{'  '}
-        <button onClick={()=>navigate(`/${storeType}/new`)}>New...</button>{'  '}
-        <button name="del" onClick={handleRemove} className="del-button cp-button">
-          Delete
-        </button>
-      </div>
-    </div>
-  );
-};
-
-StoreViewControlPanel.propTypes={
-  store: PropTypes.object
-};
-
-export {StoreEditControlPanel, StoreViewControlPanel};
+export {StoreViewControlPanel, StoreEditControlPanel};
diff --git a/src/main/webui/src/app/components/content/GroupEdit.jsx b/src/main/webui/src/app/components/content/group/GroupEdit.jsx
similarity index 100%
rename from src/main/webui/src/app/components/content/GroupEdit.jsx
rename to src/main/webui/src/app/components/content/group/GroupEdit.jsx
diff --git a/src/main/webui/src/app/components/content/GroupList.jsx b/src/main/webui/src/app/components/content/group/GroupList.jsx
similarity index 100%
rename from src/main/webui/src/app/components/content/GroupList.jsx
rename to src/main/webui/src/app/components/content/group/GroupList.jsx
diff --git a/src/main/webui/src/app/components/content/GroupView.jsx b/src/main/webui/src/app/components/content/group/GroupView.jsx
similarity index 100%
rename from src/main/webui/src/app/components/content/GroupView.jsx
rename to src/main/webui/src/app/components/content/group/GroupView.jsx
diff --git a/src/main/webui/src/app/components/content/HostedEdit.jsx b/src/main/webui/src/app/components/content/hosted/HostedEdit.jsx
similarity index 100%
rename from src/main/webui/src/app/components/content/HostedEdit.jsx
rename to src/main/webui/src/app/components/content/hosted/HostedEdit.jsx
diff --git a/src/main/webui/src/app/components/content/HostedList.jsx b/src/main/webui/src/app/components/content/hosted/HostedList.jsx
similarity index 100%
rename from src/main/webui/src/app/components/content/HostedList.jsx
rename to src/main/webui/src/app/components/content/hosted/HostedList.jsx
diff --git a/src/main/webui/src/app/components/content/HostedView.jsx b/src/main/webui/src/app/components/content/hosted/HostedView.jsx
similarity index 100%
rename from src/main/webui/src/app/components/content/HostedView.jsx
rename to src/main/webui/src/app/components/content/hosted/HostedView.jsx
diff --git a/src/main/webui/src/app/components/content/RemoteEdit.jsx b/src/main/webui/src/app/components/content/remote/RemoteEdit.jsx
similarity index 97%
rename from src/main/webui/src/app/components/content/RemoteEdit.jsx
rename to src/main/webui/src/app/components/content/remote/RemoteEdit.jsx
index a915ac3..d9ae16f 100644
--- a/src/main/webui/src/app/components/content/RemoteEdit.jsx
+++ b/src/main/webui/src/app/components/content/remote/RemoteEdit.jsx
@@ -17,13 +17,13 @@
 import React, {useState, useEffect} from 'react';
 import {useLocation, useParams} from 'react-router-dom';
 import {PropTypes} from 'prop-types';
-import {StoreEditControlPanel as EditControlPanel} from './common/StoreControlPanels.jsx';
-import {DisableTimeoutHint, DurationHint, PrefetchHint, Hint} from './common/Hints.jsx';
-import {PackageTypeSelect} from './common/PackageTypeSelect.jsx';
+import {StoreEditControlPanel as EditControlPanel} from '../common/StoreControlPanels.jsx';
+import {DisableTimeoutHint, DurationHint, PrefetchHint, Hint} from '../common/Hints.jsx';
+import {PackageTypeSelect} from '../common/PackageTypeSelect.jsx';
 // import ViewJsonDebugger from './Debugger.jsx';
-import {Utils} from '../../utils/AppUtils.js';
-import {TimeUtils} from '../../utils/TimeUtils.js';
-import {jsonRest} from '../../utils/RestClient.js';
+import {Utils} from '../../../utils/AppUtils.js';
+import {TimeUtils} from '../../../utils/TimeUtils.js';
+import {jsonRest} from '../../../utils/RestClient.js';
 
 const init = (pkgType, storeName, setState) => {
   const getUrl = `/api/admin/stores/${pkgType}/remote/${storeName}`;
diff --git a/src/main/webui/src/app/components/content/RemoteList.jsx b/src/main/webui/src/app/components/content/remote/RemoteList.jsx
similarity index 89%
rename from src/main/webui/src/app/components/content/RemoteList.jsx
rename to src/main/webui/src/app/components/content/remote/RemoteList.jsx
index 9784122..a6064d7 100644
--- a/src/main/webui/src/app/components/content/RemoteList.jsx
+++ b/src/main/webui/src/app/components/content/remote/RemoteList.jsx
@@ -15,12 +15,12 @@
  */
 
 import React, {useEffect, useState} from 'react';
-import {ListJsonDebugger} from './common/Debugger.jsx';
-import ListControl from "./common/ListControl.jsx";
-import {remoteOptionLegend as options} from "../ComponentConstants.js";
-import {StoreListingWidget} from './common/StoreListingWidget.jsx';
-import {Utils} from '../../utils/AppUtils.js';
-import {jsonRest} from '../../utils/RestClient.js';
+import {ListJsonDebugger} from '../common/Debugger.jsx';
+import ListControl from "../common/ListControl.jsx";
+import {remoteOptionLegend as options} from "../../ComponentConstants.js";
+import {StoreListingWidget} from '../common/StoreListingWidget.jsx';
+import {Utils} from '../../../utils/AppUtils.js';
+import {jsonRest} from '../../../utils/RestClient.js';
 
 const init = (state, setState) => {
   useEffect(()=>{
diff --git a/src/main/webui/src/app/components/content/RemoteView.jsx b/src/main/webui/src/app/components/content/remote/RemoteView.jsx
similarity index 66%
rename from src/main/webui/src/app/components/content/RemoteView.jsx
rename to src/main/webui/src/app/components/content/remote/RemoteView.jsx
index bc616bc..54a3954 100644
--- a/src/main/webui/src/app/components/content/RemoteView.jsx
+++ b/src/main/webui/src/app/components/content/remote/RemoteView.jsx
@@ -17,13 +17,14 @@
 import React, {useState, useEffect} from 'react';
 import {useParams} from 'react-router-dom';
 import {PropTypes} from 'prop-types';
-import {StoreViewControlPanel as ControlPanel} from './common/StoreControlPanels.jsx';
-import {DisableTimeoutHint, PrefetchHint, Hint, PasswordMask} from './common/Hints.jsx';
+import {StoreViewControlPanel as ControlPanel} from '../common/StoreControlPanels.jsx';
+import {Hint, PasswordMask} from '../common/Hints.jsx';
+import {StoreViewBasicSection as BasicSection} from '../common/StoreBasicSections.jsx';
 // import ViewJsonDebugger from './Debugger.jsx';
-import {Filters} from '../../utils/Filters.js';
-import {Utils} from '../../utils/AppUtils.js';
-import {TimeUtils} from '../../utils/TimeUtils.js';
-import {jsonRest} from '../../utils/RestClient.js';
+import {Filters} from '../../../utils/Filters.js';
+import {Utils} from '../../../utils/AppUtils.js';
+import {TimeUtils} from '../../../utils/TimeUtils.js';
+import {jsonRest} from '../../../utils/RestClient.js';
 
 const init = (pkgType, storeName, setState) => {
   const storeUrl = `/api/admin/stores/${pkgType}/remote/${storeName}`;
@@ -61,165 +62,6 @@ const init = (pkgType, storeName, setState) => {
     fetchStore();
   }, []);
 };
-const handlers = {
-  handleDisable: () => {
-    // mock
-  },
-  handleEnable: () => {
-    // mock
-  },
-  handleRemove: () => {
-    // mock
-  }
-};
-
-export default function RemoteView() {
-  const [state, setState] = useState({
-    store: {},
-    raw: {},
-    message: ''
-  });
-  const {packageType, name} = useParams();
-  init(packageType, name, setState);
-  const store = state.store;
-  if(!Utils.isEmptyObj(store)) {
-    return (
-      <div className="container-fluid">
-        <div className="control-panel">
-          <ControlPanel store={store} />
-        </div>
-
-        <div className="content-panel">
-          <div className="fieldset-caption">Basics</div>
-          <BasicSection store={store} />
-
-          <div className="fieldset-caption">Description</div>
-          <div className="fieldset">
-            <div className="text-field">
-              <textarea readOnly className="text-description" value={store.description} />
-            </div>
-          </div>
-
-          <div className="fieldset-caption">Capabilities</div>
-          <div className="fieldset">
-            {
-              (store.allow_releases || store.allow_snapshots) &&
-
-                <div>
-                  <div className="detail-field">
-                    <span>{Filters.checkmark(store.allow_releases)}</span>
-                    <label>Allow Releases</label>
-                  </div>
-                  <div className="detail-field">
-                    <span>{Filters.checkmark(store.allow_snapshots)}</span>
-                    <label>Snapshots Allowed?</label>
-                  </div>
-                </div>
-
-            }
-          </div>
-
-          <div className="fieldset-caption">Remote Access</div>
-          <RemoteAccessSection store={store} />
-        </div>
-        {
-          // <ViewJsonDebugger enableDebug={false} storeJson={store} rawJson={raw} />
-        }
-      </div>
-    );
-  }
-  return null;
-}
-
-// eslint-disable-next-line max-lines-per-function
-const BasicSection = ({store})=> <div className="fieldset">
-    <div className="detail-field">
-        <label>Package Type:</label>
-        <span className="key">{store.packageType}</span>
-    </div>
-    <div className="detail-field">
-        <label>Name:</label>
-        <span className="key">{store.name}</span>
-    </div>
-    <div className="detail-field">
-        <span>{Filters.checkmark(!store.disabled)}</span>
-        <label>Enabled?</label>
-        {
-          store.disabled && store.disableExpiration &&
-          <span className="hint">Set to automatically re-enable at {TimeUtils.timestampToDateFormat(store.disableExpiration)}</span>
-        }
-    </div>
-    <div className="detail-field">
-      <span>{Filters.checkmark(store.authoritative_index)}</span>
-      <label>Authoritative index enabled?</label>
-      {
-        !store.authoritative_index &&
-        <span className="hint">Make the content index authoritative to this repository</span>
-      }
-    </div>
-    <div className="sub-fields">
-      <div className="detail-field">
-        <label>Disable Timeout:</label>
-        <span>{store.disable_timeout}</span>
-        <DisableTimeoutHint />
-      </div>
-    </div>
-    <div className="detail-field">
-      <label>Local URL:</label>
-      {
-        // TODO: is this store.demo still available now?
-        store.demo ?
-        <span>{Utils.storeHref(store.key)}</span> :
-        <span><a href={Utils.storeHref(store.key)} target="_new">{Utils.storeHref(store.key)}</a></span>
-      }
-    </div>
-    <div className="detail-field">
-      <label>Remote URL:</label>
-      <span><a href={store.url} target="_new">{store.url}</a></span>
-    </div>
-    <div className="sub-fields">
-      <div className="detail-field">
-        <span>{Filters.checkmark(!store.is_passthrough)}</span>
-        <label>Allow Content Caching</label>
-        <span><Hint hintKey="passthrough" /></span>
-      </div>
-      {
-        !store.is_passthrough &&
-
-          <div>
-            <div className="detail-field">
-              <label>Content Cache Timeout:</label>
-              <span>{TimeUtils.secondsToDuration(store.cache_timeout_seconds)}</span>
-            </div>
-            <div className="detail-field">
-              <label>Metadata Cache Timeout:</label>
-              <span>{TimeUtils.secondsToDuration(store.metadata_timeout_seconds, true)}</span>
-            </div>
-          </div>
-
-      }
-    </div>
-
-    <div className="sub-fields">
-      <div className="detail-field">
-        <label>Pre-fetching Priority:</label>
-        <span>{store.prefetch_priority}</span>
-        <PrefetchHint />
-      </div>
-      <div className="detail-field">
-        <span>{Filters.checkmark(store.prefetch_rescan)}</span>
-        <label>Allow Pre-fetching Rescan?</label>
-      </div>
-      <div className="detail-field">
-        <label>Pre-fetching Listing Type:</label>
-        <span>{store.prefetch_listing_type}</span>
-      </div>
-    </div>
-  </div>;
-
-BasicSection.propTypes = {
-  store: PropTypes.object.isRequired
-};
 
 const RemoteAccessSection = ({store})=> <div className="fieldset">
   <div className="detail-field">
@@ -341,3 +183,61 @@ const RemoteAccessSection = ({store})=> <div className="fieldset">
 RemoteAccessSection.propTypes={
   store: PropTypes.object.isRequired
 };
+
+export default function RemoteView() {
+  const [state, setState] = useState({
+    store: {},
+    raw: {},
+    message: ''
+  });
+  const {packageType, name} = useParams();
+  init(packageType, name, setState);
+  const store = state.store;
+  if(!Utils.isEmptyObj(store)) {
+    return (
+      <div className="container-fluid">
+        <div className="control-panel">
+          <ControlPanel store={store} />
+        </div>
+
+        <div className="content-panel">
+          <div className="fieldset-caption">Basics</div>
+          <BasicSection store={store} />
+
+          <div className="fieldset-caption">Description</div>
+          <div className="fieldset">
+            <div className="text-field">
+              <textarea readOnly className="text-description" value={store.description} />
+            </div>
+          </div>
+
+          <div className="fieldset-caption">Capabilities</div>
+          <div className="fieldset">
+            {
+              (store.allow_releases || store.allow_snapshots) &&
+
+                <div>
+                  <div className="detail-field">
+                    <span>{Filters.checkmark(store.allow_releases)}</span>
+                    <label>Allow Releases</label>
+                  </div>
+                  <div className="detail-field">
+                    <span>{Filters.checkmark(store.allow_snapshots)}</span>
+                    <label>Snapshots Allowed?</label>
+                  </div>
+                </div>
+
+            }
+          </div>
+
+          <div className="fieldset-caption">Remote Access</div>
+          <RemoteAccessSection store={store} />
+        </div>
+        {
+          // <ViewJsonDebugger enableDebug={false} storeJson={store} rawJson={raw} />
+        }
+      </div>
+    );
+  }
+  return null;
+}