add listgroupitem component

libs/remix-ui/plugin-manager/src/customTypes.ts

@@ -5,3 +5,16 @@ export type PluginManagerSettings = {
   settings: () => HTMLElement
   render: () => HTMLElement
 }
+
+export type Profile = {
+  name: 'pluginManager',
+  displayName: 'Plugin manager',
+  methods: [],
+  events: [],
+  icon: 'assets/img/pluginManager.webp',
+  description: 'Start/stop services, modules and plugins',
+  kind: 'settings',
+  location: 'sidePanel',
+  documentation: 'https://remix-ide.readthedocs.io/en/latest/plugin_manager.html',
+  version: string
+}

libs/remix-ui/plugin-manager/src/lib/components/listGroupItem.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { Profile } from '../../customTypes'
+
+interface ListGroupItemProps {
+  activeProfiles: Profile[]
+  inactiveProfiles: Profile[]
+  renderItem: (profile: Profile) => void
+}
+
+function ListGroupItem ({ activeProfiles, inactiveProfiles, renderItem }: ListGroupItemProps) {
+  return (
+    <div className="list-group list-group-flush plugins-list-group" data-id="pluginManagerComponentActiveTile">
+      { activeProfiles.length > 0
+        ? activeProfiles.map(profile => renderItem(profile))
+        : inactiveProfiles.map(profile => renderItem(profile))
+      }
+    </div>
+  )
+}
+
+export default ListGroupItem

libs/remix-ui/plugin-manager/src/lib/components/rootView.tsx

@@ -1,23 +1,38 @@
 import React from 'react'
+import { Profile } from '../../customTypes'
 import ActiveTile from './activeTile'
+import ListGroupItem from './listGroupItem'
 
-interface RowViewProps {
+interface RootViewProps {
   localPluginButtonText: string
-
+  activeProfiles: Profile[]
+  inactiveProfiles?: Profile[]
+  filterPlugins: () => void
+  openLocalPlugins: () => void
+  renderItem: (profile: Profile) => void
 }
 
-function RootView () {
+function RootView ({
+  localPluginButtonText,
+  activeProfiles,
+  inactiveProfiles,
+  filterPlugins,
+  openLocalPlugins,
+  renderItem
+}: RootViewProps) {
   return (
     <div id="pluginManager" data-id="pluginManagerComponentPluginManager">
       <header className="form-group pluginSearch plugins-header py-3 px-4 border-bottom" data-id="pluginManagerComponentPluginManagerHeader">
         <input type="text" className="form-control" placeholder="Search" data-id="pluginManagerComponentSearchInput" />
-        <button className="btn btn-secondary text-dark border-0" data-id="pluginManagerComponentPluginSearchButton">Connect to a Local Plugin</button>
+        <button className="btn btn-secondary text-dark border-0" data-id="pluginManagerComponentPluginSearchButton">{localPluginButtonText}</button>
       </header>
       <section data-id="pluginManagerComponentPluginManagerSection">
         <ActiveTile />
-        <div className="list-group list-group-flush plugins-list-group" data-id="pluginManagerComponentActiveTile">
-
-        </div>
+        <ListGroupItem
+          activeProfiles={activeProfiles}
+          inactiveProfiles={inactiveProfiles}
+          renderItem={renderItem}
+        />
       </section>
     </div>
   )

libs/remix-ui/plugin-manager/src/lib/remix-ui-plugin-manager.tsx

@@ -1,19 +1,9 @@
 import React from 'react'
-
-import './remix-ui-plugin-manager.css';
+import './remix-ui-plugin-manager.css'
 
 /* eslint-disable-next-line */
 export interface RemixUiPluginManagerProps {
-  name: 'pluginManager',
-  displayName: 'Plugin manager',
-  methods: [],
-  events: [],
-  icon: 'assets/img/pluginManager.webp',
-  description: 'Start/stop services, modules and plugins',
-  kind: 'settings',
-  location: 'sidePanel',
-  documentation: 'https://remix-ide.readthedocs.io/en/latest/plugin_manager.html',
-  version: string
+
 }
 
 export const RemixUiPluginManager = (props: RemixUiPluginManagerProps) => {
@@ -21,7 +11,7 @@ export const RemixUiPluginManager = (props: RemixUiPluginManagerProps) => {
     <div>
       <h1>Welcome to remix-ui-plugin-manager!</h1>
     </div>
-  );
-};
+  )
+}
 
-export default RemixUiPluginManager;
+export default RemixUiPluginManager

nx.json

@@ -105,7 +105,7 @@
     "remix-ui-checkbox": {
       "tags": []
     },
-    "remix-ui-settings": {
+    "remix-ui-plugin-manager": {
       "tags": []
     }
   }