Make more information card multi-column; include add to collection input (#13665)

* Make more information card multi-column; include add to collection input

* rework components to not return Definition to make Flow happy

* change implementation to hide empty dt/dd with css instead

* revert reworking and css implemention; relax typing on DefintionList intead

* circular reference fix

* Fix type issue by moving state to the AddonMoreInfo component. (#13677)

Follow the pattern for other more info links where we define the content in listContent and pass it to renderDefinitionList and conditionally render the expected <Definition> element only if the content is truthy

---------

Co-authored-by: Kevin Meinhardt <[email protected]>

Author: eviljeff

src/amo/components/AddAddonToCollection/index.js

@@ -15,7 +15,6 @@ import { getCurrentUser } from 'amo/reducers/users';
 import { withFixedErrorHandler } from 'amo/errorHandler';
 import translate from 'amo/i18n/translate';
 import log from 'amo/logger';
-import Card from 'amo/components/Card';
 import Select from 'amo/components/Select';
 import Notice from 'amo/components/Notice';
 import type { CollectionType } from 'amo/reducers/collections';
@@ -269,10 +268,7 @@ export class AddAddonToCollectionBase extends React.Component<InternalProps> {
     const collectionOptLabel = i18n.gettext('Add to…');
 
     return (
-      <Card
-        className="AddAddonToCollection"
-        header={i18n.gettext('Add to collection')}
-      >
+      <>
         {errorHandler.renderErrorIfPresent()}
         {addedNotices}
         <Select
@@ -285,7 +281,7 @@ export class AddAddonToCollectionBase extends React.Component<InternalProps> {
             <optgroup label={collectionOptLabel}>{collectionOptions}</optgroup>
           ) : null}
         </Select>
-      </Card>
+      </>
     );
   }
 }

src/amo/components/AddonAdminLinks/index.js

@@ -1,28 +1,14 @@
 /* @flow */
 import * as React from 'react';
-import { connect } from 'react-redux';
 import { compose } from 'redux';
 
-import {
-  ADDONS_CONTENT_REVIEW,
-  ADDONS_EDIT,
-  ADDONS_REVIEW,
-  ADDON_TYPE_STATIC_THEME,
-  REVIEWER_TOOLS_VIEW,
-  STATIC_THEMES_REVIEW,
-} from 'amo/constants';
+import { ADDON_TYPE_STATIC_THEME } from 'amo/constants';
 import translate from 'amo/i18n/translate';
-import { hasPermission } from 'amo/reducers/users';
 import type { AddonType } from 'amo/types/addons';
-import DefinitionList, { Definition } from 'amo/components/DefinitionList';
 import type { I18nType } from 'amo/types/i18n';
-import type { AppState } from 'amo/store';
 
 type Props = {|
-  addon: AddonType | null,
-|};
-
-type PropsFromState = {|
+  addon: AddonType,
   hasCodeReviewPermission: boolean,
   hasContentReviewPermission: boolean,
   hasEditPermission: boolean,
@@ -31,12 +17,11 @@ type PropsFromState = {|
 
 type InternalProps = {|
   ...Props,
-  ...PropsFromState,
   i18n: I18nType,
 |};
 
 export class AddonAdminLinksBase extends React.Component<InternalProps> {
-  render(): null | React.Node {
+  render(): React.Node {
     const {
       addon,
       hasCodeReviewPermission,
@@ -46,24 +31,11 @@ export class AddonAdminLinksBase extends React.Component<InternalProps> {
       i18n,
     } = this.props;
 
-    if (addon === null) {
-      return null;
-    }
-
     const isTheme = addon.type === ADDON_TYPE_STATIC_THEME;
 
     const showCodeReviewLink = hasCodeReviewPermission && !isTheme;
     const showStaticThemeReviewLink = hasStaticThemeReviewPermission && isTheme;
     const showContentReviewLink = hasContentReviewPermission && !isTheme;
-    const hasALink =
-      hasEditPermission ||
-      showContentReviewLink ||
-      showCodeReviewLink ||
-      showStaticThemeReviewLink;
-
-    if (!hasALink) {
-      return null;
-    }
 
     const editLink = hasEditPermission ? (
       <li>
@@ -128,39 +100,18 @@ export class AddonAdminLinksBase extends React.Component<InternalProps> {
       ) : null;
 
     return (
-      <DefinitionList className="AddonAdminLinks">
-        <Definition
-          term={
-            // L10n: This is a list of links to administrative functions.
-            i18n.gettext('Admin Links')
-          }
-        >
-          <ul className="AddonAdminLinks-list">
-            {editLink}
-            {adminLink}
-            {contentReviewLink}
-            {codeReviewLink}
-          </ul>
-        </Definition>
-      </DefinitionList>
+      <ul className="AddonAdminLinks-list">
+        {editLink}
+        {adminLink}
+        {contentReviewLink}
+        {codeReviewLink}
+      </ul>
     );
   }
 }
 
-const mapStateToProps = (state: AppState): PropsFromState => {
-  return {
-    hasCodeReviewPermission:
-      hasPermission(state, ADDONS_REVIEW) ||
-      hasPermission(state, REVIEWER_TOOLS_VIEW),
-    hasContentReviewPermission: hasPermission(state, ADDONS_CONTENT_REVIEW),
-    hasEditPermission: hasPermission(state, ADDONS_EDIT),
-    hasStaticThemeReviewPermission: hasPermission(state, STATIC_THEMES_REVIEW),
-  };
-};
-
-const AddonAdminLinks: React.ComponentType<Props> = compose(
-  connect(mapStateToProps),
-  translate(),
-)(AddonAdminLinksBase);
+const AddonAdminLinks: React.ComponentType<Props> = compose(translate())(
+  AddonAdminLinksBase,
+);
 
 export default AddonAdminLinks;