Display plugin version for installed plugins

scm-ui/ui-components/src/CardColumn.tsx

@@ -68,6 +68,14 @@ const ContentRight = styled.div`
   margin-left: auto;
 `;
 
+const RightMarginDiv = styled.div`
+  margin-right: 0.5rem;
+`;
+
+const InheritFlexShrinkDiv = styled.div`
+  flex-shrink: inherit;
+`;
+
 export default class CardColumn extends React.Component<Props> {
   createLink = () => {
     const { link, action } = this.props;
@@ -105,8 +113,10 @@ export default class CardColumn extends React.Component<Props> {
               <ContentRight>{contentRight}</ContentRight>
             </div>
             <FooterWrapper className={classNames("level", "is-flex")}>
-              <div className="level-left is-hidden-mobile">{footerLeft}</div>
+              <RightMarginDiv className="level-left is-hidden-mobile">{footerLeft}</RightMarginDiv>
-              <div className="level-right is-mobile is-marginless">{footerRight}</div>
+              <InheritFlexShrinkDiv className="level-right is-block is-mobile is-marginless shorten-text">
+                {footerRight}
+              </InheritFlexShrinkDiv>
             </FooterWrapper>
           </FlexFullHeight>
         </NoEventWrapper>

scm-ui/ui-webapp/src/admin/plugins/components/PluginEntry.tsx

@@ -87,8 +87,15 @@ class PluginEntry extends React.Component<Props, State> {
     });
   };
 
+  createFooterLeft = (plugin: Plugin) => {
+    if (!this.isInstallable()) {
+      return <small>{plugin.version}</small>;
+    }
+    return null;
+  };
+
   createFooterRight = (plugin: Plugin) => {
-    return <small className="level-item">{plugin.author}</small>;
+    return <small className="level-item is-block shorten-text">{plugin.author}</small>;
   };
 
   isInstallable = () => {
@@ -172,8 +179,8 @@ class PluginEntry extends React.Component<Props, State> {
     const { plugin } = this.props;
     const avatar = this.createAvatar(plugin);
     const actionbar = this.createActionbar();
+    const footerLeft = this.createFooterLeft(plugin);
     const footerRight = this.createFooterRight(plugin);
-
     const modal = this.renderModal();
 
     return (
@@ -184,6 +191,7 @@ class PluginEntry extends React.Component<Props, State> {
           title={plugin.displayName ? <strong>{plugin.displayName}</strong> : <strong>{plugin.name}</strong>}
           description={plugin.description}
           contentRight={plugin.pending || plugin.markedForUninstall ? this.createPendingSpinner() : actionbar}
+          footerLeft={footerLeft}
           footerRight={footerRight}
         />
         {modal}