katello 4.17.1 → 4.18.0.rc2

data/webpack/scenes/FlatpakRemotes/FlatpakRemotesPage.js

@@ -0,0 +1,202 @@
+import React, { useState } from 'react';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { useDispatch, useSelector } from 'react-redux';
+import { Table, Thead, Th, Tbody, Tr, Td } from '@patternfly/react-table';
+import TableIndexPage from 'foremanReact/components/PF4/TableIndexPage/TableIndexPage';
+import {
+  useSetParamsAndApiAndSearch,
+  useTableIndexAPIResponse,
+} from 'foremanReact/components/PF4/TableIndexPage/Table/TableIndexHooks';
+import { useTableSort } from 'foremanReact/components/PF4/Helpers/useTableSort';
+import EmptyPage from 'foremanReact/routes/common/EmptyPage';
+import Pagination from 'foremanReact/components/Pagination';
+import { urlBuilder } from 'foremanReact/common/urlHelpers';
+import { STATUS } from 'foremanReact/constants';
+import { selectFlatpakRemotes, selectFlatpakRemotesError, selectFlatpakRemotesStatus } from './FlatpakRemotesSelectors';
+import { getResponseErrorMsgs, truncate } from '../../utils/helpers';
+import CreateFlatpakModal from './CreateEdit/CreateFlatpakRemoteModal';
+import EditFlatpakModal from './CreateEdit/EditFlatpakRemotesModal';
+import { scanFlatpakRemote } from './Details/FlatpakRemoteDetailActions';
+import DeleteFlatpakModal from './Delete/DeleteFlatpakModal';
+
+const FlatpakRemotesPage = () => {
+  const response = useSelector(selectFlatpakRemotes);
+  const error = useSelector(selectFlatpakRemotesError);
+  const status = useSelector(selectFlatpakRemotesStatus);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isEditModalOpen, setEditModalOpen] = useState(false);
+  const [editingRemoteData, setEditingRemoteData] = useState(null);
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [remoteIdToDelete, setRemoteIdToDelete] = useState('');
+  const dispatch = useDispatch();
+  const {
+    results = [],
+    subtotal,
+    page,
+    perPage,
+    can_edit: canEdit = false,
+    can_delete: canDelete = false,
+    can_create: canCreate = false,
+  } = response || {};
+
+  const columnHeaders = [__('Name'), __('URL')];
+  const COLUMNS_TO_SORT_PARAMS = {
+    [columnHeaders[0]]: 'name',
+    [columnHeaders[1]]: 'url',
+  };
+
+  const apiOptions = {
+    key: 'FLATPAK_REMOTES',
+  };
+
+  const defaultParams = {
+    page: page || 1,
+    per_page: perPage || 20,
+  };
+
+  const apiUrl = '/katello/api/v2/flatpak_remotes';
+
+  const apiResponse = useTableIndexAPIResponse({
+    apiUrl,
+    apiOptions,
+    defaultParams,
+  });
+
+  const {
+    setParamsAndAPI,
+    params,
+  } = useSetParamsAndApiAndSearch({
+    defaultParams,
+    apiOptions,
+    setAPIOptions: apiResponse.setAPIOptions,
+  });
+
+  const onSort = (_event, index, direction) => {
+    const sortBy = Object.values(COLUMNS_TO_SORT_PARAMS)[index];
+    setParamsAndAPI({
+      ...params,
+      order: `${sortBy} ${direction}`,
+    });
+  };
+
+  const onPaginationChange = (newPagination) => {
+    setParamsAndAPI({
+      ...params,
+      ...newPagination,
+    });
+  };
+
+  const { pfSortParams } = useTableSort({
+    allColumns: columnHeaders,
+    columnsToSortParams: COLUMNS_TO_SORT_PARAMS,
+    onSort,
+  });
+
+  const openCreateModal = () => setIsModalOpen(true);
+
+  const actionsWithPermissions = remote => [
+    { title: __('Scan'), isDisabled: !canEdit, onClick: () => { dispatch(scanFlatpakRemote(remote.id)); } },
+    {
+      title: __('Edit'),
+      isDisabled: !canEdit,
+      onClick: () => {
+        setEditModalOpen(!isEditModalOpen);
+        setEditingRemoteData(remote);
+      },
+    },
+    {
+      title: __('Delete'),
+      isDisabled: !canDelete,
+      onClick: () => {
+        setRemoteIdToDelete(remote.id);
+        setIsDeleteModalOpen(true);
+      },
+    },
+  ];
+
+  return (
+    <TableIndexPage
+      apiUrl={apiUrl}
+      apiOptions={apiOptions}
+      header={__('Flatpak Remotes')}
+      creatable={canCreate}
+      customCreateAction={() => openCreateModal}
+      controller="/katello/api/v2/flatpak_remotes"
+    >
+      <>
+        {results.length === 0 && !error && status === STATUS.PENDING && (
+          <EmptyPage
+            message={{
+              type: 'loading',
+              text: __('Loading...'),
+            }}
+          />
+        )}
+        {results.length === 0 && !error && status === STATUS.RESOLVED && (
+          <EmptyPage message={{ type: 'empty' }} />
+        )}
+        {error && (
+          <EmptyPage message={{ type: 'error', text: getResponseErrorMsgs(error?.response) }} />
+        )}
+        {results.length > 0 && (
+          <Table variant="compact" ouiaId="flatpak-remotes-table" isStriped>
+            <Thead>
+              <Tr ouiaId="fltpakRemotesTableHeaderRow">
+                {columnHeaders.map(col => (
+                  <Th key={col} sort={pfSortParams(col)}>
+                    {col}
+                  </Th>
+                ))}
+                <Th key="action-menu" aria-label="action menu table header" />
+              </Tr>
+            </Thead>
+            <Tbody>
+              {results.map((remote) => {
+                const {
+                  id, name, url,
+                } = remote;
+                return (
+                  <Tr key={id} ouiaId={`flatpak-remote-row-${id}`}>
+                    <Td><a href={`${urlBuilder('flatpak_remotes', '')}${id}`}>{truncate(name)}</a></Td>
+                    <Td>
+                      <a href={url} target="_blank" rel="noopener noreferrer">
+                        {truncate(url)}
+                      </a>
+                    </Td>
+                    <Td actions={{ items: actionsWithPermissions(remote) }} />
+                  </Tr>
+                );
+              })}
+            </Tbody>
+          </Table>
+        )}
+        {results.length > 0 && (
+          <Pagination
+            key="table-bottom-pagination"
+            page={page}
+            perPage={perPage}
+            itemCount={subtotal}
+            onChange={onPaginationChange}
+            updateParamsByUrl
+          />
+        )}
+        <CreateFlatpakModal
+          show={isModalOpen}
+          setIsOpen={setIsModalOpen}
+        />
+        <EditFlatpakModal
+          show={isEditModalOpen}
+          setIsOpen={setEditModalOpen}
+          remoteData={editingRemoteData}
+        />
+        <DeleteFlatpakModal
+          isModalOpen={isDeleteModalOpen}
+          handleModalToggle={() => setIsDeleteModalOpen(!isDeleteModalOpen)}
+          remoteId={remoteIdToDelete}
+        />
+      </>
+    </TableIndexPage>
+  );
+};
+
+export default FlatpakRemotesPage;

data/webpack/scenes/FlatpakRemotes/FlatpakRemotesSelectors.js

@@ -0,0 +1,24 @@
+import {
+  selectAPIStatus,
+  selectAPIError,
+  selectAPIResponse,
+} from 'foremanReact/redux/API/APISelectors';
+import { STATUS } from 'foremanReact/constants';
+import FLATPAK_REMOTES_KEY, { CREATE_FLATPAK_REMOTES_KEY } from './FlatpakRemotesConstants';
+
+export const selectFlatpakRemotes = (state, index = '') => selectAPIResponse(state, FLATPAK_REMOTES_KEY + index) || {};
+
+export const selectFlatpakRemotesStatus = (state, index = '') =>
+  selectAPIStatus(state, FLATPAK_REMOTES_KEY + index) || STATUS.PENDING;
+
+export const selectFlatpakRemotesError = (state, index = '') =>
+  selectAPIError(state, FLATPAK_REMOTES_KEY + index);
+
+export const selectCreateFlatpakRemotes = state =>
+  selectAPIResponse(state, CREATE_FLATPAK_REMOTES_KEY) || {};
+
+export const selectCreateFlatpakRemotesStatus = state =>
+  selectAPIStatus(state, CREATE_FLATPAK_REMOTES_KEY) || STATUS.PENDING;
+
+export const selectCreateFlatpakRemotesError = state =>
+  selectAPIError(state, CREATE_FLATPAK_REMOTES_KEY);

data/webpack/scenes/FlatpakRemotes/__tests__/flatpakRemotesList.fixtures.json

@@ -0,0 +1,55 @@
+{
+    "total": 3,
+    "subtotal": 3,
+    "page": 1,
+    "per_page": 20,
+    "error": null,
+    "search": null,
+    "sort": {
+        "by": "name",
+        "order": "asc"
+    },
+    "can_create": true,
+    "can_view": true,
+    "results": [
+        {
+            "id": 1,
+            "name": "FlatpakRemote1",
+            "url": "https://flatpakregistry1.com/",
+            "description": null,
+            "username": "user1",
+            "organization_id": 1,
+            "organization": {
+                "name": "Default Organization",
+                "label": "Default_Organization",
+                "id": 1
+            }
+        },
+        {
+            "id": 2,
+            "name": "FlatpakRemote2",
+            "url": "https://flatpakregistry2.com/",
+            "description": "Description for FlatpakRemote2",
+            "username": "user2",
+            "organization_id": 1,
+            "organization": {
+                "name": "Default Organization",
+                "label": "Default_Organization",
+                "id": 1
+            }
+        },
+        {
+            "id": 3,
+            "name": "FlatpakRemote3",
+            "url": "https://flatpakregistry3.com/",
+            "description": null,
+            "username": "user3",
+            "organization_id": 1,
+            "organization": {
+                "name": "Default Organization",
+                "label": "Default_Organization",
+                "id": 1
+            }
+        }
+    ]
+}

data/webpack/scenes/FlatpakRemotes/__tests__/flatpakRemotesPage.test.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { renderWithRedux, patientlyWaitFor } from 'react-testing-lib-wrapper';
+import FLATPAK_REMOTES_KEY from '../FlatpakRemotesConstants';
+import FlatpakRemotesPage from '../FlatpakRemotesPage';
+import api from '../../../services/api';
+import { nockInstance, assertNockRequest } from '../../../test-utils/nockWrapper';
+import flatpakRemotesData from './flatpakRemotesList.fixtures.json';
+
+const flatpakRemotesPath = api.getApiUrl('/flatpak_remotes');
+const autocompleteUrl = '/katello/api/v2/flatpak_remotes/auto_complete_search';
+const renderOptions = { apiNamespace: FLATPAK_REMOTES_KEY };
+const autocompleteQuery = {
+  search: '',
+};
+
+let firstRemote;
+beforeEach(() => {
+  const { results } = flatpakRemotesData;
+  [firstRemote] = results;
+});
+
+test('Can call API for Flatpak Remotes and show on screen on page load', async () => {
+  const autocompleteScope = nockInstance
+    .get(autocompleteUrl)
+    .query(autocompleteQuery)
+    .reply(200, []);
+
+  const scope = nockInstance
+    .get(flatpakRemotesPath)
+    .query(true)
+    .times(2)
+    .reply(200, flatpakRemotesData);
+
+  const { queryByText } = renderWithRedux(<FlatpakRemotesPage />, renderOptions);
+
+  expect(queryByText(firstRemote.name)).toBeNull();
+
+  await patientlyWaitFor(() => {
+    expect(queryByText(firstRemote.name)).toBeInTheDocument();
+  });
+
+  assertNockRequest(autocompleteScope);
+  assertNockRequest(scope);
+});
+
+test('Displays empty state when no flatpak remotes exist', async () => {
+  const autocompleteScope = nockInstance
+    .get(autocompleteUrl)
+    .query(autocompleteQuery)
+    .reply(200, []);
+
+  const emptyRemotesScope = nockInstance
+    .get(flatpakRemotesPath)
+    .query(true)
+    .times(2)
+    .reply(200, {
+      total: 0,
+      subtotal: 0,
+      page: 1,
+      per_page: 20,
+      results: [],
+      can_create: true,
+      can_view: true,
+    });
+
+  const { queryByText } = renderWithRedux(<FlatpakRemotesPage />, renderOptions);
+
+  await patientlyWaitFor(() => {
+    expect(queryByText(/no results/i)).toBeInTheDocument();
+  });
+
+  assertNockRequest(emptyRemotesScope);
+  assertNockRequest(autocompleteScope);
+});

data/webpack/scenes/FlatpakRemotes/index.js

@@ -0,0 +1,4 @@
+import { withRouter } from 'react-router-dom';
+import FlatpakRemotesPage from './FlatpakRemotesPage';
+
+export default withRouter(FlatpakRemotesPage);

data/webpack/scenes/Hosts/ChangeContentSource/components/Hosts.js

@@ -26,9 +26,9 @@ const Hosts = ({
           { __('Some hosts are not registered as content hosts and will be ignored.') }
         </p>
 }
-        {contentHosts.length > 0 && (<Label color="green" href="#" onClick={() => setModalHosts(true)}>{titleHosts}: {contentHosts.length}</Label>)}
+        {contentHosts.length > 0 && (<Label as="button" color="green" onClick={() => setModalHosts(true)}>{titleHosts}: {contentHosts.length}</Label>)}
         {' '}
-        {hostsWithoutContent.length > 0 && (<Label color="orange" href="#" onClick={() => setModalIgnored(true)}>{titleIgnored}: {hostsWithoutContent.length}</Label>)}
+        {hostsWithoutContent.length > 0 && (<Label as="button" color="orange" onClick={() => setModalIgnored(true)}>{titleIgnored}: {hostsWithoutContent.length}</Label>)}
 
         <HostsModal
           hosts={contentHosts}

data/webpack/scenes/RedHatRepositories/components/RecommendedRepositorySetsToggler.scss

@@ -1,4 +1,4 @@
-@import "~@theforeman/vendor/scss/variables";
+@import "foremanReact/common/variables";
 
 .recommended-repositories-toggler-container {
 

data/webpack/scenes/RedHatRepositories/index.scss

@@ -1,4 +1,4 @@
-@import "~@theforeman/vendor/scss/variables";
+@import "foremanReact/common/variables";
 
 .row-eq-height {
   display: -webkit-box;

data/webpack/scenes/Settings/SettingsSelectors.js

@@ -1,4 +1,4 @@
-export const selectSettings = state => state.katello.settings?.settings;
-
-export const selectTableSettings = (state, tableName) =>
+const selectTableSettings = (state, tableName) =>
   state.katello.settings?.tables[tableName] || undefined;
+
+export default selectTableSettings;

data/webpack/scenes/Settings/index.js

@@ -1,5 +1,3 @@
-import { combineReducers } from 'redux';
 import tables from './Tables/TableReducer';
-import settings from './SettingsReducer';
 
-export default combineReducers({ tables, settings });
+export default tables;

data/webpack/scenes/Subscriptions/Details/__tests__/__snapshots__/SubscriptionDetails.test.js.snap

@@ -27,7 +27,7 @@ exports[`subscriptions details page should render and contain appropiate compone
       }
     }
   />
-  <ForwardRef
+  <Uncontrolled(TabContainer)
     defaultActiveKey={1}
     id="subscription-tabs-container"
   >
@@ -531,6 +531,6 @@ exports[`subscriptions details page should render and contain appropiate compone
         </Grid>
       </LoadingState>
     </div>
-  </ForwardRef>
+  </Uncontrolled(TabContainer)>
 </div>
 `;

data/webpack/scenes/Subscriptions/SubscriptionsPage.scss

@@ -1,4 +1,4 @@
-@import '~@theforeman/vendor/scss/variables';
+@import 'foremanReact/common/variables';
 
 #subscriptions-page {
   .editable {

data/webpack/scenes/Subscriptions/__tests__/SubscriptionsReducer.test.js

@@ -1,5 +1,4 @@
 import { testReducerSnapshotWithFixtures } from 'react-redux-test-utils';
-import { GET_SETTING_SUCCESS } from 'foremanReact/components/Settings/SettingsConstants';
 
 import {
   SUBSCRIPTIONS_REQUEST,
@@ -35,8 +34,6 @@ import {
   REFRESH_MANIFEST_SUCCESS,
 } from '../Manifest/ManifestConstants';
 
-jest.mock('foremanReact/components/Settings/SettingsConstants');
-
 const mockTask = {
   id: '12345',
   humanized: {
@@ -183,24 +180,6 @@ const fixtures = {
       type: SUBSCRIPTIONS_ENABLE_DELETE_BUTTON,
     },
   },
-  'should handle GET_SETTING_SUCCESS with content_disconnected response': {
-    action: {
-      type: GET_SETTING_SUCCESS,
-      response: {
-        name: 'content_disconnected',
-        value: 'some-value',
-      },
-    },
-  },
-  'should handle GET_SETTING_SUCCESS without content_disconnected response': {
-    action: {
-      type: GET_SETTING_SUCCESS,
-      response: {
-        name: 'some-name',
-        value: 'some-value',
-      },
-    },
-  },
   'should handle SUBSCRIPTIONS_RESET_TASKS': {
     action: {
       type: SUBSCRIPTIONS_RESET_TASKS,

data/webpack/scenes/Subscriptions/__tests__/__snapshots__/SubscriptionsReducer.test.js.snap

@@ -98,50 +98,6 @@ Object {
 }
 `;
 
-exports[`Subscriptions reducer should handle GET_SETTING_SUCCESS with content_disconnected response 1`] = `
-Object {
-  "availableQuantities": null,
-  "deleteButtonDisabled": true,
-  "deleteModalOpened": false,
-  "hasUpstreamConnection": false,
-  "itemCount": 0,
-  "loading": true,
-  "manifestActionStarted": false,
-  "pagination": Object {
-    "page": 0,
-    "perPage": 20,
-  },
-  "quantitiesLoading": false,
-  "results": Array [],
-  "searchQuery": "",
-  "selectedTableColumns": Array [],
-  "tableColumns": Array [],
-  "task": null,
-}
-`;
-
-exports[`Subscriptions reducer should handle GET_SETTING_SUCCESS without content_disconnected response 1`] = `
-Object {
-  "availableQuantities": null,
-  "deleteButtonDisabled": true,
-  "deleteModalOpened": false,
-  "hasUpstreamConnection": false,
-  "itemCount": 0,
-  "loading": true,
-  "manifestActionStarted": false,
-  "pagination": Object {
-    "page": 0,
-    "perPage": 20,
-  },
-  "quantitiesLoading": false,
-  "results": Array [],
-  "searchQuery": "",
-  "selectedTableColumns": Array [],
-  "tableColumns": Array [],
-  "task": null,
-}
-`;
-
 exports[`Subscriptions reducer should handle REFRESH_MANIFEST_SUCCESS 1`] = `
 Object {
   "availableQuantities": null,

data/webpack/scenes/Subscriptions/index.js

@@ -1,6 +1,5 @@
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import * as settingActions from 'foremanReact/components/Settings/SettingsActions';
 import * as foremanModalActions from 'foremanReact/components/ForemanModal/ForemanModalActions';
 import * as subscriptionActions from './SubscriptionActions';
 import * as taskActions from '../Tasks/TaskActions';
@@ -17,7 +16,7 @@ import {
   selectIsTaskPending,
   selectHasUpstreamConnection,
 } from './SubscriptionsSelectors';
-import { selectTableSettings } from '../../scenes/Settings/SettingsSelectors';
+import selectTableSettings from '../../scenes/Settings/SettingsSelectors';
 import { selectIsPollingTask } from '../Tasks/TaskSelectors';
 import { selectOrganizationState, selectIsManifestImported } from '../Organizations/OrganizationSelectors';
 import { pingUpstreamSubscriptions } from './UpstreamSubscriptions/UpstreamSubscriptionsActions';
@@ -51,7 +50,6 @@ const actions = {
   pingUpstreamSubscriptions,
   ...subscriptionActions,
   ...taskActions,
-  ...settingActions,
   ...tableActions,
   ...manifestActions,
   ...foremanModalActions,