rename activeTile to moduleHeading. add changes to pluginCard

apps/remix-ide/src/app/components/plugin-manager-component.js

@@ -151,6 +151,7 @@ class PluginManagerComponent extends ViewPlugin {
         engine={this.engine}
         activesCount={3}
         inactivesCount={4}
+        isActive={() => false}
         actives={[]}
         inactives={[]}
       />,

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

@@ -1,19 +1,17 @@
-import React from 'react'
+import React, { useContext } from 'react'
+import { PluginManagerContext } from '../contexts/pluginmanagercontext'
 
 interface ButtonProps {
-  profileName: string
-  deactivatePlugin?: (name: string) => {}
-  activatePlugin?: (name: string) => {}
-  isActive: boolean
-  buttonText?: string
+  buttonText: 'Activate' | 'Deactivate'
 }
 
-function Button ({ profileName, deactivatePlugin, buttonText }: ButtonProps) {
-  const dataId = `pluginManagerComponentDeactivateButton${profileName}`
+function Button ({ buttonText }: ButtonProps) {
+  const { profile, deActivatePlugin, activatePlugin } = useContext(PluginManagerContext)
+  const dataId = `pluginManagerComponentDeactivateButton${profile.name}`
 
   return (
     <button
-      onClick={() => deactivatePlugin(profileName)}
+      onClick={buttonText === 'Activate' ? () => activatePlugin(profile.name) : () => deActivatePlugin(profile.name)}
       className="btn btn-secondary btn-sm"
       data-id={dataId}
     >

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

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import React, { useContext, useState } from 'react'
 import { PluginManagerContext } from '../contexts/pluginmanagercontext'
 import '../remix-ui-plugin-manager.css'
 import Button from './button'
@@ -13,25 +13,37 @@ interface PluginCardProps {
 
 // eslint-disable-next-line no-empty-pattern
 function PluginCard () {
-  const { profile } = useContext(PluginManagerContext)
+  const { profile, isActive } = useContext(PluginManagerContext)
+  const [displayName] = useState<string>((profile.displayName) ? profile.displayName : profile.name)
+  const [docLink] = useState<JSX.Element>((profile.documentation) ? (
+    <a href={profile.documentation} className="px-1" title="link to documentation" target="_blank" rel="noreferrer">
+      <i aria-hidden="true" className="fas fa-book"/>
+    </a>
+  ) : null)
+  const [versionWarning] = useState<JSX.Element>((profile.version && profile.version.match(/\b(\w*alpha\w*)\b/g)) ? (
+    <small title="Version Alpha" className="remixui_versionWarning plugin-version">alpha</small>
+  ) : (profile.version && profile.version.match(/\b(\w*beta\w*)\b/g)) ? (
+    <small title="Version Beta" className="remixui_versionWarning plugin-version">beta</small>
+  ) : null)
   return (
-    <article className="list-group-item py-1 mb-1 plugins-list-group-item" title="PLuginCardTitle">
+    <article className="list-group-item py-1 mb-1 plugins-list-group-item" title={displayName}>
       <div className="row justify-content-between align-items-center mb-2">
-        <h6 className="displayName plugin-name">
+        <h6 className="remixui_displayName plugin-name">
           <div>
-            {profile.displayName}
-            {profile.docLink}
-            {profile.versionWarning}
+            {displayName}
+            {docLink}
+            {versionWarning}
           </div>
+          { isActive(profile.name) ? (
             <Button
-            profileName="Sample Profile"
-            isActive
-          />
+              buttonText="Deactivate"
+            />) : <Button buttonText="Activate" />
+          }
         </h6>
       </div>
-      <div className="description d-flex text-body plugin-text mb-2">
-        <img src="" className="mr-1 mt-1 pluginIcon" alt="profile icon"/>
-        <span className="descriptiontext">{profile.description}</span>
+      <div className="remixui_description d-flex text-body plugin-text mb-2">
+        <img src={profile.icon} className="mr-1 mt-1 remixui_pluginIcon" alt="profile icon"/>
+        <span className="remixui_descriptiontext">{profile.description}</span>
       </div>
     </article>
   )

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

@@ -1,6 +1,6 @@
 import React from 'react'
-import ActiveTile from './activeTile'
 import ListGroupItem from './listGroupItem'
+import ModuleHeading from './moduleHeading'
 
 interface RootViewProps {
   localPluginButtonText: string
@@ -30,11 +30,13 @@ function RootView ({ localPluginButtonText }: RootViewProps) {
     <div id="pluginManager" data-id="pluginManagerComponentPluginManager">
       <header className="form-group remixui_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="remixui_pluginSearchButton btn bg-transparent text-dark border-0 mt-2 text-underline" data-id="pluginManagerComponentPluginSearchButton">
+          Connect to a Local Plugin
+        </button>
       </header>
       <section data-id="pluginManagerComponentPluginManagerSection">
-        <ActiveTile headingLabel="Active Modules"/>
-        <ActiveTile headingLabel="Inactive Modules"/>
+        <ModuleHeading headingLabel="Active Modules"/>
+        <ModuleHeading headingLabel="Inactive Modules"/>
         <ListGroupItem />
       </section>
     </div>

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

@@ -6,6 +6,7 @@ import './remix-ui-plugin-manager.css'
 
 export const RemixUiPluginManager = (props: RemixUiPluginManagerProps) => {
   console.log('current state of appmanager', props.appManager)
+  console.log('The state of props ', props)
   return (
     // <PluginManagerContextProvider props={props}>
     //   <RootView

libs/remix-ui/plugin-manager/src/types.d.ts

@@ -70,7 +70,7 @@ export interface PluginManagerContextProviderProps {
   inactives: Profile[]
   activatePlugin: (name: string) => void
   deActivatePlugin: (name: string) => void
-  isActive: (name: string) => any
+  isActive: (name: string) => boolean
   openLocalPlugin: () => Promise<void>
   filterPlugins: () => void
   profile: Profile