Fixes #33720 - Move collections to generic UI

app/services/katello/repository_type.rb

@@ -76,7 +76,7 @@ def default_managed_content_type(label = nil)
 
     def content_type(model_class, options = {})
       @content_types ||= []
-      @content_types << ContentType.new(options.merge(:model_class => model_class))
+      @content_types << ContentType.new(options.merge(:model_class => model_class, :content_type => model_class::CONTENT_TYPE))
     end
 
     def generic_content_type(content_type, options = {})
@@ -127,10 +127,11 @@ def pulp3_api(smart_proxy)
 
     class ContentType
       attr_accessor :model_class, :priority, :pulp2_service_class, :pulp3_service_class, :index, :uploadable, :removable,
-                    :primary_content, :index_on_pulp3, :generic_browser
+                    :primary_content, :index_on_pulp3, :generic_browser, :content_type
 
       def initialize(options)
         self.model_class = options[:model_class]
+        self.content_type = options[:content_type]
         self.priority = options[:priority] || 99
         self.pulp2_service_class = options[:pulp2_service_class]
         self.pulp3_service_class = options[:pulp3_service_class]

app/services/katello/repository_type_manager.rb

@@ -87,6 +87,14 @@ def generic_content_types(enabled_only = true)
         list.flatten.map(&:content_type)
       end
 
+      def generic_ui_content_types(enabled_only = true)
+        repo_types = enabled_only ? enabled_repository_types : defined_repository_types
+        list = repo_types.values.map do |type|
+          type.content_types.select { |ct| ct.generic_browser }
+        end
+        list.flatten.map(&:content_type)
+      end
+
       def generic_content_type?(content_type, enabled_only = true)
         types = generic_content_types(enabled_only)
         types.include?(content_type)

config/routes.rb

@@ -24,15 +24,15 @@
   match '/module_streams' => 'react#index', :via => [:get]
   match '/module_streams/*page' => 'react#index', :via => [:get]
 
-  match '/ansible_collections' => 'react#index', :via => [:get]
-  match '/ansible_collections/*page' => 'react#index', :via => [:get]
+  match '/legacy_ansible_collections' => 'react#index', :via => [:get]
+  match '/legacy_ansible_collections/*page' => 'react#index', :via => [:get]
 
   match '/content_views' => 'react#index', :via => [:get]
   match '/content_views/*page' => 'react#index', :via => [:get]
 
   match '/content' => 'react#index', :via => [:get]
 
-  Katello::RepositoryTypeManager.generic_content_types.each do |type|
+  Katello::RepositoryTypeManager.generic_ui_content_types.each do |type|
     get "/#{type.pluralize}", to: redirect("/content/#{type.pluralize}")
     get "/#{type.pluralize}/:page", to: redirect("/content/#{type.pluralize}/%{page}")
     match "/content/#{type.pluralize}" => 'react#index', :via => [:get]

engines/bastion_katello/app/assets/javascripts/bastion_katello/products/details/repositories/repositories.routes.js

@@ -91,7 +91,7 @@
             }
         })
         .state('product.repository.manage-content.docker-manifests', {
-            url: '/content/docker_manifests',
+            url: '/docker_manifests',
             permission: 'view_products',
             templateUrl: 'products/details/repositories/details/views/repository-manage-docker-manifests.html',
             ncyBreadcrumb: {
@@ -100,7 +100,7 @@
             }
         })
         .state('product.repository.manage-content.docker-tags', {
-            url: '/content/docker_tags',
+            url: '/docker_tags',
             permission: 'view_products',
             templateUrl: 'products/details/repositories/details/views/repository-manage-docker-tags.html',
             ncyBreadcrumb: {
@@ -109,7 +109,7 @@
             }
         })
         .state('product.repository.manage-content.docker-manifest-lists', {
-            url: '/content/docker_manifest_lists',
+            url: '/docker_manifest_lists',
             permission: 'view_products',
             templateUrl: 'products/details/repositories/details/views/repository-manage-docker-manifest-lists.html',
             ncyBreadcrumb: {
@@ -118,7 +118,7 @@
             }
         })
         .state('product.repository.manage-content.files', {
-            url: '/content/files',
+            url: '/files',
             permission: 'view_products',
             templateUrl: 'products/details/repositories/details/views/repository-manage-files.html',
             ncyBreadcrumb: {
@@ -127,7 +127,7 @@
             }
         })
         .state('product.repository.manage-content.ostree-branches', {
-            url: '/content/ostree_branches',
+            url: '/ostree_branches',
             permission: 'view_products',
             templateUrl: 'products/details/repositories/details/views/repository-manage-ostree-branches.html',
             ncyBreadcrumb: {
@@ -145,7 +145,7 @@
             }
         })
         .state('product.repository.manage-content.debs', {
-            url: '/content/debs',
+            url: '/debs',
             permission: 'view_products',
             templateUrl: 'products/details/repositories/details/views/repository-manage-debs.html',
             ncyBreadcrumb: {
@@ -154,7 +154,7 @@
             }
         })
         .state('product.repository.manage-content.ansible-collections', {
-            url: '/content/ansible_collections',
+            url: '/ansible_collections',
             permission: 'view_products',
             templateUrl: 'products/details/repositories/details/views/repository-manage-ansible-collections.html',
             ncyBreadcrumb: {

lib/katello/repository_types/ansible_collection.rb

@@ -16,5 +16,6 @@
   distribution_class PulpAnsibleClient::AnsibleAnsibleDistribution
   repo_sync_url_class PulpAnsibleClient::AnsibleRepositorySyncURL
 
-  content_type Katello::AnsibleCollection, :pulp3_service_class => ::Katello::Pulp3::AnsibleCollection, :user_removable => true
+  content_type Katello::AnsibleCollection, :pulp3_service_class => ::Katello::Pulp3::AnsibleCollection, :user_removable => true, generic_browser: true
+  default_managed_content_type :ansible_collections
 end

webpack/components/RoutedTabs/index.js

@@ -45,7 +45,7 @@ const RoutedTabs = ({
               <Route key={`${key}-route`} path={`/${key}`}>
                 {content}
               </Route>))}
-            <Redirect to={`/${currentTabFromUrl || tabs[defaultTabIndex].key}`} />
+            <Redirect to={`/${currentTabFromUrl || tabs[defaultTabIndex]?.key}`} />
           </Switch>
         </HashRouter>
       </div>

webpack/containers/Application/config.js

@@ -47,11 +47,11 @@ export const links = [
     component: WithOrganization(withHeader(ModuleStreamDetails, { title: __('Module Stream Details') })),
   },
   {
-    path: 'ansible_collections',
+    path: 'legacy_ansible_collections',
     component: WithOrganization(withHeader(AnsibleCollections, { title: __('Ansible Collections') })),
   },
   {
-    path: 'ansible_collections/:id([0-9]+)',
+    path: 'legacy_ansible_collections/:id([0-9]+)',
     component: WithOrganization(withHeader(AnsibleCollectionDetails, { title: __('Ansible Collection Details') })),
   },
   {
@@ -65,14 +65,14 @@ export const links = [
   },
   {
     path: 'content',
-    component: WithOrganization(withHeader(Content, { title: __('Other Content Types') })),
+    component: WithOrganization(withHeader(Content, { title: __('Content') })),
   },
   {
     path: 'content/:content_type([a-z_]+)',
-    component: WithOrganization(withHeader(Content, { title: __('Other Content Types') })),
+    component: WithOrganization(withHeader(Content, { title: __('Content') })),
   },
   {
     path: 'content/:content_type([a-z_]+)/:id([0-9]+)',
-    component: WithOrganization(withHeader(ContentDetails, { title: __('Other Content Type Details') })),
+    component: WithOrganization(withHeader(ContentDetails, { title: __('Content Details') })),
   },
 ];

webpack/scenes/AnsibleCollections/AnsibleCollectionsTableSchema.js

@@ -18,7 +18,7 @@ const TableSchema = [
       formatters: [
         (value, { rowData }) => (
           <td>
-            <Link to={urlBuilder('ansible_collections', '', rowData.id)}>{rowData.name}</Link>
+            <Link to={urlBuilder('legacy_ansible_collections', '', rowData.id)}>{rowData.name}</Link>
           </td>
         ),
       ],

webpack/scenes/Content/ContentConfig.js

@@ -47,7 +47,72 @@ export default () => [
           {
             title: __('Product'),
             getProperty: unit =>
-              <a href={urlBuilder(`products/${unit?.product.id}/repositories`, '')}>{unit?.product.name}</a>,
+              <a href={urlBuilder(`products/${unit?.product.id}/`, '')}>{unit?.product.name}</a>,
+          },
+          {
+            title: __('Sync Status'),
+            getProperty: unit =>
+              <LastSync lastSyncWords={unit?.last_sync_words} lastSync={unit?.last_sync} />,
+          },
+          {
+            title: __('Content Count'),
+            getProperty: (unit, singularLabel) =>
+              (<ContentCounts
+                typeSingularLabel={singularLabel}
+                productId={unit.product.id}
+                repoId={unit.id}
+                counts={unit.content_counts}
+              />),
+          },
+        ],
+      },
+    ],
+  },
+  {
+    names: {
+      pluralTitle: __('Ansible Collections'),
+      singularTitle: __('Ansible Collection'),
+      pluralLowercase: __('Ansible collections'),
+      singularLowercase: __('Ansible collection'),
+      pluralLabel: 'ansible_collections',
+      singularLabel: 'ansible_collection',
+    },
+    columnHeaders: [
+      { title: __('Name'), getProperty: unit => (<Link to={urlBuilder(`content/ansible_collections/${unit?.id}`, '')}>{unit?.name}</Link>) },
+      { title: __('Author'), getProperty: unit => unit?.namespace },
+      { title: __('Version'), getProperty: unit => unit?.version },
+      { title: __('Checksum'), getProperty: unit => unit?.checksum },
+
+    ],
+    tabs: [
+      {
+        tabKey: 'details',
+        title: __('Details'),
+        getContent: (contentType, id, tabKey) => <ContentInfo {...{ contentType, id, tabKey }} />,
+        columnHeaders: [
+          { title: __('Name'), getProperty: unit => unit?.name },
+          { title: __('Description'), getProperty: unit => unit?.description },
+          { title: __('Author'), getProperty: unit => unit?.namespace },
+          { title: __('Version'), getProperty: unit => unit?.version },
+          { title: __('Checksum'), getProperty: unit => unit?.checksum },
+          { title: __('Tags'), getProperty: unit => unit?.tags?.join() },
+        ],
+      },
+      {
+        tabKey: 'repositories',
+        title: __('Repositories'),
+        getContent: (contentType, id, tabKey) =>
+          <ContentRepositories {...{ contentType, id, tabKey }} />,
+        columnHeaders: [
+          {
+            title: __('Name'),
+            getProperty: unit =>
+              <a href={urlBuilder(`products/${unit?.product.id}/repositories/${unit?.id}`, '')}>{unit?.name}</a>,
+          },
+          {
+            title: __('Product'),
+            getProperty: unit =>
+              <a href={urlBuilder(`products/${unit?.product.id}/`, '')}>{unit?.product.name}</a>,
           },
           {
             title: __('Sync Status'),

webpack/scenes/Content/ContentPage.js

@@ -17,6 +17,7 @@ const ContentPage = () => {
   const contentTypesResponse = useSelector(selectContentTypes);
   const contentTypesStatus = useSelector(selectContentTypesStatus);
   const [selectedContentType, setSelectedContentType] = useState(null);
+  const [showContentTypeSelector, setShowContentTypeSelector] = useState(true);
   const [contentTypes, setContentTypes] = useState(null);
   const { content_type: contentType } = useParams();
 
@@ -45,6 +46,7 @@ const ContentPage = () => {
         Object.entries(enabledContentTypes).forEach(([key, value]) => {
           if (value.includes(contentType)) {
             setSelectedContentType(key);
+            setShowContentTypeSelector(false);
           }
         });
       }
@@ -75,7 +77,10 @@ const ContentPage = () => {
         </TextContent>
       </GridItem>
       <GridItem span={12}>
-        <ContentTable {...{ selectedContentType, setSelectedContentType, contentTypes }} />
+        <ContentTable {...{
+ selectedContentType, setSelectedContentType, contentTypes, showContentTypeSelector,
+}}
+        />
       </GridItem>
     </Grid>
   );

webpack/scenes/Content/Details/ContentDetails.js

@@ -58,7 +58,7 @@ const ContentDetails = () => {
         </Flex>
       </GridItem>
       <GridItem span={12}>
-        <RoutedTabs tabs={tabs} baseUrl={`/${contentType}/${contentId}`} defaultTabIndex={1} />
+        <RoutedTabs tabs={tabs} baseUrl={`/${contentType}/${contentId}`} defaultTabIndex={0} />
       </GridItem>
     </Grid>
   );

webpack/scenes/Content/Table/ContentTable.js

@@ -9,7 +9,9 @@ import { selectContent, selectContentStatus, selectContentError } from '../Conte
 import SelectableDropdown from '../../../components/SelectableDropdown';
 import contentConfig from '../ContentConfig';
 /* eslint-disable react/no-array-index-key */
-const ContentTable = ({ selectedContentType, setSelectedContentType, contentTypes }) => {
+const ContentTable = ({
+  selectedContentType, setSelectedContentType, contentTypes, showContentTypeSelector,
+}) => {
   const status = useSelector(selectContentStatus);
   const error = useSelector(selectContentError);
   const response = useSelector(selectContent);
@@ -41,6 +43,7 @@ const ContentTable = ({ selectedContentType, setSelectedContentType, contentType
         [contentTypes, selectedContentType],
       )}
       actionButtons={
+        showContentTypeSelector &&
         <SelectableDropdown
           items={Object.keys(contentTypes)}
           title={__('Type')}
@@ -76,6 +79,11 @@ ContentTable.propTypes = {
   selectedContentType: PropTypes.string.isRequired,
   setSelectedContentType: PropTypes.func.isRequired,
   contentTypes: PropTypes.objectOf(PropTypes.array).isRequired,
+  showContentTypeSelector: PropTypes.bool,
+};
+
+ContentTable.defaultProps = {
+  showContentTypeSelector: true,
 };
 
 export default ContentTable;