RepoSelector - remove Select logic, just show current repo

Author: himdel

src/components/headers/collection-header.tsx

@@ -415,10 +415,7 @@ export class CollectionHeader extends React.Component<IProps, IState> {
             )
           }
           contextSelector={
-            <RepoSelector
-              selectedRepo={collection.repository.name}
-              isDisabled
-            />
+            <RepoSelector selectedRepo={collection.repository.name} />
           }
           breadcrumbs={<Breadcrumbs links={breadcrumbs} />}
           versionControl={

src/components/repo-selector/repo-selector.scss

@@ -1,86 +1,44 @@
-import { i18n } from '@lingui/core';
 import { t } from '@lingui/macro';
 import {
   Flex,
   FlexItem,
   InputGroup,
   InputGroupText,
-  Select,
-  SelectOption,
 } from '@patternfly/react-core';
-import React, { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { Constants } from 'src/constants';
-import { Paths, formatPath } from 'src/paths';
-import './repo-selector.scss';
+import React from 'react';
 
 interface IProps {
   selectedRepo: string;
-  // Path of the component that's using the component. This is required so that
-  // the url for the repo can be updated correctly.
-  path?: Paths;
-  pathParams?: Record<string, string>;
-  isDisabled?: boolean;
 }
 
-export const RepoSelector = ({
-  selectedRepo,
-  path,
-  pathParams,
-  isDisabled,
-}: IProps) => {
-  const [selectExpanded, setSelectExpanded] = useState<boolean>(false);
-  const navigate = useNavigate();
-
-  const getRepoName = (repoName) => {
-    const repo = Constants.REPOSITORYNAMES[repoName];
-    return repo ? i18n._(repo) : repoName;
-  };
-
-  const repoNames = Constants.REPOSITORYNAMES;
+export const RepoSelector = ({ selectedRepo }: IProps) => {
+  const repoName =
+    {
+      community: t`Community`,
+      published: t`Published`,
+      rejected: t`Rejected`,
+      'rh-certified': t`Red Hat Certified`,
+      staging: t`Staging`,
+      validated: t`Validated`,
+    }[selectedRepo] || selectedRepo;
 
   return (
     <Flex>
       <FlexItem>
         <InputGroup>
-          <InputGroupText
-            style={{ paddingLeft: 0 }}
-            variant='plain'
-            className='hub-input-group-text-no-wrap'
-          >
+          <InputGroupText style={{ paddingLeft: 0 }} variant='plain'>
             {t`Repository`}
           </InputGroupText>
-          <Select
-            className='nav-select'
-            isDisabled={!path || isDisabled}
-            isOpen={selectExpanded}
-            isPlain={false}
-            onSelect={(event: React.ChangeEvent<HTMLInputElement>) => {
-              const originalRepo = selectedRepo;
-              const newRepo = getRepoName(event.target.name);
-
-              setSelectExpanded(false);
-
-              if (newRepo !== originalRepo) {
-                const newPath = formatPath(path, {
-                  ...pathParams,
-                  repo: event.target.name,
-                });
-                navigate(newPath);
-              }
+          <InputGroupText
+            variant='plain'
+            style={{
+              backgroundColor: 'var(--pf-global--disabled-color--300)',
+              color: 'var(--pf-global--Color--100)',
+              height: '36px',
             }}
-            onToggle={(isExpanded) => setSelectExpanded(isExpanded)}
-            selections={getRepoName(selectedRepo)}
-            variant='single'
           >
-            {Object.keys(repoNames).map((option) => (
-              <SelectOption
-                name={option}
-                key={option}
-                value={i18n._(repoNames[option])}
-              />
-            ))}
-          </Select>
+            {repoName}
+          </InputGroupText>
         </InputGroup>
       </FlexItem>
     </Flex>

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

@@ -28,13 +28,6 @@ export class Constants {
     'galaxy.add_group',
   ];
 
-  static REPOSITORYNAMES = {
-    published: defineMessage({ message: `Published` }),
-    'rh-certified': defineMessage({ message: `Red Hat Certified` }),
-    community: defineMessage({ message: `Community` }),
-    validated: defineMessage({ message: `Validated` }),
-  };
-
   static PROTECTED_REPOSITORIES = [
     'rh-certified',
     'validated',