move collection count to right side of version header

ansible · Aug 11, 2023 · de01ce2 · de01ce2
1 parent 676703a
commit de01ce2
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 92 deletions.
diff --git a/src/components/headers/base-header.tsx b/src/components/headers/base-header.tsx
@@ -47,11 +47,9 @@ export class BaseHeader extends React.Component<IProps> {
               </Title>
             </div>
           </div>
-          {pageControls ? (
-            <div className='header-right'>{pageControls}</div>
-          ) : null}
+          {pageControls || null}
         </div>
-        {versionControl ? <>{versionControl}</> : null}
+        {versionControl || null}
 
         {children ? (
           <div className='header-bottom'>{children}</div>

diff --git a/src/components/headers/collection-header.tsx b/src/components/headers/collection-header.tsx
@@ -483,94 +483,91 @@ export class CollectionHeader extends React.Component<IProps, IState> {
           }
           breadcrumbs={<Breadcrumbs links={breadcrumbs} />}
           versionControl={
-            <div className='install-version-column'>
-              <span>{t`Version`}</span>
-              <div className='install-version-dropdown'>
-                <Select
-                  isOpen={isOpenVersionsSelect}
-                  onToggle={(isOpenVersionsSelect) =>
-                    this.setState({ isOpenVersionsSelect })
-                  }
-                  variant={SelectVariant.single}
-                  onSelect={() =>
-                    this.setState({ isOpenVersionsSelect: false })
-                  }
-                  selections={`v${version}`}
-                  aria-label={t`Select collection version`}
-                  loadingVariant={
-                    collections.length < collectionsCount
-                      ? {
-                          text: t`View more`,
-                          onClick: () =>
-                            this.setState({
-                              isOpenVersionsModal: true,
-                              isOpenVersionsSelect: false,
-                            }),
-                        }
-                      : null
-                  }
-                >
-                  {collections
-                    .map((c) => c.collection_version)
-                    .map((v) => (
-                      <SelectOption
-                        key={v.version}
-                        value={`v${v.version}`}
-                        onClick={() =>
-                          updateParams(
-                            ParamHelper.setParam(
-                              params,
-                              'version',
-                              v.version.toString(),
-                            ),
-                          )
-                        }
-                      >
-                        <Trans>
-                          {v.version} updated {isLatestVersion(v)}
-                        </Trans>
-                      </SelectOption>
-                    ))}
-                </Select>
+            <div className='column-section'>
+              <div className='install-version-column'>
+                <span>{t`Version`}</span>
+                <div className='install-version-dropdown'>
+                  <Select
+                    isOpen={isOpenVersionsSelect}
+                    onToggle={(isOpenVersionsSelect) =>
+                      this.setState({ isOpenVersionsSelect })
+                    }
+                    variant={SelectVariant.single}
+                    onSelect={() =>
+                      this.setState({ isOpenVersionsSelect: false })
+                    }
+                    selections={`v${version}`}
+                    aria-label={t`Select collection version`}
+                    loadingVariant={
+                      collections.length < collectionsCount
+                        ? {
+                            text: t`View more`,
+                            onClick: () =>
+                              this.setState({
+                                isOpenVersionsModal: true,
+                                isOpenVersionsSelect: false,
+                              }),
+                          }
+                        : null
+                    }
+                  >
+                    {collections
+                      .map((c) => c.collection_version)
+                      .map((v) => (
+                        <SelectOption
+                          key={v.version}
+                          value={`v${v.version}`}
+                          onClick={() =>
+                            updateParams(
+                              ParamHelper.setParam(
+                                params,
+                                'version',
+                                v.version.toString(),
+                              ),
+                            )
+                          }
+                        >
+                          <Trans>
+                            {v.version} updated {isLatestVersion(v)}
+                          </Trans>
+                        </SelectOption>
+                      ))}
+                  </Select>
+                </div>
+                {latestVersion ? (
+                  <span className='last-updated'>
+                    <Trans>
+                      Last updated <DateComponent date={latestVersion} />
+                    </Trans>
+                  </span>
+                ) : null}
+                {display_signatures ? (
+                  <SignatureBadge
+                    isCompact
+                    signState={collection.is_signed ? 'signed' : 'unsigned'}
+                  />
+                ) : null}
+              </div>
+              <div style={{ alignSelf: 'center' }}>
+                <DownloadCount item={actuallyCollection} />
               </div>
-              {latestVersion ? (
-                <span className='last-updated'>
-                  <Trans>
-                    Last updated <DateComponent date={latestVersion} />
-                  </Trans>
-                </span>
-              ) : null}
-              {display_signatures ? (
-                <SignatureBadge
-                  isCompact
-                  signState={collection.is_signed ? 'signed' : 'unsigned'}
-                />
-              ) : null}
             </div>
           }
           pageControls={
-            <Flex
-              direction={{ default: 'column' }}
-              alignItems={{ default: 'alignItemsFlexEnd' }}
-            >
-              <Flex direction={{ default: 'row' }}>
-                {DEPLOYMENT_MODE === Constants.INSIGHTS_DEPLOYMENT_MODE ? (
-                  <FlexItem>
-                    <a href={issueUrl} target='_blank' rel='noreferrer'>
-                      {t`Create issue`}
-                    </a>{' '}
-                    <ExternalLinkAltIcon />
-                  </FlexItem>
-                ) : null}
-                {dropdownItems.length > 0 ? (
-                  <FlexItem data-cy='kebab-toggle'>
-                    <StatefulDropdown items={dropdownItems} />
-                  </FlexItem>
-                ) : null}
-              </Flex>
-              <FlexItem>
-                <DownloadCount item={actuallyCollection} />
-              </FlexItem>
+            <Flex>
+              {DEPLOYMENT_MODE === Constants.INSIGHTS_DEPLOYMENT_MODE ? (
+                <FlexItem>
+                  <a href={issueUrl} target='_blank' rel='noreferrer'>
+                    {t`Create issue`}
+                  </a>{' '}
+                  <ExternalLinkAltIcon />
+                </FlexItem>
+              ) : null}
+              {dropdownItems.length > 0 ? (
+                <FlexItem data-cy='kebab-toggle'>
+                  <StatefulDropdown items={dropdownItems} />
+                </FlexItem>
+              ) : null}
             </Flex>
           }
         >

diff --git a/src/components/headers/header.scss b/src/components/headers/header.scss
@@ -12,10 +12,6 @@ $breakpoint-md: 1000px;
 .column-section {
   display: flex;
   justify-content: space-between;
-
-  .header-right {
-    align-items: right;
-  }
 }
 
 .install-version-column {