Repositories: fix architecture/version display to use readable names from API

- Add listRepositoryParameters endpoint to contentSources API
- Display human-readable names instead of technical labels
- Fix inconsistency between Image Builder and Repositories service display
- Resolve "any" vs "Any" capitalization issue -
https://github.com/osbuild/image-builder-frontend/issues/3008

api/config/contentSources.ts

@@ -12,6 +12,7 @@ const config: ConfigFile = {
     'createRepository',
     'listRepositories',
     'listRepositoriesRpms',
+    'listRepositoryParameters',
     'searchRpm',
     'searchPackageGroup',
     'listFeatures',

src/Components/CreateImageWizard/steps/Repositories/Repositories.tsx

@@ -40,6 +40,7 @@ import {
   ApiRepositoryResponseRead,
   useListRepositoriesQuery,
   useGetTemplateQuery,
+  useListRepositoryParametersQuery,
 } from '../../../../store/contentSourcesApi';
 import { useAppDispatch, useAppSelector } from '../../../../store/hooks';
 import {
@@ -87,6 +88,35 @@ const Repositories = () => {
 
   const debouncedFilterValue = useDebounce(filterValue);
 
+  const { data: repositoryParameters } = useListRepositoryParametersQuery();
+
+  const getReadableArchitecture = (technicalArch: string | undefined) => {
+    if (!technicalArch || !repositoryParameters?.distribution_arches) {
+      return technicalArch || '-';
+    }
+
+    const archParam = repositoryParameters.distribution_arches.find(
+      (arch) => arch.label === technicalArch
+    );
+
+    return archParam?.name || technicalArch;
+  };
+
+  const getReadableVersions = (technicalVersions: string[] | undefined) => {
+    if (!technicalVersions || !repositoryParameters?.distribution_versions) {
+      return technicalVersions || '-';
+    }
+
+    const readableVersions = technicalVersions.map((version) => {
+      const versionParam = repositoryParameters.distribution_versions?.find(
+        (v) => v.label === version
+      );
+      return versionParam?.name || version;
+    });
+
+    return readableVersions.join(', ');
+  };
+
   const selected = useMemo(
     () =>
       new Set(
@@ -640,10 +670,10 @@ const Repositories = () => {
                           )}
                         </Td>
                         <Td dataLabel={'Architecture'}>
-                          {distribution_arch || '-'}
+                          {getReadableArchitecture(distribution_arch)}
                         </Td>
                         <Td dataLabel={'Version'}>
-                          {distribution_versions || '-'}
+                          {getReadableVersions(distribution_versions)}
                         </Td>
                         <Td dataLabel={'Packages'}>{package_count || '-'}</Td>
                         <Td dataLabel={'Status'}>
@@ -758,10 +788,10 @@ const Repositories = () => {
                           )}
                         </Td>
                         <Td dataLabel={'Architecture'}>
-                          {distribution_arch || '-'}
+                          {getReadableArchitecture(distribution_arch)}
                         </Td>
                         <Td dataLabel={'Version'}>
-                          {distribution_versions || '-'}
+                          {getReadableVersions(distribution_versions)}
                         </Td>
                         <Td dataLabel={'Packages'}>{package_count || '-'}</Td>
                         <Td dataLabel={'Status'}>

src/store/contentSourcesApi.ts

@@ -16,6 +16,7 @@ export const {
   useCreateRepositoryMutation,
   useBulkImportRepositoriesMutation,
   useListRepositoriesRpmsQuery,
+  useListRepositoryParametersQuery,
   useListTemplatesQuery,
   useGetTemplateQuery,
   contentSourcesApi,

src/store/service/contentSourcesApi.ts

@@ -72,6 +72,12 @@ const injectedRtkApi = api.injectEndpoints({
         },
       }),
     }),
+    listRepositoryParameters: build.query<
+      ListRepositoryParametersApiResponse,
+      ListRepositoryParametersApiArg
+    >({
+      query: () => ({ url: `/repository_parameters/` }),
+    }),
     searchRpm: build.mutation<SearchRpmApiResponse, SearchRpmApiArg>({
       query: (queryArg) => ({
         url: `/rpms/names`,
@@ -177,6 +183,9 @@ export type ListRepositoriesRpmsApiArg = {
   /** Sort the response based on specific repository parameters. Sort criteria can include `name`, `url`, `status`, and `package_count`. */
   sortBy?: string;
 };
+export type ListRepositoryParametersApiResponse =
+  /** status 200 OK */ ApiRepositoryParameterResponse;
+export type ListRepositoryParametersApiArg = void;
 export type SearchRpmApiResponse = /** status 200 OK */ ApiSearchRpmResponse[];
 export type SearchRpmApiArg = {
   /** request body */
@@ -639,6 +648,24 @@ export type ApiRepositoryRpmCollectionResponse = {
   links?: ApiLinks | undefined;
   meta?: ApiResponseMetadata | undefined;
 };
+export type ConfigDistributionArch = {
+  /** Static label of the architecture */
+  label?: string | undefined;
+  /** Human-readable form of the architecture */
+  name?: string | undefined;
+};
+export type ConfigDistributionVersion = {
+  /** Static label of the version */
+  label?: string | undefined;
+  /** Human-readable form of the version */
+  name?: string | undefined;
+};
+export type ApiRepositoryParameterResponse = {
+  /** Architectures available for repository creation */
+  distribution_arches?: ConfigDistributionArch[] | undefined;
+  /** Versions available for repository creation */
+  distribution_versions?: ConfigDistributionVersion[] | undefined;
+};
 export type ApiPackageSourcesResponse = {
   /** Architecture of the module */
   arch?: string | undefined;
@@ -776,6 +803,7 @@ export const {
   useCreateRepositoryMutation,
   useBulkImportRepositoriesMutation,
   useListRepositoriesRpmsQuery,
+  useListRepositoryParametersQuery,
   useSearchRpmMutation,
   useListSnapshotsByDateMutation,
   useListTemplatesQuery,