katello 4.3.0.rc4 → 4.4.0.rc2

data/webpack/scenes/ContentViews/Details/Versions/VersionDetails/ContentViewVersionDetailsHeader.js

@@ -2,12 +2,11 @@ import React, { useState, useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
 import {
+  Grid,
   GridItem,
   TextContent,
   Text,
-  TextList,
   TextVariants,
-  TextListVariants,
   Label,
   Flex,
   FlexItem,
@@ -17,11 +16,11 @@ import {
   DropdownPosition,
 } from '@patternfly/react-core';
 import { translate as __ } from 'foremanReact/common/I18n';
-import EditableTextInput from '../../../../../components/EditableTextInput';
 import { hasPermission } from '../../../helpers';
 import ContentViewVersionPromote from '../../Promote/ContentViewVersionPromote';
 import getEnvironmentPaths from '../../../components/EnvironmentPaths/EnvironmentPathActions';
 import RemoveCVVersionWizard from '../Delete/RemoveCVVersionWizard';
+import ActionableDetail from '../../../../../components/ActionableDetail';
 
 const ContentViewVersionDetailsHeader = ({
   versionDetails: {
@@ -29,6 +28,7 @@ const ContentViewVersionDetailsHeader = ({
   },
   onEdit,
   details: { permissions },
+  loading,
 }) => {
   const dispatch = useDispatch();
   useEffect(
@@ -72,7 +72,7 @@ const ContentViewVersionDetailsHeader = ({
   ];
 
   return (
-    <>
+    <Grid className="margin-0-24">
       <GridItem span={10}>
         <TextContent>
           <Text component={TextVariants.h2}>{__('Version ')}{version}</Text>
@@ -90,25 +90,23 @@ const ContentViewVersionDetailsHeader = ({
             >
               {__('Actions')}
             </DropdownToggle>
-        }
+          }
           isOpen={dropdownOpen}
           dropdownItems={dropDownItems}
         />
       </GridItem>
       <GridItem className="content-view-header-content" span={12}>
         <TextContent>
-          <TextList component={TextListVariants.dl}>
-            <EditableTextInput
-              key={description} // This fixes a render issue with the initial value
-              textArea
-              label={__('Description')}
-              attribute="description"
-              placeholder={__('No description')}
-              onEdit={onEdit}
-              disabled={!hasPermission(permissions, 'edit_content_views')}
-              value={description}
-            />
-          </TextList>
+          <ActionableDetail
+            key={description} // This fixes a render issue with the initial value
+            textArea
+            attribute="description"
+            loading={loading}
+            placeholder={__('No description')}
+            onEdit={onEdit}
+            disabled={!hasPermission(permissions, 'edit_content_views')}
+            value={description}
+          />
         </TextContent>
         <Flex>
           {environments?.map(({ name, id: envId }) =>
@@ -116,32 +114,32 @@ const ContentViewVersionDetailsHeader = ({
         </Flex>
       </GridItem>
       {promoting &&
-      <ContentViewVersionPromote
-        cvId={cvId}
-        versionIdToPromote={id}
-        versionNameToPromote={version}
-        versionEnvironments={environments}
-        setIsOpen={setPromoting}
-        detailsPage
-        aria-label="promote_content_view_modal"
-      />
+        <ContentViewVersionPromote
+          cvId={cvId}
+          versionIdToPromote={id}
+          versionNameToPromote={version}
+          versionEnvironments={environments}
+          setIsOpen={setPromoting}
+          detailsPage
+          aria-label="promote_content_view_modal"
+        />
       }
       {removingFromEnv &&
-      <RemoveCVVersionWizard
-        cvId={cvId}
-        versionIdToRemove={id}
-        versionNameToRemove={version}
-        versionEnvironments={environments}
-        show={removingFromEnv}
-        setIsOpen={setRemovingFromEnv}
-        currentStep={currentStep}
-        setCurrentStep={setCurrentStep}
-        deleteWizard={deleteVersion}
-        detailsPage
-        aria-label="remove_content_view_version_modal"
-      />
+        <RemoveCVVersionWizard
+          cvId={cvId}
+          versionIdToRemove={id}
+          versionNameToRemove={version}
+          versionEnvironments={environments}
+          show={removingFromEnv}
+          setIsOpen={setRemovingFromEnv}
+          currentStep={currentStep}
+          setCurrentStep={setCurrentStep}
+          deleteWizard={deleteVersion}
+          detailsPage
+          aria-label="remove_content_view_version_modal"
+        />
       }
-    </>
+    </Grid>
   );
 };
 
@@ -163,6 +161,7 @@ ContentViewVersionDetailsHeader.propTypes = {
   details: PropTypes.shape({
     permissions: PropTypes.shape({}),
   }).isRequired,
+  loading: PropTypes.bool.isRequired,
 };
 
 export default ContentViewVersionDetailsHeader;

data/webpack/scenes/ContentViews/Details/Versions/VersionDetails/ContentViewVersionDetailsTable.js

@@ -1,21 +1,31 @@
 /* eslint-disable react/no-array-index-key */
-import React, { useState, useEffect } from 'react';
-import { head } from 'lodash';
-import PropTypes from 'prop-types';
-import { useSelector, shallowEqual } from 'react-redux';
-import { Grid, Select, SelectOption, SelectVariant } from '@patternfly/react-core';
+import React, { useState } from 'react';
 import { translate as __ } from 'foremanReact/common/I18n';
-import { TableVariant, Thead, Tbody, Tr, Th, Td } from '@patternfly/react-table';
+import PropTypes from 'prop-types';
+import {
+  shallowEqual,
+  useSelector,
+} from 'react-redux';
+import {
+  Grid,
+  Select,
+  SelectOption,
+  SelectVariant,
+} from '@patternfly/react-core';
+import {
+  TableVariant,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+} from '@patternfly/react-table';
+import { useUrlParams } from '../../../../../components/Table/TableHooks';
 import TableWrapper from '../../../../../components/Table/TableWrapper';
 import { TableType } from './ContentViewVersionDetailConfig';
 
-const ContentViewVersionDetailsTable = ({ tableConfig, repositories }) => {
-  const ALL_REPOSITORIES = __('All Repositories');
-  const [searchQuery, updateSearchQuery] = useState('');
-  const [open, setOpen] = useState(false);
-  const [selected, setSelected] = useState(0);
-  const [selectedList, setSelectedList] = useState([]);
-  const {
+const ContentViewVersionDetailsTable = ({
+  tableConfig: {
     name,
     repoType,
     responseSelector,
@@ -24,33 +34,35 @@ const ContentViewVersionDetailsTable = ({ tableConfig, repositories }) => {
     fetchItems,
     columnHeaders,
     disableSearch,
-  } = tableConfig;
+  }, repositories,
+}) => {
+  const ALL_REPOSITORIES = __('All Repositories');
+  const [searchQuery, updateSearchQuery] = useState('');
+  const [open, setOpen] = useState(false);
+  const { repository_id: urlParamId } = useUrlParams();
+
+  const relevantRepositories = repositories
+    .filter(({ content_type: contentType }) => repoType === contentType);
+
+  const selectedList = relevantRepositories.length > 1 ? [
+    {
+      id: undefined,
+      name: ALL_REPOSITORIES,
+    },
+    ...relevantRepositories] :
+    relevantRepositories;
+
+  const presetIndex = selectedList
+    .findIndex(({ library_instance_id: id }) =>
+      id === Number(urlParamId));
+  const [selected, setSelected] = useState(presetIndex ?? 0);
 
   const response = useSelector(responseSelector, shallowEqual);
   const { results, ...metadata } = response;
   const status = useSelector(statusSelector, shallowEqual);
 
-  useEffect(() => {
-    const relevantRepositories = repositories
-      .filter(({ content_type: contentType }) => repoType === contentType);
-
-    switch (relevantRepositories.length) {
-      case 1:
-        setSelected(head(relevantRepositories));
-        setSelectedList([...relevantRepositories]);
-        break;
-      default:
-        setSelected(0);
-        setSelectedList([{
-          id: undefined,
-          name: ALL_REPOSITORIES,
-        }, ...relevantRepositories]);
-        break;
-    }
-  }, [repositories, ALL_REPOSITORIES, repoType]);
-
   const fetchItemsWithRepositoryId = (params) => {
-    if (selectedList.length === 1) return fetchItems(params);
+    if (selectedList?.length === 1) return fetchItems(params);
     return fetchItems({ repository_id: selectedList[selected]?.id, ...params });
   };
 

data/webpack/scenes/ContentViews/Details/Versions/VersionDetails/ContentViewVersionRepositoryCell.js

@@ -1,14 +1,18 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { urlBuilder } from 'foremanReact/common/urlHelpers';
-import { isEmpty } from 'lodash';
+import {
+  camelCase,
+  isEmpty,
+} from 'lodash';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
 import {
   Grid,
   GridItem,
 } from '@patternfly/react-core';
-import InactiveText from '../../../components/InactiveText';
 import ContentConfig from '../../../../Content/ContentConfig';
+import InactiveText from '../../../components/InactiveText';
 
 const ContentViewVersionRepositoryCell = ({
   data: {
@@ -18,92 +22,105 @@ const ContentViewVersionRepositoryCell = ({
   },
 }) => {
   const CONTENT_COUNTS = {
-    ansible_collection: {
-      name: __('Ansible collections'),
-      url: `ansible_collections?repositoryId=${libraryInstanceId}`,
+    rpm: {
+      name: __('RPM packages'),
+      to: `rpmPackages?repository_id=${libraryInstanceId}`,
+    },
+    module_stream: {
+      name: __('Module streams'),
+      to: `moduleStreams?repository_id=${libraryInstanceId}`,
+    },
+    erratum: {
+      name: __('Errata'),
+      to: `errata?repository_id=${libraryInstanceId}`,
     },
     deb: {
       name: __('Deb packages'),
-      url: `debs?repositoryId=${libraryInstanceId}`,
+      to: `debPackages?repository_id=${libraryInstanceId}`,
+    },
+    ansible_collection: {
+      name: __('Ansible collections'),
+      to: `ansibleCollections?repository_id=${libraryInstanceId}`,
     },
     docker_manifest: {
       name: __('Container manifests'),
-      url: `products/${id}/repositories/${libraryInstanceId}/content/content/docker_manifests`,
+      url: `products/${id}/repositories/${libraryInstanceId}/content/docker_manifests`,
     },
     docker_manifest_list: {
       name: __('Container manifest lists'),
-      url: `products/${id}/repositories/${libraryInstanceId}/content/content/docker_manifest_lists`,
+      url: `products/${id}/repositories/${libraryInstanceId}/content/docker_manifest_lists`,
     },
     docker_tag: {
       name: __('Container image tags'),
-      url: `docker_tags?repositoryId=${libraryInstanceId}`,
-    },
-    erratum: {
-      name: __('Errata'),
-      url: `errata?repositoryId=${libraryInstanceId}`,
+      to: `dockerTags?repository_id=${libraryInstanceId}`,
     },
     file: {
       name: __('Files'),
-      url: `files?repositoryId=${libraryInstanceId}`,
-    },
-    module_stream: {
-      name: __('Module streams'),
-      url: `products/${id}/repositories/${libraryInstanceId}/content/module_streams`,
-    },
-    package: {
-      name: __('Packages'),
-      url: `products/${id}/repositories/${libraryInstanceId}/content/packages`,
+      to: `files?repository_id=${libraryInstanceId}`,
     },
     package_group: {
       name: __('Package groups'),
-      url: `products/${id}/repositories/${libraryInstanceId}/content/package_groups`,
-    },
-    rpm: {
-      name: __('Rpm packages'),
-      url: `packages?repositoryId=${libraryInstanceId}`,
+      to: `rpmPackageGroups?repository_id=${libraryInstanceId}`,
     },
     srpm: {
       name: __('Source RPMs'),
     },
   };
 
-  ContentConfig().forEach((type) => {
+  ContentConfig.forEach((type) => {
     CONTENT_COUNTS[type.names.singularLabel] = {
       name: type.names.pluralLowercase,
-      url: `products/${id}/repositories/${libraryInstanceId}/content/${type.names.pluralLabel}`,
+      to: `${camelCase(type.names.pluralLabel)}?repository_id=${libraryInstanceId}`,
     };
   });
 
   const getContentSpan = (num) => {
     switch (true) {
-      case num < 4:
-        return 12;
-      case num > 4 && num < 9:
-        return 6;
-      case num > 9:
-        return 4;
-      default:
-        return 12;
+    case num < 4:
+      return 12;
+    case num > 4 && num < 9:
+      return 6;
+    case num > 9:
+      return 4;
+    default:
+      return 12;
+    }
+  };
+
+  const CountComponent = ({ countKey }) => {
+    const { to, url, name } = CONTENT_COUNTS[countKey];
+    const count = ContentCounts[countKey];
+    switch (true) {
+    case !!url:
+      return (
+        <a href={urlBuilder(url, '')}>
+          {count} {name}
+        </a>);
+    case !!to:
+      return (
+        <Link to={to}>
+          {count} {name}
+        </Link>);
+    default:
+      return `${count} ${name} `;
     }
   };
 
+  CountComponent.propTypes = {
+    countKey: PropTypes.string.isRequired,
+  };
+
   const contentCountArray = Object.keys(CONTENT_COUNTS);
   const contentCountToShow = contentCountArray.filter(key => !!ContentCounts[key]);
   const contentSpan = getContentSpan(contentCountToShow.length);
+
   return (
     <Grid>
       {!isEmpty(contentCountToShow) ?
-        contentCountToShow.map((countKey) => {
-          const { url = undefined, name } = CONTENT_COUNTS[countKey];
-          const count = ContentCounts[countKey];
-          return (
-            <GridItem key={countKey} span={contentSpan}>
-              {url ?
-                <a href={urlBuilder(url, '')}>
-                  {count} {name}
-                </a> : `${count} ${name} `}
-            </GridItem>);
-        }) : <InactiveText text={__('N/A')} />
+        contentCountToShow.map(countKey => (
+          <GridItem key={countKey} span={contentSpan}>
+            <CountComponent countKey={countKey} />
+          </GridItem>)) : <InactiveText text={__('N/A')} />
       }
     </Grid >
   );

data/webpack/scenes/ContentViews/Details/Versions/VersionDetails/__tests__/ContentViewVersionDetails.test.js

@@ -176,7 +176,7 @@ const testConfig = [
       last(ContentViewVersionAnsibleCollectionsData.results).checksum],
   },
   {
-    name: 'Docker Tags',
+    name: 'Container tags',
     countKey: 'docker_tag_count',
     autoCompleteUrl: '/docker_tags/auto_complete_search',
     dataUrl: api.getApiUrl('/docker_tags'),
@@ -199,8 +199,8 @@ testConfig.forEach(({
     const { version } = ContentViewVersionDetailsData;
 
     const autocompleteScope = mockAutocomplete(nockInstance, autoCompleteUrl);
-    const searchDelayScope = mockSetting(nockInstance, AUTOSEARCH_DELAY, 500);
-    const autoSearchScope = mockSetting(nockInstance, AUTOSEARCH_WHILE_TYPING, true);
+    const searchDelayScope = mockSetting(nockInstance, AUTOSEARCH_DELAY);
+    const autoSearchScope = mockSetting(nockInstance, AUTOSEARCH_WHILE_TYPING);
 
     const scope = nockInstance
       .get(cvVersions)
@@ -251,8 +251,8 @@ test('Can change repository selector', async (done) => {
 
   const { version } = ContentViewVersionDetailsData;
   const autocompleteScope = mockAutocomplete(nockInstance, autoCompleteUrl);
-  const searchDelayScope = mockSetting(nockInstance, AUTOSEARCH_DELAY, 500);
-  const autoSearchScope = mockSetting(nockInstance, AUTOSEARCH_WHILE_TYPING, true);
+  const searchDelayScope = mockSetting(nockInstance, AUTOSEARCH_DELAY, 0);
+  const autoSearchScope = mockSetting(nockInstance, AUTOSEARCH_WHILE_TYPING);
 
   const scope = nockInstance
     .get(cvVersions)

data/webpack/scenes/ContentViews/Details/Versions/__tests__/contentViewVersions.test.js

@@ -41,8 +41,8 @@ let envScope;
 beforeEach(() => {
   const { results } = cvVersionsData;
   [firstVersion] = results;
-  searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 500);
-  autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing', true);
+  searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0);
+  autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing');
   envScope = nockInstance
     .get(environmentPathsPath)
     .query(true)
@@ -122,7 +122,7 @@ test('Can show package and erratas and link to list page', async () => {
 
   await patientlyWaitFor(() => {
     expect(getAllByText(8)[0].closest('a'))
-      .toHaveAttribute('href', '/content_views/5#/versions/11/packages/');
+      .toHaveAttribute('href', '/content_views/5#/versions/11/rpmPackages/');
     expect(getAllByText(15)[0].closest('a'))
       .toHaveAttribute('href', '/content_views/5#/versions/11/errata/');
     expect(getByText(5)).toBeInTheDocument();

data/webpack/scenes/ContentViews/Details/__tests__/contentViewDetail.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Route } from 'react-router-dom';
-import { renderWithRedux, patientlyWaitFor, fireEvent } from 'react-testing-lib-wrapper';
+import { renderWithRedux, patientlyWaitFor, fireEvent, act } from 'react-testing-lib-wrapper';
 import { nockInstance, assertNockRequest } from '../../../../test-utils/nockWrapper';
 import api from '../../../../services/api';
 import ContentViewDetails from '../ContentViewDetails';
@@ -53,7 +53,7 @@ test('Can edit text details such as name', async (done) => {
     .query(true)
     .reply(200, cvDetailData);
   const updatescope = nockInstance
-    .put(cvDetailsPath, { name: newName })
+    .put(cvDetailsPath, { include_permissions: true, name: newName })
     .reply(200, updatedCVDetails);
   const afterUpdateScope = nockInstance
     .get(cvDetailsPath)
@@ -81,6 +81,7 @@ test('Can edit text details such as name', async (done) => {
   assertNockRequest(getscope);
   assertNockRequest(updatescope);
   assertNockRequest(afterUpdateScope, done);
+  act(done);
 });
 
 test('Can edit boolean details such as solve dependencies', async (done) => {
@@ -90,7 +91,7 @@ test('Can edit boolean details such as solve dependencies', async (done) => {
     .query(true)
     .reply(200, cvDetailData);
   const updatescope = nockInstance
-    .put(cvDetailsPath, { solve_dependencies: true })
+    .put(cvDetailsPath, { include_permissions: true, solve_dependencies: true })
     .reply(200, updatedCVDetails);
   const afterUpdateScope = nockInstance
     .get(cvDetailsPath)
@@ -115,6 +116,7 @@ test('Can edit boolean details such as solve dependencies', async (done) => {
   assertNockRequest(getscope);
   assertNockRequest(updatescope);
   assertNockRequest(afterUpdateScope, done);
+  act(done);
 });
 
 test('Can link to view tasks', async () => {

data/webpack/scenes/ContentViews/Publish/CVPublishFinish.js

@@ -136,8 +136,8 @@ const CVPublishFinish = ({
             <Bullseye>
               <Button
                 onClick={() => {
-                handleEndTask({ taskComplete: false });
-              }}
+                  handleEndTask({ taskComplete: false });
+                }}
                 variant="primary"
                 aria-label="publish_content_view"
               >

data/webpack/scenes/ContentViews/Table/ContentViewsTable.js

@@ -166,10 +166,10 @@ const ContentViewTable = () => {
 
   const indexToSortVariable = (key) => {
     switch (key) {
-      case 2:
-        return 'name';
-      default:
-        return undefined;
+    case 2:
+      return 'name';
+    default:
+      return undefined;
     }
   };
 
@@ -191,7 +191,7 @@ const ContentViewTable = () => {
     [sortByIndex, direction],
   );
 
-  const emptyContentTitle = __("You currently don't have any Content Views.");
+  const emptyContentTitle = __("You currently don't have any Content views.");
   const emptyContentBody = __('A content view can be added by using the "Create content view" button above.');
   const emptySearchTitle = __('No matching content views found');
   const emptySearchBody = __('Try changing your search settings.');

data/webpack/scenes/ContentViews/__tests__/contentViewPage.test.js

@@ -26,8 +26,8 @@ beforeEach(() => {
     .get('/api/v2/bookmarks')
     .query(true)
     .reply(200, {});
-  searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 500);
-  autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing', true);
+  searchDelayScope = mockSetting(nockInstance, 'autosearch_delay', 0);
+  autoSearchScope = mockSetting(nockInstance, 'autosearch_while_typing');
 });
 
 afterEach(() => {
@@ -173,7 +173,7 @@ test('Can handle no Content Views being present', async (done) => {
   const { queryByText } = renderWithRedux(<ContentViewsPage />, renderOptions);
 
   expect(queryByText(firstCV.name)).toBeNull();
-  await patientlyWaitFor(() => expect(queryByText(/don't have any Content Views/i)).toBeInTheDocument());
+  await patientlyWaitFor(() => expect(queryByText(/don't have any Content views/i)).toBeInTheDocument());
   assertNockRequest(autocompleteScope);
   assertNockRequest(scope, done);
 });

data/webpack/scenes/ContentViews/components/CVBreadCrumb.js

@@ -101,7 +101,7 @@ const CVBreadcrumb = () => {
     filterDetails, filterDetailsStatus, breadcrumbItems, setBreadcrumbItems]);
 
   return (
-    <Breadcrumb style={{ marginTop: '15px' }}>
+    <Breadcrumb className="margin-bottom-24">
       {
         Object.keys(breadcrumbItems)?.sort()?.map(key => (
           <BreadcrumbItem

data/webpack/scenes/ContentViews/components/ContentViewsCounter.js

@@ -13,7 +13,7 @@ const ContentViewsCounter = () => {
     content_view_components_count: component,
   } = organization;
   return (
-    <Grid className="grid-with-margin">
+    <Grid>
       <GridItem span={12}>
         <b>
           <Flex>

data/webpack/scenes/ContentViews/components/EnvironmentLabels.js

@@ -5,24 +5,24 @@ const EnvironmentLabels = (environments) => {
   const { environments: singleEnvironment } = environments || {};
   const { name } = singleEnvironment || {};
   switch (environments) {
-    case Array:
-      return environments.map(env => (
-        <React.Fragment key={env.id} style={{ marginBottom: '5px' }}>
-          <Label
-            color="purple"
-            isTruncated
-          >{env.name}
-          </Label>
-        </React.Fragment>
-      ));
-    default:
-      return (
-        <React.Fragment>
-          <Label color="purple" isTruncated>
-            {name}
-          </Label>
-        </React.Fragment>
-      );
+  case Array:
+    return environments.map(env => (
+      <React.Fragment key={env.id} style={{ marginBottom: '5px' }}>
+        <Label
+          color="purple"
+          isTruncated
+        >{env.name}
+        </Label>
+      </React.Fragment>
+    ));
+  default:
+    return (
+      <React.Fragment>
+        <Label color="purple" isTruncated>
+          {name}
+        </Label>
+      </React.Fragment>
+    );
   }
 };
 

data/webpack/scenes/ContentViews/components/EnvironmentPaths/EnvironmentPaths.js

@@ -47,19 +47,19 @@ const EnvironmentPaths = ({
               {index === 0 && <hr />}
               <FormGroup key={`fg-${index}`} isInline fieldId="environment-checkbox-group">
                 {environments.map(env =>
-                (<Checkbox
-                  isChecked={(publishing && env.library) ||
+                  (<Checkbox
+                    isChecked={(publishing && env.library) ||
                     envCheckedInList(env, userCheckedItems) ||
                     envCheckedInList(env, promotedEnvironments)}
-                  isDisabled={(publishing && env.library)
+                    isDisabled={(publishing && env.library)
                     || envCheckedInList(env, promotedEnvironments)}
-                  className="env-path__labels-with-pointer"
-                  key={`${env.id}${index}`}
-                  id={`${env.id}${index}`}
-                  label={<EnvironmentLabels environments={env} />}
-                  aria-label={env.label}
-                  onChange={checked => oncheckedChange(checked, env)}
-                />))}
+                    className="env-path__labels-with-pointer"
+                    key={`${env.id}${index}`}
+                    id={`${env.id}${index}`}
+                    label={<EnvironmentLabels environments={env} />}
+                    aria-label={env.label}
+                    onChange={checked => oncheckedChange(checked, env)}
+                  />))}
               </FormGroup>
               <hr />
             </div>