Merge pull request #1089 from scm-manager/feature/show_plugin_version

Display version for plugins

CHANGELOG.md

@@ -5,13 +5,15 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## Unreleased
+### Added
+- Display version for plugins ([#1089](https://github.com/scm-manager/scm-manager/pull/1089)
+
 ### Changed
 - Simplified collapse state management of the secondary navigation ([#1086](https://github.com/scm-manager/scm-manager/pull/1086)
 
 ### Fixed
 - Authentication for write requests for repositories with anonymous read access ([#108](https://github.com/scm-manager/scm-manager/pull/1081))
 
-
 ## 2.0.0-rc6 - 2020-03-26
 ### Added
 - Extension point to add links to the repository cards from plug ins ([#1041](https://github.com/scm-manager/scm-manager/pull/1041))

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>
-              <div className="level-right is-mobile is-marginless">{footerRight}</div>
+              <RightMarginDiv className="level-left is-hidden-mobile">{footerLeft}</RightMarginDiv>
+              <InheritFlexShrinkDiv className="level-right is-block is-mobile is-marginless shorten-text">
+                {footerRight}
+              </InheritFlexShrinkDiv>
             </FooterWrapper>
           </FlexFullHeight>
         </NoEventWrapper>

scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap

@@ -34455,7 +34455,7 @@ exports[`Storyshots RepositoryEntry Avatar EP 1`] = `
         className="CardColumn__FooterWrapper-sc-1w6lsih-3 jlTqlS level is-flex"
       >
         <div
-          className="level-left is-hidden-mobile"
+          className="CardColumn__RightMarginDiv-sc-1w6lsih-6 dbLPPh level-left is-hidden-mobile"
         >
           <a
             className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 gtboNN level-item"
@@ -34495,7 +34495,7 @@ exports[`Storyshots RepositoryEntry Avatar EP 1`] = `
           </a>
         </div>
         <div
-          className="level-right is-mobile is-marginless"
+          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 jkwBTE level-right is-block is-mobile is-marginless shorten-text"
         >
           <small
             className="level-item"
@@ -34572,7 +34572,7 @@ exports[`Storyshots RepositoryEntry Before Title EP 1`] = `
         className="CardColumn__FooterWrapper-sc-1w6lsih-3 jlTqlS level is-flex"
       >
         <div
-          className="level-left is-hidden-mobile"
+          className="CardColumn__RightMarginDiv-sc-1w6lsih-6 dbLPPh level-left is-hidden-mobile"
         >
           <a
             className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 gtboNN level-item"
@@ -34612,7 +34612,7 @@ exports[`Storyshots RepositoryEntry Before Title EP 1`] = `
           </a>
         </div>
         <div
-          className="level-right is-mobile is-marginless"
+          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 jkwBTE level-right is-block is-mobile is-marginless shorten-text"
         >
           <small
             className="level-item"
@@ -34686,7 +34686,7 @@ exports[`Storyshots RepositoryEntry Default 1`] = `
         className="CardColumn__FooterWrapper-sc-1w6lsih-3 jlTqlS level is-flex"
       >
         <div
-          className="level-left is-hidden-mobile"
+          className="CardColumn__RightMarginDiv-sc-1w6lsih-6 dbLPPh level-left is-hidden-mobile"
         >
           <a
             className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 gtboNN level-item"
@@ -34726,7 +34726,7 @@ exports[`Storyshots RepositoryEntry Default 1`] = `
           </a>
         </div>
         <div
-          className="level-right is-mobile is-marginless"
+          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 jkwBTE level-right is-block is-mobile is-marginless shorten-text"
         >
           <small
             className="level-item"
@@ -34800,7 +34800,7 @@ exports[`Storyshots RepositoryEntry Quick Link EP 1`] = `
         className="CardColumn__FooterWrapper-sc-1w6lsih-3 jlTqlS level is-flex"
       >
         <div
-          className="level-left is-hidden-mobile"
+          className="CardColumn__RightMarginDiv-sc-1w6lsih-6 dbLPPh level-left is-hidden-mobile"
         >
           <a
             className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 gtboNN level-item"
@@ -34847,7 +34847,7 @@ exports[`Storyshots RepositoryEntry Quick Link EP 1`] = `
           </a>
         </div>
         <div
-          className="level-right is-mobile is-marginless"
+          className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 jkwBTE level-right is-block is-mobile is-marginless shorten-text"
         >
           <small
             className="level-item"

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

@@ -87,8 +87,12 @@ class PluginEntry extends React.Component<Props, State> {
     });
   };
 
+  createFooterLeft = (plugin: Plugin) => {
+      return <small>{plugin.version}</small>;
+  };
+
   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 +176,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 +188,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}