add SoftwareCloud to list drawer

src/FilterLists.Web.V2/src/components/ListInfoDrawer.tsx

@@ -6,11 +6,13 @@ import { RouteComponentProps } from 'react-router-dom';
 import { Language } from '../interfaces/Language';
 import { License } from '../interfaces/License';
 import { List } from '../interfaces/List';
+import { Software } from '../interfaces/Software';
 import { Tag } from '../interfaces/Tag';
 import { Description } from './Description';
 import { LanguageCloud } from './languageCloud';
 import { LicenseTag } from './LicenseTag';
 import { LinkButton } from './LinkButton';
+import { SoftwareCloud } from './softwareCloud';
 import { SubscribeButtons } from './SubscribeButtons';
 import { TagCloud } from './tagCloud';
 
@@ -18,6 +20,7 @@ interface Props {
   list: List;
   languages: Language[];
   license?: License;
+  software: Software[];
   tags: Tag[];
 };
 
@@ -47,6 +50,9 @@ export const ListInfoDrawer = (props: RouteComponentProps & Props) => {
       {props.license
         ? <LicenseTag license={props.license as License} showLabel={true} />
         : null}
+      {props.list.syntaxId
+        ? <SoftwareCloud software={props.software} showLabel={true} />
+        : null}
       {props.list.publishedDate
         ? <div>
           <h3>First Published Date:</h3>

src/FilterLists.Web.V2/src/components/listsTable/ListDrawer.tsx

@@ -4,6 +4,7 @@ import { Redirect, Route, RouteComponentProps, StaticContext } from 'react-route
 import { Language } from '../../interfaces/Language';
 import { License } from '../../interfaces/License';
 import { List } from '../../interfaces/List';
+import { Software } from '../../interfaces/Software';
 import { Tag } from '../../interfaces/Tag';
 import { ListInfoDrawer } from '../ListInfoDrawer';
 
@@ -11,6 +12,7 @@ interface Props {
     lists: List[];
     languages: Language[];
     licenses: License[];
+    software: Software[];
     tags: Tag[];
 };
 
@@ -22,6 +24,7 @@ export const ListDrawer = (props: Props) => {
                 list={list as List}
                 languages={list.languageIds && props.languages.filter((l: Language) => list.languageIds.includes(l.id))}
                 license={list.licenseId ? props.licenses.find((l: License) => list.licenseId === l.id) : undefined}
+                software={list.syntaxId ? props.software.filter((s: Software) => s.syntaxIds.includes(list.syntaxId)) : []}
                 tags={list.tagIds && props.tags.filter((t: Tag) => list.tagIds.includes(t.id))}
                 {...rp} />
             : props.lists && props.lists.length && <Redirect to={{ pathname: "/", }} />;

src/FilterLists.Web.V2/src/components/listsTable/ListsTableHoc.tsx

@@ -14,7 +14,7 @@ export const ListsTableHoc = (props: RouteComponentProps) => {
   return (
     <>
       <ListsTable lists={lists} languages={languages} licenses={licenses} software={software} tags={tags} {...props} />
-      <ListDrawer lists={lists} languages={languages} licenses={licenses} tags={tags} />
+      <ListDrawer lists={lists} languages={languages} licenses={licenses} software={software} tags={tags} />
     </>
   );
 };

src/FilterLists.Web.V2/src/components/softwareCloud/SoftwareCloud.tsx

@@ -5,11 +5,13 @@ import { SoftwareIcon } from './SoftwareIcon';
 
 interface Props {
   software: Software[];
+  showLabel?: boolean;
 };
 
 export const SoftwareCloud = (props: Props) =>
   props.software && props.software.length
     ? <div>
+      {props.showLabel && <h3>{`Software:`}</h3>}
       {props.software.map((s: Software, i: number) =>
         s.homeUrl
           ? <a key={i} href={s.homeUrl} target="_blank" rel="noopener noreferrer">