Re-organize common components into common folder

src/main/webui/src/app/components/content/GroupEdit.jsx

@@ -14,24 +14,8 @@
  * limitations under the License.
  */
 
-import React, {useState, useEffect} from 'react';
-import {useLocation, useNavigate, useParams} from 'react-router-dom';
-import {PropTypes} from 'prop-types';
-import {StoreEditControlPanel as EditControlPanel} from './StoreControlPanels.jsx';
-import {DisableTimeoutHint, DurationHint, PrefetchHint, Hint} from './Hints.jsx';
-import {PackageTypeSelect} from './CommonPageWidget.jsx';
-// import ViewJsonDebugger from './Debugger.jsx';
-import {Utils} from '../CompUtils.js';
-// import Filters from '../Filters.js';
-import {TimeUtils} from '../../TimeUtils.js';
-import {jsonRest} from '../../RestClient.js';
-
+import React from 'react';
 
 export default function GroupEdit() {
-  const [state, setState] = useState({
-    store: {},
-    storeView: {}
-  });
-
   return <div>This is not implemented yet!</div>;
 }

src/main/webui/src/app/components/content/GroupList.jsx

@@ -14,19 +14,8 @@
  * limitations under the License.
  */
 
-import React, {useEffect, useState} from 'react';
-import {Link} from 'react-router-dom';
-import {PropTypes} from 'prop-types';
-import {Utils} from '../CompUtils.js';
-import ListControl from "./ListControl.jsx";
-import {ListJsonDebugger} from './Debugger.jsx';
-import {LocalURLSection, StoreNameSection} from './CommonPageWidget.jsx';
+import React from 'react';
 
 export default function GruopList() {
-  const [state, setState] = useState({
-    store: {},
-    raw: {},
-    message: ''
-  });
   return <div>This is not implemented yet!</div>;
 }

src/main/webui/src/app/components/content/GroupView.jsx

@@ -14,21 +14,8 @@
  * limitations under the License.
  */
 
-import React, {useEffect, useState} from 'react';
-import {Link, useParams} from 'react-router-dom';
-import {PropTypes} from 'prop-types';
-import {StoreViewControlPanel as ControlPanel} from './StoreControlPanels.jsx';
-import {DisableTimeoutHint} from './Hints.jsx';
-import {Utils} from '../CompUtils.js';
-import {Filters} from '../Filters.js';
-import {TimeUtils} from '../../TimeUtils.js';
-import {jsonGet} from '../../RestClient.js';
+import React from 'react';
 
 export default function GroupView() {
-  const [state, setState] = useState({
-    store: {},
-    raw: {},
-    message: ''
-  });
   return <div>This is not implemented yet!</div>;
 }

src/main/webui/src/app/components/content/HostedEdit.jsx

@@ -14,24 +14,8 @@
  * limitations under the License.
  */
 
-import React, {useState, useEffect} from 'react';
-import {useLocation, useNavigate, useParams} from 'react-router-dom';
-import {PropTypes} from 'prop-types';
-import {StoreEditControlPanel as EditControlPanel} from './StoreControlPanels.jsx';
-import {DisableTimeoutHint, DurationHint, PrefetchHint, Hint} from './Hints.jsx';
-import {PackageTypeSelect} from './CommonPageWidget.jsx';
-// import ViewJsonDebugger from './Debugger.jsx';
-import {Utils} from '../CompUtils.js';
-// import Filters from '../Filters.js';
-import {TimeUtils} from '../../TimeUtils.js';
-import {jsonRest} from '../../RestClient.js';
-
+import React from 'react';
 
 export default function HostedEdit() {
-  const [state, setState] = useState({
-    store: {},
-    storeView: {}
-  });
-
   return <div>This is not implemented yet!</div>;
 }

src/main/webui/src/app/components/content/HostedList.jsx

@@ -14,23 +14,9 @@
  * limitations under the License.
  */
 
-import React, {useEffect, useState} from 'react';
-import ListControl from "./ListControl.jsx";
-import {ListJsonDebugger} from './Debugger.jsx';
-import {Utils} from '../CompUtils.js';
-import {hostedOptionLegend as options} from "../ComponentConstants.js";
-import {StoreListingWidget} from './CommonPageWidget.jsx';
-
+import React from 'react';
 
 
 export default function HostedList() {
-  const [state, setState] = useState({
-    listing: [],
-    rawListing: [],
-    disabledMap: {},
-    enableDebug: false,
-    message: ''
-  });
-
   return <div>This is not implemented yet</div>;
 }

src/main/webui/src/app/components/content/HostedView.jsx

@@ -14,22 +14,8 @@
  * limitations under the License.
  */
 
-import React, {useEffect, useState} from 'react';
-import {useParams} from 'react-router-dom';
-import {PropTypes} from 'prop-types';
-import {StoreViewControlPanel as ControlPanel} from './StoreControlPanels.jsx';
-import {DisableTimeoutHint} from './Hints.jsx';
-// import ViewJsonDebugger from './Debugger.jsx';
-import {Utils} from '../CompUtils.js';
-import {Filters} from '../Filters.js';
-import {TimeUtils} from '../../TimeUtils.js';
-import {jsonGet} from '../../RestClient.js';
+import React from 'react';
 
 export default function HostedView() {
-  const [state, setState] = useState({
-    store: {},
-    raw: {},
-    message: ''
-  });
   return <div>This is not implemented yet!</div>;
 }

src/main/webui/src/app/components/content/RemoteEdit.jsx

@@ -14,12 +14,11 @@
  * limitations under the License.
  */
 
-/* eslint-disable max-lines */
 import React, {useState, useEffect} from 'react';
 import {useLocation, useNavigate, useParams} from 'react-router-dom';
 import {PropTypes} from 'prop-types';
-import {StoreEditControlPanel as EditControlPanel} from './StoreControlPanels.jsx';
-import {DisableTimeoutHint, DurationHint, PrefetchHint, Hint} from './Hints.jsx';
+import {StoreEditControlPanel as EditControlPanel} from './common/StoreControlPanels.jsx';
+import {DisableTimeoutHint, DurationHint, PrefetchHint, Hint} from './common/Hints.jsx';
 // import ViewJsonDebugger from './Debugger.jsx';
 import {Utils} from '../CompUtils.js';
 // import Filters from '../Filters.js';

src/main/webui/src/app/components/content/RemoteList.jsx

@@ -15,11 +15,11 @@
  */
 
 import React, {useEffect, useState} from 'react';
-import {ListJsonDebugger} from './Debugger.jsx';
-import ListControl from "./ListControl.jsx";
+import {ListJsonDebugger} from './common/Debugger.jsx';
+import ListControl from "./common/ListControl.jsx";
 import {remoteOptionLegend as options} from "../ComponentConstants.js";
 import {Utils} from '../CompUtils.js';
-import {StoreListingWidget} from './CommonPageWidget.jsx';
+import {StoreListingWidget} from './common/StoreListingWidget.jsx';
 import {jsonRest} from '../../RestClient.js';
 
 const init = (state, setState) => {

src/main/webui/src/app/components/content/RemoteView.jsx

@@ -17,8 +17,8 @@
 import React, {useState, useEffect} from 'react';
 import {useParams} from 'react-router-dom';
 import {PropTypes} from 'prop-types';
-import {StoreViewControlPanel as ControlPanel} from './StoreControlPanels.jsx';
-import {DisableTimeoutHint, PrefetchHint, Hint, PasswordMask} from './Hints.jsx';
+import {StoreViewControlPanel as ControlPanel} from './common/StoreControlPanels.jsx';
+import {DisableTimeoutHint, PrefetchHint, Hint, PasswordMask} from './common/Hints.jsx';
 // import ViewJsonDebugger from './Debugger.jsx';
 import {Utils} from '../CompUtils.js';
 import {Filters} from '../Filters.js';
@@ -52,8 +52,8 @@ const init = (pkgType, storeName, setState) => {
           store: newStore
         });
       }else{
-        response.text().then(data=>{
-          Utils.logMessage(`Failed to get store data. Error reason: ${response.status}->${response.statusText}`);
+        response.text().then(data => {
+          Utils.logMessage(`Failed to get store data. Error reason: ${response.status}->${data}`);
         });
       }
     };
@@ -68,12 +68,6 @@ const handlers = {
   handleEnable: () => {
     // mock
   },
-  // handleEdit: () => {
-  //   navigate(`/remote/${pkgType}/edit/${storeName}`);
-  // },
-  handleCreate: () => {
-    // mock
-  },
   handleRemove: () => {
     // mock
   }

src/main/webui/src/app/components/content/CommonPageWidget.jsx → src/main/webui/src/app/components/content/common/CommonPageWidget.jsx

@@ -17,7 +17,7 @@
 import React, {Fragment} from 'react';
 import {Link} from 'react-router-dom';
 import {PropTypes} from 'prop-types';
-import {Utils} from '../CompUtils.js';
+import {Utils} from '../../CompUtils.js';
 
 const LocalURLSection = ({storeKey}) => <div className="left-half">
     <label>Local URL:</label>{' '}
@@ -54,15 +54,15 @@ StoreNameSection.propTypes = {
 };
 
 const StoreListingWidget = ({StoreList, DisMap, StoreType}) => {
-  let listing = StoreList;
-  let disMap = DisMap;
+  const listing = StoreList;
+  const disMap = DisMap;
   if(listing && listing.length >0){
     return (
       <div className="content-panel">
         <div className="store-listing">
           {
             listing.map(store => {
-              let storeClass = Utils.isDisabled(store.key, disMap)? "disabled-store":"enabled-store";
+              const storeClass = Utils.isDisabled(store.key, disMap)? "disabled-store":"enabled-store";
               return (
                 <div key={store.key} className="store-listing-item">
                   <StoreNameSection store={store} storeClass={storeClass} />
@@ -98,5 +98,7 @@ StoreListingWidget.propTypes = {
   StoreType: PropTypes.string
 };
 
-
-export {LocalURLSection, CapabilitiesSection, StoreNameSection, StoreListingWidget};
+export {LocalURLSection,
+   CapabilitiesSection,
+   StoreNameSection,
+   StoreListingWidget};

src/main/webui/src/app/components/content/CommonPageWidget.test.js → src/main/webui/src/app/components/content/common/CommonPageWidget.test.js

@@ -15,13 +15,11 @@
  */
 
 import React from "react";
+import {MemoryRouter} from 'react-router-dom';
 import {render, screen, cleanup} from '@testing-library/react';
 import '@testing-library/jest-dom';
-import {LocalURLSection,
-  CapabilitiesSection} from "./CommonPageWidget.jsx";
-import {hostedOptionLegend} from '../ComponentConstants.js';
-
-// const mockData = {};
+import {LocalURLSection, CapabilitiesSection, StoreNameSection} from "./CommonPageWidget.jsx";
+import {hostedOptionLegend} from '../../ComponentConstants.js';
 
 afterEach(() => {
   cleanup();
@@ -43,4 +41,14 @@ describe('CommonPageWidget tests', () => {
     expect(screen.getByText(/\s*R\s*/u)).toBeInTheDocument();
     expect(screen.getByText(/\s*D\s*/u)).toBeInTheDocument();
   });
+
+  it("StoreNameSection", ()=>{
+    // As <Link> is in <StoreNameSection>, needs to use a Router to wrap it
+    render(<MemoryRouter>
+      <StoreNameSection
+       store={{packageType: "maven", type: "remote", name: "central"}}
+       storeClass="test-style"/>
+    </MemoryRouter>);
+    expect(screen.getByText(/maven-central/u)).toBeInTheDocument();
+  });
 });

src/main/webui/src/app/components/content/common/PackageTypeSelect.jsx

@@ -0,0 +1,57 @@
+/**
+ * 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, {useState, useEffect} from 'react';
+import {PropTypes} from 'prop-types';
+import {jsonRest} from '../../RestClient.js';
+
+const PackageTypeSelect = ({pkgType,vauleChangeHandler}) =>{
+  const [state, setState] = useState({
+    pkgTypes: []
+  });
+
+  (function() {
+    const typeUrl = '/api/stats/package-type/keys';
+    useEffect(()=>{
+      const fetchPkgTypes = async () =>{
+        const response = await jsonRest.get(typeUrl);
+        if (response.ok){
+          const pkgTypes = await response.json();
+          setState({pkgTypes});
+        }
+      };
+      fetchPkgTypes();
+    }, []);
+  }());
+
+  return <span>
+    <select onChange={vauleChangeHandler}>
+      {
+        state.pkgTypes.map(type => {
+          if (pkgType === type){
+            return <option key={`pkgType:${type}`} value={type} selected="true">{type}</option>;
+          }
+          return <option key={`pkgType:${type}`} value={type}>{type}</option>;
+        })
+      }
+    </select>
+  </span>;
+};
+
+PackageTypeSelect.propTypes = {
+  pkgType: PropTypes.strings,
+  vauleChangeHandler: PropTypes.func
+};

src/main/webui/src/app/components/content/StoreControlPanels.jsx → src/main/webui/src/app/components/content/common/StoreControlPanels.jsx

@@ -17,8 +17,8 @@
 import React from 'react';
 import {useNavigate} from 'react-router-dom';
 import {PropTypes} from 'prop-types';
-import {Utils} from '../CompUtils';
-import {http} from '../../RestClient';
+import {Utils} from '../../CompUtils';
+import {http} from '../../../RestClient';
 
 const StoreEditControlPanel = ({handleSave, handleCancel, handleRemove}) => <div className="cp-row">
     <button name="save" onClick={handleSave} className="cp-button">Save</button>{'  '}
@@ -71,9 +71,6 @@ const StoreViewControlPanel = function({enabled, storeObj, handleDisable, handle
 StoreViewControlPanel.propTypes={
   enabled: PropTypes.bool,
   storeObj: PropTypes.object,
-  // storeType: PropTypes.string,
-  // pkgType: PropTypes.string,
-  // storeName: PropTypes.string,
   handleDisable: PropTypes.func,
   handleEnable: PropTypes.func
 };