katello 4.17.0 → 4.18.0.rc1

data/webpack/scenes/FlatpakRemotes/Details/FlatpakRemoteDetailActions.js

@@ -0,0 +1,87 @@
+import { API_OPERATIONS, APIActions, get, post, put } from 'foremanReact/redux/API';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { flatpakRemoteDetailsKey,
+  flatpakRemoteRepositoriesKey,
+  UPDATE_FLATPAK_REMOTE,
+  UPDATE_FLATPAK_REMOTE_SUCCESS,
+  UPDATE_FLATPAK_REMOTE_FAILURE,
+  DELETE_FLATPAK_REMOTE_KEY,
+  SCAN_FLATPAK_REMOTE_KEY } from '../FlatpakRemotesConstants';
+import api, { orgId } from '../../../services/api';
+import { getResponseErrorMsgs } from '../../../utils/helpers';
+import { renderTaskStartedToast } from '../../Tasks/helpers';
+
+const getFlatpakRemoteDetails = (id, extraParams = {}) => get({
+  type: API_OPERATIONS.GET,
+  key: flatpakRemoteDetailsKey(id),
+  params: { organization_id: orgId(), include_permissions: true, ...extraParams },
+  url: api.getApiUrl(`/flatpak_remotes/${id}`),
+});
+
+export const getRemoteRepositories = frId => () =>
+  get({
+    type: API_OPERATIONS.GET,
+    key: flatpakRemoteRepositoriesKey(frId),
+    url: api.getApiUrl(`/flatpak_remotes/${frId}/flatpak_remote_repositories`),
+    params: { organization_id: orgId() },
+  });
+
+export const updateFlatpakRemote = (frId, params, handleSuccess, handleError) => put({
+  type: API_OPERATIONS.PUT,
+  key: flatpakRemoteDetailsKey(frId),
+  url: api.getApiUrl(`/flatpak_remotes/${frId}`),
+  handleSuccess,
+  handleError,
+  params,
+  successToast: () => __('Flatpak remote updated'),
+  errorToast: error => getResponseErrorMsgs(error.response),
+  updateData: (_prevState, respState) => respState,
+  actionTypes: {
+    REQUEST: UPDATE_FLATPAK_REMOTE,
+    SUCCESS: UPDATE_FLATPAK_REMOTE_SUCCESS,
+    FAILURE: UPDATE_FLATPAK_REMOTE_FAILURE,
+  },
+});
+
+export const mirrorFlatpakRepository = (
+  flatpakRepoId,
+  productName,
+  handleSuccess,
+  handleError,
+) =>
+  post({
+    type: API_OPERATIONS.POST,
+    key: flatpakRemoteRepositoriesKey(flatpakRepoId),
+    url: api.getApiUrl(`/flatpak_remote_repositories/${flatpakRepoId}/mirror`),
+    params: { product_name: productName, organization_id: orgId() },
+    handleSuccess: (response) => {
+      if (handleSuccess) handleSuccess(response);
+      return renderTaskStartedToast(response.data);
+    },
+    handleError,
+    errorToast: error => getResponseErrorMsgs(error.response),
+  });
+
+export const deleteFlatpakRemote = (id, handleSuccess) => APIActions.delete({
+  type: API_OPERATIONS.DELETE,
+  key: DELETE_FLATPAK_REMOTE_KEY,
+  url: api.getApiUrl(`/flatpak_remotes/${id}`),
+  handleSuccess,
+  successToast: () => __('Flatpak remote deleted'),
+  errorToast: error => __('Flatpak remote could not be deleted: ') + getResponseErrorMsgs(error.response),
+});
+
+export const scanFlatpakRemote = (id, handleSuccess, handleError) => post({
+  type: API_OPERATIONS.POST,
+  key: SCAN_FLATPAK_REMOTE_KEY,
+  url: api.getApiUrl(`/flatpak_remotes/${id}/scan`),
+  handleSuccess: (response) => {
+    if (handleSuccess) handleSuccess(response);
+    return renderTaskStartedToast(response.data);
+  },
+  handleError,
+  errorToast: error => __('Flatpak remote scan could not be started: ') +
+        getResponseErrorMsgs(error.response),
+});
+
+export default getFlatpakRemoteDetails;

data/webpack/scenes/FlatpakRemotes/Details/FlatpakRemoteDetailReducers.js

@@ -0,0 +1,23 @@
+import Immutable from 'seamless-immutable';
+import {
+  UPDATE_FLATPAK_REMOTE,
+  UPDATE_FLATPAK_REMOTE_FAILURE,
+  UPDATE_FLATPAK_REMOTE_SUCCESS,
+} from '../FlatpakRemotesConstants';
+
+const initialState = Immutable({
+  updating: false,
+});
+
+export default (state = initialState, action) => {
+  switch (action.type) {
+  case UPDATE_FLATPAK_REMOTE:
+    return state.set('updating', true);
+  case UPDATE_FLATPAK_REMOTE_SUCCESS:
+    return state.merge({ updating: false });
+  case UPDATE_FLATPAK_REMOTE_FAILURE:
+    return state.set('updating', false);
+  default:
+    return state;
+  }
+};

data/webpack/scenes/FlatpakRemotes/Details/FlatpakRemoteDetailSelectors.js

@@ -0,0 +1,16 @@
+import { STATUS } from 'foremanReact/constants';
+import {
+  selectAPIError,
+  selectAPIResponse,
+  selectAPIStatus,
+} from 'foremanReact/redux/API/APISelectors';
+import { flatpakRemoteDetailsKey } from '../FlatpakRemotesConstants';
+
+export const selectFlatpakRemoteDetails = (state, id) =>
+  selectAPIResponse(state, flatpakRemoteDetailsKey(id)) || {};
+
+export const selectFlatpakRemoteDetailStatus =
+  (state, id) => selectAPIStatus(state, flatpakRemoteDetailsKey(id)) || STATUS.PENDING;
+
+export const selectFlatpakRemoteDetailError =
+  (state, id) => selectAPIError(state, flatpakRemoteDetailsKey(id));

data/webpack/scenes/FlatpakRemotes/Details/FlatpakRemoteDetails.js

@@ -0,0 +1,167 @@
+import React, { useState, useEffect } from 'react';
+import { useSelector, useDispatch, shallowEqual } from 'react-redux';
+import { useParams } from 'react-router-dom';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  Button,
+  Title,
+  Grid,
+  GridItem,
+  Text,
+  TextContent,
+  TextList,
+  TextListVariants,
+  Flex,
+  FlexItem,
+} from '@patternfly/react-core';
+import {
+  Dropdown,
+  DropdownItem,
+  KebabToggle,
+  DropdownPosition,
+} from '@patternfly/react-core/deprecated';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { selectFlatpakRemoteDetails } from './FlatpakRemoteDetailSelectors';
+import getFlatpakRemoteDetails, {
+  scanFlatpakRemote,
+  updateFlatpakRemote,
+} from './FlatpakRemoteDetailActions';
+import ActionableDetail from '../../../components/ActionableDetail';
+import RemoteRepositoriesTable from './RemoteRepositories/RemoteRepositoriesTable';
+import EditFlatpakRemotesModal from '../CreateEdit/EditFlatpakRemotesModal';
+import DeleteFlatpakModal from '../Delete/DeleteFlatpakModal';
+
+export default function FlatpakRemoteDetails() {
+  const { id } = useParams();
+  const frId = Number(id);
+  const [dropDownOpen, setDropdownOpen] = useState(false);
+  const [isScanning, setIsScanning] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
+  const dispatch = useDispatch();
+
+  const [currentAttribute, setCurrentAttribute] = useState(null);
+  const [isDeleteModalOpen, setDeleteModalOpen] = useState(false);
+
+  useEffect(() => {
+    dispatch(getFlatpakRemoteDetails(frId));
+  }, [dispatch, frId]);
+
+  const frDetails = useSelector(state =>
+    selectFlatpakRemoteDetails(state, frId), shallowEqual) || {};
+  const name = frDetails.name || '';
+  const url = frDetails.url || '';
+
+  const {
+    can_edit: canEdit = false,
+    can_delete: canDelete = false,
+    can_mirror: canMirror = false,
+  } = frDetails || {};
+
+  const onEdit = (val, attribute) => {
+    if (val === frDetails[attribute]) return;
+    dispatch(updateFlatpakRemote(frId, { [attribute]: val }));
+  };
+
+  const dropDownItems = [];
+  if (canEdit) {
+    dropDownItems.push(<DropdownItem key="edit" ouiaId="fr-edit" onClick={() => { setIsEditing(true); }}> {__('Edit')}</DropdownItem>);
+  }
+  if (canDelete) {
+    dropDownItems.push(<DropdownItem key="delete" ouiaId="cv-delete" onClick={() => setDeleteModalOpen(true)}>{__('Delete')}</DropdownItem>);
+  }
+
+  return (
+    <Grid hasGutter span={12} style={{ padding: '24px' }}>
+      <GridItem span={12}>
+        <Breadcrumb ouiaId="flatpak-remote-breadcrumb">
+          <BreadcrumbItem to="/flatpak_remotes">Flatpak remotes</BreadcrumbItem>
+          <BreadcrumbItem isActive>{name}</BreadcrumbItem>
+        </Breadcrumb>
+      </GridItem>
+
+      <GridItem span={12}>
+        <Flex>
+          <FlexItem>
+            <Title headingLevel="h1" size="2xl" ouiaId="flatpak-remote-title">{name}</Title>
+          </FlexItem>
+          <FlexItem align={{ default: 'alignRight' }}>
+            {canEdit &&
+            <Button
+              ouiaId="fr-details-scan-button"
+              style={{ marginLeft: 'auto' }}
+              onClick={() => {
+                setIsScanning(true);
+                dispatch(scanFlatpakRemote(
+                  frId,
+                  () => { setIsScanning(false); },
+                  () => setIsScanning(false),
+                ));
+              }
+              }
+              variant="primary"
+              aria-label="scan_flatpak_remote"
+              isLoading={isScanning}
+              isDisabled={isScanning}
+            >
+              {__('Scan')}
+            </Button>
+            }
+            {dropDownItems.length > 0 &&
+            <Dropdown
+              position={DropdownPosition.right}
+              ouiaId="fr-details-actions"
+              style={{ marginLeft: 'auto' }}
+              toggle={<KebabToggle onToggle={(_event, val) => setDropdownOpen(val)} id="toggle-dropdown" />}
+              isOpen={dropDownOpen}
+              isPlain
+              dropdownItems={dropDownItems}
+            />
+            }
+          </FlexItem>
+        </Flex>
+      </GridItem>
+
+      <GridItem span={12}>
+        <TextContent>
+          <TextList component={TextListVariants.dl}>
+            <ActionableDetail
+              key={url}
+              label={__('URL:')}
+              attribute="url"
+              onEdit={onEdit}
+              disabled={!canEdit}
+              value={url}
+              {...{ currentAttribute, setCurrentAttribute }}
+            />
+          </TextList>
+        </TextContent>
+      </GridItem>
+
+      <GridItem span={12}>
+        <TextContent>
+          <Title headingLevel="h2" size="xl" ouiaId="flatpak-remote-subtitle">Remote repositories</Title>
+          <Text component="p" ouiaId="flatpak-remote-description" style={{ color: 'gray' }}>
+            This is a list of scanned flatpaks.
+            Mirroring a scanned flatpak creates a repository in the product of your choice.
+            Sync the repository after mirroring it from this remote to distribute its content.
+          </Text>
+        </TextContent>
+      </GridItem>
+
+      <GridItem span={12}>
+        <RemoteRepositoriesTable frId={frId} canMirror={canMirror} />
+      </GridItem>
+      { isEditing &&
+        <EditFlatpakRemotesModal show={isEditing} remoteData={frDetails} setIsOpen={setIsEditing} />
+      }
+      { isDeleteModalOpen &&
+        <DeleteFlatpakModal
+          isModalOpen={isDeleteModalOpen}
+          handleModalToggle={() => setDeleteModalOpen(!isDeleteModalOpen)}
+          remoteId={frId}
+        />
+        }
+    </Grid>
+  );
+}

data/webpack/scenes/FlatpakRemotes/Details/Mirror/MirrorRepositoryModal.js

@@ -0,0 +1,135 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { useDispatch } from 'react-redux';
+import { translate as __ } from 'foremanReact/common/I18n';
+import {
+  Modal,
+  ModalVariant,
+  Form,
+  FormGroup,
+  ActionGroup,
+  Button,
+  TextContent,
+  Text,
+  TextVariants,
+} from '@patternfly/react-core';
+import { orgId } from '../../../../services/api';
+import SearchText from '../../../../components/Search/SearchText';
+import { getRemoteRepositories, mirrorFlatpakRepository } from '../FlatpakRemoteDetailActions';
+
+const MirrorRepositoryModal = ({
+  frId,
+  closeModal,
+  repo,
+  onMirrorSuccess,
+}) => {
+  const dispatch = useDispatch();
+
+  const autoCompleteEndpoint = '/katello/api/v2/products/auto_complete_name';
+  const searchParams = term => ({
+    organization_id: orgId(),
+    enabled: true,
+    custom: true,
+    page: 1,
+    per_page: 5,
+    term,
+  });
+
+  const [productName, setProductName] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const handleSearchChange = (rawValue) => {
+    setProductName(rawValue.trim());
+  };
+
+  const handleMirror = (e) => {
+    e.preventDefault();
+    if (!productName || loading) return;
+    setLoading(true);
+    dispatch(mirrorFlatpakRepository(
+      repo.id,
+      productName,
+      () => {
+        dispatch(getRemoteRepositories(frId)());
+        setLoading(false);
+        if (onMirrorSuccess) onMirrorSuccess();
+        closeModal();
+      },
+      () => {
+        setLoading(false);
+        closeModal();
+      },
+    ));
+  };
+
+  return (
+    <Modal
+      ouiaId="mirror-repo-modal"
+      title={__('Mirror Repository')}
+      variant={ModalVariant.medium}
+      isOpen
+      onClose={closeModal}
+      appendTo={document.body}
+    >
+      <TextContent>
+        <Text component={TextVariants.p} ouiaId="mirror-text-info">
+          {__('Mirroring will import the remote flatpak repository')} <strong>{repo.name}</strong>{' '}
+          {__('into a product. Details from the flatpak remote will automatically populate the repository fields. The repository will be available for syncing once it has been mirrored into a product.')}
+        </Text>
+        <Text component={TextVariants.p} ouiaId="mirror-select-product">
+          {__('Select a product to mirror the repository into')}
+        </Text>
+      </TextContent>
+      <Form onSubmit={handleMirror}>
+        <FormGroup label={__('Product')} isRequired fieldId="mirror-product">
+          <SearchText
+            value={productName}
+            data={{
+              autocomplete: {
+                url: autoCompleteEndpoint,
+                apiParams: searchParams,
+              },
+            }}
+            onSearchChange={handleSearchChange}
+            aria-label="product-search"
+          />
+        </FormGroup>
+
+        <ActionGroup>
+          <Button
+            ouiaId="confirm-mirror-btn"
+            variant="primary"
+            type="submit"
+            isLoading={loading}
+            isDisabled={!productName || loading}
+          >
+            {__('Mirror')}
+          </Button>
+          <Button
+            ouiaId="cancel-mirror-btn"
+            variant="link"
+            onClick={closeModal}
+          >
+            {__('Cancel')}
+          </Button>
+        </ActionGroup>
+      </Form>
+    </Modal>
+  );
+};
+
+MirrorRepositoryModal.propTypes = {
+  frId: PropTypes.number.isRequired,
+  closeModal: PropTypes.func.isRequired,
+  repo: PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    name: PropTypes.string.isRequired,
+  }).isRequired,
+  onMirrorSuccess: PropTypes.func,
+};
+
+MirrorRepositoryModal.defaultProps = {
+  onMirrorSuccess: null,
+};
+
+export default MirrorRepositoryModal;

data/webpack/scenes/FlatpakRemotes/Details/Mirror/__tests__/mirrorRepositoryModal.test.js

@@ -0,0 +1,167 @@
+import React from 'react';
+import { Route } from 'react-router-dom';
+import { renderWithRedux, patientlyWaitFor } from 'react-testing-lib-wrapper';
+import { fireEvent } from '@testing-library/react';
+import { nockInstance, assertNockRequest } from '../../../../../test-utils/nockWrapper';
+import api from '../../../../../services/api';
+import FlatpakRemoteDetails from '../../FlatpakRemoteDetails';
+import FLATPAK_REMOTES_KEY from '../../../FlatpakRemotesConstants';
+import frDetailData from '../../__tests__/flatpakRemoteDetails.fixtures.json';
+
+jest.mock('react-intl', () => ({ addLocaleData: () => { }, FormattedDate: () => 'mocked' }));
+
+const withFRRoute = component => <Route path="/flatpak_remotes/:id([0-9]+)">{component}</Route>;
+
+const renderOptions = {
+  apiNamespace: `${FLATPAK_REMOTES_KEY}_1`,
+  routerParams: {
+    initialEntries: [{ pathname: '/flatpak_remotes/1' }],
+    initialIndex: 1,
+  },
+};
+
+const frDetailsPath = api.getApiUrl('/flatpak_remotes/1');
+const repoApiUrl = api.getApiUrl('/flatpak_remotes/1/flatpak_remote_repositories');
+
+test('Can open mirror repository modal', async () => {
+  const frDetailsScope = nockInstance
+    .get(frDetailsPath)
+    .query(true)
+    .reply(200, frDetailData);
+
+  const scopeRepos = nockInstance
+    .get(repoApiUrl)
+    .query(true)
+    .times(2)
+    .reply(200, {
+      results: frDetailData.repositories,
+      subtotal: frDetailData.repositories.length,
+      page: 1,
+      per_page: 20,
+    });
+
+  const productAutocompleteScope = nockInstance
+    .get(api.getApiUrl('/products/auto_complete_name'))
+    .query(true)
+    .reply(200, ['Product1', 'Product2', 'Product3']);
+
+  const flatpakRepoAutocompleteScope = nockInstance
+    .get(api.getApiUrl('/flatpak_remote_repositories/auto_complete_search'))
+    .query(true)
+    .reply(200, []);
+
+  const { getByText, getByRole } = renderWithRedux(
+    withFRRoute(<FlatpakRemoteDetails />),
+    renderOptions,
+  );
+
+  await patientlyWaitFor(() => {
+    expect(getByText(frDetailData.repositories[0].name)).toBeInTheDocument();
+  });
+
+  await patientlyWaitFor(() => {
+    expect(getByText('Mirror', {
+      selector: '[data-ouia-component-id="mirror-button-1"]',
+    })).toBeInTheDocument();
+  });
+
+  getByText('Mirror', {
+    selector: '[data-ouia-component-id="mirror-button-1"]',
+  }).click();
+
+  await patientlyWaitFor(() => {
+    expect(getByRole('textbox')).toBeInTheDocument();
+    expect(getByText('Mirror', {
+      selector: '[data-ouia-component-id="confirm-mirror-btn"]',
+    })).toBeInTheDocument();
+  });
+
+  assertNockRequest(frDetailsScope);
+  assertNockRequest(scopeRepos);
+  assertNockRequest(productAutocompleteScope);
+  assertNockRequest(flatpakRepoAutocompleteScope);
+});
+
+test('Can successfully mirror a repository', async () => {
+  const selectedRepo = frDetailData.repositories[0];
+  const productName = 'Product1';
+
+  const frDetailsScope = nockInstance
+    .get(frDetailsPath)
+    .query(true)
+    .reply(200, frDetailData);
+
+  const scopeRepos = nockInstance
+    .get(repoApiUrl)
+    .query(true)
+    .times(3)
+    .reply(200, {
+      results: frDetailData.repositories,
+      subtotal: frDetailData.repositories.length,
+      page: 1,
+      per_page: 20,
+    });
+
+  const productAutocompleteScope = nockInstance
+    .get(api.getApiUrl('/products/auto_complete_name'))
+    .query(true)
+    .reply(200, ['Product1', 'Product2', 'Product3']);
+
+  const flatpakRepoAutocompleteScope = nockInstance
+    .get(api.getApiUrl('/flatpak_remote_repositories/auto_complete_search'))
+    .query(true)
+    .reply(200, []);
+
+  const mirrorScope = nockInstance
+    .post(api.getApiUrl(`/flatpak_remote_repositories/${selectedRepo.id}/mirror`), {
+      product_name: productName,
+      organization_id: 1,
+    })
+    .reply(200, { task_id: 'mirror-task-123' });
+
+  const { getByText, getByRole } = renderWithRedux(
+    withFRRoute(<FlatpakRemoteDetails />),
+    renderOptions,
+  );
+
+  await patientlyWaitFor(() => {
+    expect(getByText(selectedRepo.name)).toBeInTheDocument();
+  });
+
+  await patientlyWaitFor(() => {
+    expect(getByText('Mirror', {
+      selector: '[data-ouia-component-id="mirror-button-1"]',
+    })).toBeInTheDocument();
+  });
+
+
+  getByText('Mirror', {
+    selector: '[data-ouia-component-id="mirror-button-1"]',
+  }).click();
+
+  await patientlyWaitFor(() => {
+    expect(getByText('Mirror Repository')).toBeInTheDocument();
+  });
+
+  const productInput = getByRole('textbox');
+  fireEvent.change(productInput, { target: { value: productName } });
+
+  await patientlyWaitFor(() => {
+    expect(getByText('Mirror', {
+      selector: '[data-ouia-component-id="confirm-mirror-btn"]',
+    })).toBeInTheDocument();
+  });
+
+  getByText('Mirror', {
+    selector: '[data-ouia-component-id="confirm-mirror-btn"]',
+  }).click();
+
+  await patientlyWaitFor(() => {
+    assertNockRequest(mirrorScope);
+  });
+
+  assertNockRequest(frDetailsScope);
+  assertNockRequest(scopeRepos);
+  assertNockRequest(productAutocompleteScope);
+  assertNockRequest(flatpakRepoAutocompleteScope);
+});