Use display_repositories feature flag (ansible#3558)

* FeatureFlagsType: add ai_deny_index, display_repositories

* Use display_repositories feature flag

without it:
hide repo link in collections view,
hide repo selector,
hide menu item

with it:
show menu item in anonymous mode too

No-Issue

* view-only tests - run with more community feature flags

Author: himdel

src/api/response-types/feature-flags.ts

@@ -1,11 +1,14 @@
 export class FeatureFlagsType {
-  // execution environments menu section
+  // execution environments
+  container_signing: boolean;
   execution_environments: boolean;
 
   // keycloak login screen
   external_authentication: boolean;
 
-  // community version
+  // community mode
+  ai_deny_index: boolean;
+  display_repositories: boolean;
   legacy_roles: boolean;
 
   // collection signing
@@ -17,9 +20,6 @@ export class FeatureFlagsType {
   require_upload_signatures: boolean;
   signatures_enabled: boolean;
 
-  // container signing (EE)
-  container_signing: boolean;
-
   // errors
   _messages: string[];
 }

src/components/cards/collection-card.tsx

@@ -16,6 +16,7 @@ import { Link } from 'react-router-dom';
 import { CollectionVersionSearch } from 'src/api';
 import { CollectionNumericLabel, Logo, SignatureBadge } from 'src/components';
 import { Constants } from 'src/constants';
+import { useContext } from 'src/loaders/app-context';
 import { Paths, formatPath } from 'src/paths';
 import { convertContentSummaryCounts } from 'src/utilities';
 
@@ -36,6 +37,7 @@ export const CollectionCard = ({
   menu,
   footer,
 }: IProps) => {
+  const { featureFlags } = useContext();
   const MAX_DESCRIPTION_LENGTH = 60;
 
   const company = namespace?.company || collection_version.namespace;
@@ -53,21 +55,23 @@ export const CollectionCard = ({
           flexGrow
         />
         <div className='card-badge-area'>
-          <TextContent>
-            <Text component={TextVariants.small}>
-              <Badge isRead>
-                <Link
-                  to={formatPath(Paths.ansibleRepositoryDetail, {
-                    name: repository.name,
-                  })}
-                >
-                  {repository.name === Constants.CERTIFIED_REPO
-                    ? t`Certified`
-                    : repository.name}
-                </Link>
-              </Badge>
-            </Text>
-          </TextContent>
+          {featureFlags.display_repositories ? (
+            <TextContent>
+              <Text component={TextVariants.small}>
+                <Badge isRead>
+                  <Link
+                    to={formatPath(Paths.ansibleRepositoryDetail, {
+                      name: repository.name,
+                    })}
+                  >
+                    {repository.name === Constants.CERTIFIED_REPO
+                      ? t`Certified`
+                      : repository.name}
+                  </Link>
+                </Badge>
+              </Text>
+            </TextContent>
+          ) : null}
           {displaySignatures ? (
             <SignatureBadge
               isCompact

src/components/collection-list/collection-list-item.tsx

@@ -22,6 +22,7 @@ import {
   Logo,
   Tag,
 } from 'src/components';
+import { useContext } from 'src/loaders/app-context';
 import { Paths, formatPath } from 'src/paths';
 import { chipGroupProps, convertContentSummaryCounts } from 'src/utilities';
 import { SignatureBadge } from '../signing';
@@ -50,6 +51,7 @@ export const CollectionListItem = ({
   synclistSwitch,
   uploadButton,
 }: IProps) => {
+  const { featureFlags } = useContext();
   const cells = [];
 
   const company = namespace?.company || collection_version.namespace;
@@ -152,17 +154,19 @@ export const CollectionListItem = ({
           direction={{ default: 'row' }}
           alignSelf={{ default: 'alignSelfFlexStart' }}
         >
-          <FlexItem>
-            <Label variant='outline'>
-              <Link
-                to={formatPath(Paths.ansibleRepositoryDetail, {
-                  name: repository.name,
-                })}
-              >
-                {repository.name}
-              </Link>
-            </Label>
-          </FlexItem>
+          {featureFlags.display_repositories ? (
+            <FlexItem>
+              <Label variant='outline'>
+                <Link
+                  to={formatPath(Paths.ansibleRepositoryDetail, {
+                    name: repository.name,
+                  })}
+                >
+                  {repository.name}
+                </Link>
+              </Label>
+            </FlexItem>
+          ) : null}
           {displaySignatures ? (
             <FlexItem>
               <SignatureBadge

src/components/headers/base-header.tsx

@@ -1,7 +1,6 @@
 import { Title } from '@patternfly/react-core';
 import cx from 'classnames';
 import * as React from 'react';
-import { Constants } from 'src/constants';
 import './header.scss';
 
 interface IProps {
@@ -30,18 +29,13 @@ export class BaseHeader extends React.Component<IProps> {
       status,
     } = this.props;
 
-    const showRepoSelector =
-      contextSelector && DEPLOYMENT_MODE !== Constants.INSIGHTS_DEPLOYMENT_MODE;
-
     return (
       <div className={cx('background', className)}>
-        {showRepoSelector && (
-          <div className='breadcrumb-container'>{contextSelector}</div>
-        )}
+        {contextSelector || null}
         {breadcrumbs && (
           <div className='breadcrumb-container'>{breadcrumbs}</div>
         )}
-        {!breadcrumbs && !showRepoSelector && <div className='placeholder' />}
+        {!breadcrumbs && !contextSelector && <div className='placeholder' />}
 
         <div className='column-section'>
           <div className='title-box'>

src/components/headers/partner-header.tsx

@@ -20,15 +20,13 @@ interface IProps {
   updateParams: (p) => void;
 
   pageControls?: React.ReactNode;
-  contextSelector?: React.ReactNode;
   filters?: React.ReactNode;
 }
 
 export class PartnerHeader extends React.Component<IProps> {
   render() {
     const {
       breadcrumbs,
-      contextSelector,
       filters,
       namespace,
       pageControls,
@@ -56,7 +54,6 @@ export class PartnerHeader extends React.Component<IProps> {
         }
         breadcrumbs={<Breadcrumbs links={breadcrumbs} />}
         pageControls={pageControls}
-        contextSelector={contextSelector}
         className='header'
       >
         {namespace.description ? <div>{namespace.description}</div> : null}

src/components/repo-selector/repo-selector.tsx

@@ -6,12 +6,23 @@ import {
   InputGroupText,
 } from '@patternfly/react-core';
 import React from 'react';
+import { Constants } from 'src/constants';
+import { useContext } from 'src/loaders/app-context';
 
 interface IProps {
   selectedRepo: string;
 }
 
 export const RepoSelector = ({ selectedRepo }: IProps) => {
+  const { featureFlags } = useContext();
+
+  if (DEPLOYMENT_MODE === Constants.INSIGHTS_DEPLOYMENT_MODE) {
+    return null;
+  }
+  if (!featureFlags.display_repositories) {
+    return null;
+  }
+
   const repoName =
     {
       community: t`Community`,
@@ -23,24 +34,26 @@ export const RepoSelector = ({ selectedRepo }: IProps) => {
     }[selectedRepo] || selectedRepo;
 
   return (
-    <Flex>
-      <FlexItem>
-        <InputGroup>
-          <InputGroupText style={{ paddingLeft: 0 }} variant='plain'>
-            {t`Repository`}
-          </InputGroupText>
-          <InputGroupText
-            variant='plain'
-            style={{
-              backgroundColor: 'var(--pf-global--disabled-color--300)',
-              color: 'var(--pf-global--Color--100)',
-              height: '36px',
-            }}
-          >
-            {repoName}
-          </InputGroupText>
-        </InputGroup>
-      </FlexItem>
-    </Flex>
+    <div className='breadcrumb-container'>
+      <Flex>
+        <FlexItem>
+          <InputGroup>
+            <InputGroupText style={{ paddingLeft: 0 }} variant='plain'>
+              {t`Repository`}
+            </InputGroupText>
+            <InputGroupText
+              variant='plain'
+              style={{
+                backgroundColor: 'var(--pf-global--disabled-color--300)',
+                color: 'var(--pf-global--Color--100)',
+                height: '36px',
+              }}
+            >
+              {repoName}
+            </InputGroupText>
+          </InputGroup>
+        </FlexItem>
+      </Flex>
+    </div>
   );
 };

src/containers/ansible-remote/tab-access.tsx

@@ -16,8 +16,9 @@ interface TabProps {
   item: AnsibleRemoteType;
   actionContext: {
     addAlert: (alert) => void;
-    state: { params };
+    featureFlags;
     hasPermission;
+    state: { params };
     user;
   };
 }
@@ -26,8 +27,9 @@ export const RemoteAccessTab = ({
   item,
   actionContext: {
     addAlert,
-    state: { params },
+    featureFlags,
     hasPermission,
+    state: { params },
     user,
   },
 }: TabProps) => {
@@ -57,6 +59,7 @@ export const RemoteAccessTab = ({
             hasObjectPermission: (p: string): boolean =>
               permissions.includes(p),
             user,
+            featureFlags,
           }),
         );
         AnsibleRemoteAPI.listRoles(id)

src/containers/ansible-repository/tab-access.tsx

@@ -16,8 +16,9 @@ interface TabProps {
   item: AnsibleRepositoryType;
   actionContext: {
     addAlert: (alert) => void;
-    state: { params };
+    featureFlags;
     hasPermission;
+    state: { params };
     user;
   };
 }
@@ -26,8 +27,9 @@ export const RepositoryAccessTab = ({
   item,
   actionContext: {
     addAlert,
-    state: { params },
+    featureFlags,
     hasPermission,
+    state: { params },
     user,
   },
 }: TabProps) => {
@@ -57,6 +59,7 @@ export const RepositoryAccessTab = ({
             hasObjectPermission: (p: string): boolean =>
               permissions.includes(p),
             user,
+            featureFlags,
           }),
         );
         AnsibleRepositoryAPI.listRoles(id)

src/permissions.ts

@@ -2,7 +2,7 @@ import { FeatureFlagsType, SettingsType, UserType } from 'src/api';
 
 export type PermissionContextType = (
   o: {
-    featureFlags?: FeatureFlagsType;
+    featureFlags: FeatureFlagsType;
     settings?: SettingsType;
     user: UserType;
     hasPermission: (string) => boolean;
@@ -54,8 +54,9 @@ export const canEditAnsibleRepository = has_model_or_obj_perms(
   'ansible.change_ansiblerepository',
 );
 export const canSyncAnsibleRepository = canEditAnsibleRepository;
-// everybody can list/view, not has_model_or_obj_perms('ansible.view_ansiblerepository')
-export const canViewAnsibleRepositories = isLoggedIn;
+// everybody can list/view, not has_model_or_obj_perms('ansible.view_ansiblerepository'); under feature flag
+export const canViewAnsibleRepositories = ({ user, featureFlags }) =>
+  user && featureFlags?.display_repositories;
 export const canEditAnsibleRepositoryAccess = has_model_or_obj_perms(
   'ansible.manage_roles_ansiblerepository',
 );

test/cypress/e2e/view-only-access/compose.env

@@ -1,3 +1,4 @@
 PULP_GALAXY_ENABLE_UNAUTHENTICATED_COLLECTION_ACCESS='true'
 PULP_GALAXY_ENABLE_UNAUTHENTICATED_COLLECTION_DOWNLOAD='false'
 PULP_GALAXY_REQUIRE_CONTENT_APPROVAL='false'
+PULP_GALAXY_FEATURE_FLAGS__display_repositories=false

test/cypress/e2e/view-only-download/compose.env

@@ -1,3 +1,4 @@
 PULP_GALAXY_ENABLE_UNAUTHENTICATED_COLLECTION_ACCESS='true'
 PULP_GALAXY_ENABLE_UNAUTHENTICATED_COLLECTION_DOWNLOAD='true'
 PULP_GALAXY_REQUIRE_CONTENT_APPROVAL='false'
+PULP_GALAXY_FEATURE_FLAGS__display_repositories=false