foreman_scc_manager 1.8.20 → 2.1.0

data/webpack/components/SCCProductPage/components/SCCProductPicker/components/SCCTreePicker/index.js

@@ -0,0 +1,303 @@
+import React, { useState, useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import {
+  TreeView,
+  Button,
+  Tooltip,
+  Switch,
+  Flex,
+  FlexItem,
+  Card,
+  CardBody,
+} from '@patternfly/react-core';
+import { cloneDeep, merge, clone } from 'lodash';
+import SCCRepoPicker from './components/SCCRepoPicker';
+import { subscribeProductsWithReposAction } from '../../../../SCCProductPageActions';
+import SCCProductTreeExpander from '../../../common/SCCProductTreeExpander';
+
+const addCheckBoxToTree = (tree) => {
+  const checkProps = {};
+  checkProps.checked = tree.product_id !== null;
+  checkProps.disabled = tree.product_id !== null;
+  tree.checkProps = checkProps;
+
+  return tree;
+};
+
+const addParentToTree = (tree, par) => {
+  tree.parent = par;
+  return tree;
+};
+
+const addSCCRepoPickerToTree = (
+  tree,
+  disableRepos,
+  activateDebugFilter,
+  setSelectedReposFromChild
+) => {
+  tree.customBadgeContent[0] = (
+    <Tooltip content={__('Filter repositories')}>
+      <SCCRepoPicker
+        sccRepos={tree.scc_repositories}
+        disableRepos={tree.product_id === null && !tree.checkProps.checked}
+        activateDebugFilter={activateDebugFilter}
+        productAlreadySynced={tree.product_id !== null}
+        sccProductId={tree.id}
+        sccProductName={tree.name}
+        setSelectedReposFromChild={setSelectedReposFromChild}
+      />{' '}
+    </Tooltip>
+  );
+  return tree;
+};
+
+const setupTreeViewListItem = (
+  tree,
+  isRoot,
+  activateDebugFilter,
+  setSelectedReposFromChild
+) => {
+  tree.customBadgeContent = [];
+  addCheckBoxToTree(tree);
+  addSCCRepoPickerToTree(
+    tree,
+    tree.product_id === null,
+    activateDebugFilter,
+    setSelectedReposFromChild
+  );
+  if ('children' in tree) {
+    tree.children = tree.children.map((p) =>
+      setupTreeViewListItem(
+        p,
+        false,
+        activateDebugFilter,
+        setSelectedReposFromChild
+      )
+    );
+    tree.children.map((child) => addParentToTree(child, tree));
+  }
+  return tree;
+};
+
+const checkAllParents = (
+  tree,
+  activateDebugFilter,
+  setSelectedReposFromChild
+) => {
+  if (!tree.checkProps.checked) {
+    tree.checkProps.checked = true;
+    addSCCRepoPickerToTree(
+      tree,
+      false,
+      activateDebugFilter,
+      setSelectedReposFromChild
+    );
+  }
+  if (tree.parent)
+    checkAllParents(
+      tree.parent,
+      activateDebugFilter,
+      setSelectedReposFromChild
+    );
+
+  return tree;
+};
+
+const uncheckAllChildren = (
+  tree,
+  activateDebugFilter,
+  setSelectedReposFromChild
+) => {
+  if (tree.product_id === null) {
+    tree.checkProps.checked = false;
+    addSCCRepoPickerToTree(
+      tree,
+      true,
+      activateDebugFilter,
+      setSelectedReposFromChild
+    );
+  }
+  if ('children' in tree)
+    tree.children = tree.children.map((c) =>
+      uncheckAllChildren(c, activateDebugFilter, setSelectedReposFromChild)
+    );
+
+  return tree;
+};
+
+const getRootParent = (tree) => {
+  if (tree.parent) return getRootParent(tree.parent);
+
+  return tree;
+};
+
+const SCCTreePicker = ({
+  sccProducts,
+  sccAccountId,
+  resetFormFromParent,
+  handleSubscribeCallback,
+}) => {
+  const dispatch = useDispatch();
+  // this needs to be uninitialized such that the first call to setAllExpanded can actually
+  // change the value of allExpanded
+  const [expandAll, setExpandAll] = useState();
+  const [selectedRepos, setSelectedRepos] = useState({});
+  // the debug filter is actually a 'includeDebugRepos' setting which should not be active by default
+  const [activateDebugFilter, setActivateDebugFilter] = useState(false);
+
+  const setSelectedReposFromChild = (
+    productId,
+    productName,
+    repoIds,
+    repoNames
+  ) => {
+    if (repoIds.length !== 0) {
+      selectedRepos[productId] = {};
+      selectedRepos[productId].repoIds = repoIds;
+      selectedRepos[productId].productName = productName;
+      selectedRepos[productId].repoNames = repoNames;
+      const newSelectedRepos = clone(selectedRepos);
+      setSelectedRepos(newSelectedRepos);
+    } else if (selectedRepos !== {} && productId in selectedRepos) {
+      delete selectedRepos[productId];
+      const newSelectedRepos = clone(selectedRepos);
+      setSelectedRepos(newSelectedRepos);
+    }
+  };
+
+  const [sccProductTree, setSccProductTree] = useState(
+    cloneDeep(sccProducts).map((p) =>
+      setupTreeViewListItem(
+        p,
+        true,
+        activateDebugFilter,
+        setSelectedReposFromChild
+      )
+    )
+  );
+
+  useEffect(() => {
+    setSccProductTree(
+      cloneDeep(sccProducts).map((p) =>
+        setupTreeViewListItem(
+          p,
+          true,
+          activateDebugFilter,
+          setSelectedReposFromChild
+        )
+      )
+    );
+    // some thorough cleaning is required for hash maps
+    Object.keys(selectedRepos).forEach((k) => delete selectedRepos[k]);
+  }, [sccProducts]);
+
+  const setExpandAllFromChild = (expandAllFromChild) => {
+    setExpandAll(expandAllFromChild);
+  };
+
+  const debugFilterChange = (evt) => {
+    setActivateDebugFilter(!activateDebugFilter);
+  };
+
+  const onCheck = (evt, treeViewItem) => {
+    if (evt.target.checked) {
+      checkAllParents(
+        treeViewItem,
+        activateDebugFilter,
+        setSelectedReposFromChild
+      );
+    } else {
+      uncheckAllChildren(
+        treeViewItem,
+        activateDebugFilter,
+        setSelectedReposFromChild
+      );
+    }
+
+    setSccProductTree([...merge(sccProductTree, getRootParent(treeViewItem))]);
+  };
+
+  const submitForm = (evt) => {
+    const productsToSubscribe = [];
+    Object.keys(selectedRepos).forEach((k) => {
+      const repo = {
+        scc_product_id: parseInt(k, 10),
+        repository_list: selectedRepos[k].repoIds,
+      };
+      productsToSubscribe.push(repo);
+    });
+    dispatch(
+      subscribeProductsWithReposAction(
+        sccAccountId,
+        productsToSubscribe,
+        handleSubscribeCallback,
+        selectedRepos
+      )
+    );
+    // reset data structure and form
+    setSelectedRepos({});
+    resetFormFromParent();
+  };
+
+  return (
+    <Card>
+      <CardBody>
+        <Flex direction={{ default: 'column' }}>
+          <Flex>
+            <SCCProductTreeExpander
+              setExpandAllInParent={setExpandAllFromChild}
+            />
+            <FlexItem>
+              <Tooltip
+                content={__(
+                  'If this option is enabled, debug and source pool repositories are automatically selected if you select a product. This option is disabled by default. It applies for unselected products, only. Already selected products are not filtered.'
+                )}
+              >
+                <Switch
+                  id="filter-debug-switch"
+                  onChange={debugFilterChange}
+                  isChecked={activateDebugFilter}
+                  label={__('Include Debug and Source Pool repositories')}
+                />
+              </Tooltip>
+            </FlexItem>
+          </Flex>
+          <Flex>
+            <TreeView
+              data={sccProductTree}
+              allExpanded={expandAll}
+              onCheck={onCheck}
+              hasChecks
+              hasBadges
+              hasGuides
+            />
+          </Flex>
+          <Flex>
+            <Button
+              variant="primary"
+              onClick={submitForm}
+              isDisabled={Object.keys(selectedRepos).length === 0}
+            >
+              {__('Add product(s)')}
+            </Button>
+          </Flex>
+        </Flex>
+      </CardBody>
+    </Card>
+  );
+};
+
+SCCTreePicker.propTypes = {
+  sccProducts: PropTypes.array,
+  sccAccountId: PropTypes.number.isRequired,
+  resetFormFromParent: PropTypes.func.isRequired,
+  handleSubscribeCallback: PropTypes.func.isRequired,
+};
+
+SCCTreePicker.defaultProps = {
+  sccProducts: [],
+};
+
+export default SCCTreePicker;

data/webpack/components/SCCProductPage/components/SCCProductPicker/index.js

@@ -0,0 +1,235 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { TimesIcon } from '@patternfly/react-icons';
+import {
+  Button,
+  Card,
+  CardTitle,
+  CardBody,
+  CardHeader,
+  CardExpandableContent,
+  Flex,
+  FlexItem,
+} from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { uniq } from 'lodash';
+import './styles.scss';
+import SCCGenericPicker from './components/SCCGenericPicker';
+import SCCTreePicker from './components/SCCTreePicker';
+
+const resetSelectionStringProduct = __(' -- Select Product --');
+const resetSelectionStringVersion = __(' -- Select Version --');
+const resetSelectionStringArch = __(' -- Select Architecture --');
+
+const genericFilter = (object, comparator) =>
+  // we can have architectures that are not set
+  comparator === '' ||
+  comparator === resetSelectionStringProduct ||
+  comparator === resetSelectionStringVersion ||
+  comparator === resetSelectionStringArch ||
+  object === comparator ||
+  (object === null && comparator === 'no arch');
+
+const filterVersionByProduct = (sccProducts, product) =>
+  uniq(
+    sccProducts
+      .filter((p) => p.product_category === product)
+      .map((i) => i.version)
+  ).sort();
+
+const filterArchByVersionAndProduct = (sccProducts, product, version) =>
+  uniq(
+    sccProducts
+      .filter((p) => p.product_category === product && p.version === version)
+      .map((i) => i.arch)
+  ).sort();
+
+const SCCProductPicker = ({
+  sccProducts,
+  sccAccountId,
+  editProductId,
+  handleSubscribeCallback,
+}) => {
+  const [productItems, setProductItems] = useState(
+    uniq(sccProducts.map((p) => p.product_category))
+  );
+  const [selectedProduct, setSelectedProduct] = useState('');
+  const [archItems, setArchItems] = useState([]);
+  const [selectedArch, setSelectedArch] = useState('');
+  const [versionItems, setVersionItems] = useState([]);
+  const [selectedVersion, setSelectedVersion] = useState('');
+  const [filteredSccProducts, setFilteredSccProducts] = useState([]);
+  const [showSearchTree, setShowSearchTree] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  useEffect(() => {
+    if (editProductId !== 0) {
+      // the id is unique, so there never should be more than 1 element in the array
+      const product = sccProducts.filter((p) => p.id === editProductId);
+      if (product.length > 0) {
+        setSelectedProduct(product[0].product_category);
+        setSelectedArch(product[0].arch);
+        setSelectedVersion(product[0].version);
+        setFilteredSccProducts(product);
+        setShowSearchTree(true);
+        setIsExpanded(true);
+      }
+    }
+  }, [editProductId, sccProducts]);
+
+  const onProductSelectionChange = (value) => {
+    if (value !== resetSelectionStringProduct) {
+      setVersionItems(filterVersionByProduct(sccProducts, value));
+    } else {
+      setVersionItems([]);
+    }
+    setSelectedProduct(value);
+    setArchItems([]);
+    setSelectedVersion('');
+    setSelectedArch('');
+  };
+
+  const onVersionSelectionChange = (value) => {
+    if (value === resetSelectionStringVersion) {
+      setArchItems([]);
+    } else {
+      setArchItems(
+        filterArchByVersionAndProduct(sccProducts, selectedProduct, value)
+      );
+    }
+    setSelectedVersion(value);
+    setSelectedArch('');
+  };
+
+  const onArchSelectionChange = (value) => {
+    setSelectedArch(value);
+  };
+
+  const onExpand = (evt, id) => {
+    setIsExpanded(!isExpanded);
+  };
+
+  const filterProducts = (evt) => {
+    setShowSearchTree(true);
+    setFilteredSccProducts(
+      sccProducts.filter(
+        (p) =>
+          genericFilter(p.product_category, selectedProduct) &&
+          genericFilter(p.arch, selectedArch) &&
+          genericFilter(p.version, selectedVersion)
+      )
+    );
+  };
+
+  const resetTreeForm = () => {
+    setShowSearchTree(false);
+    setSelectedProduct('');
+    setSelectedVersion('');
+    setSelectedArch('');
+  };
+
+  return (
+    <Card border="dark" id="product-selection-card" isExpanded={isExpanded}>
+      <CardHeader onExpand={onExpand}>
+        <CardTitle>{__('Select SUSE products')}</CardTitle>
+      </CardHeader>
+      <CardExpandableContent>
+        <CardBody>
+          <Flex direction={{ default: 'column' }}>
+            <Flex>
+              <FlexItem>
+                <SCCGenericPicker
+                  key="prod-select"
+                  selectionItems={
+                    selectedProduct === ''
+                      ? productItems
+                      : [resetSelectionStringProduct].concat(productItems)
+                  }
+                  setGlobalSelected={onProductSelectionChange}
+                  screenReaderLabel={resetSelectionStringProduct}
+                  initialLabel={
+                    selectedProduct === ''
+                      ? resetSelectionStringProduct
+                      : selectedProduct
+                  }
+                />
+              </FlexItem>
+              <FlexItem>
+                <SCCGenericPicker
+                  key="vers-select"
+                  selectionItems={
+                    selectedVersion === ''
+                      ? versionItems
+                      : [resetSelectionStringVersion].concat(versionItems)
+                  }
+                  setGlobalSelected={onVersionSelectionChange}
+                  screenReaderLabel={resetSelectionStringVersion}
+                  initialLabel={
+                    selectedVersion === ''
+                      ? resetSelectionStringVersion
+                      : selectedVersion
+                  }
+                />
+              </FlexItem>
+              <FlexItem>
+                <SCCGenericPicker
+                  key="arch-select"
+                  selectionItems={
+                    selectedArch === ''
+                      ? archItems
+                      : [resetSelectionStringArch].concat(archItems)
+                  }
+                  setGlobalSelected={onArchSelectionChange}
+                  screenReaderLabel={resetSelectionStringArch}
+                  initialLabel={
+                    selectedArch === ''
+                      ? resetSelectionStringArch
+                      : selectedArch
+                  }
+                />
+              </FlexItem>
+              <FlexItem>
+                <Button variant="primary" onClick={filterProducts}>
+                  {__('Search')}
+                </Button>
+              </FlexItem>
+              <FlexItem>
+                <Button
+                  variant="link"
+                  icon={<TimesIcon />}
+                  onClick={resetTreeForm}
+                >
+                  {__('Reset Selection')}
+                </Button>
+              </FlexItem>
+            </Flex>
+            <FlexItem>
+              {showSearchTree && (
+                <SCCTreePicker
+                  sccProducts={filteredSccProducts}
+                  sccAccountId={sccAccountId}
+                  resetFormFromParent={resetTreeForm}
+                  handleSubscribeCallback={handleSubscribeCallback}
+                />
+              )}
+            </FlexItem>
+          </Flex>
+        </CardBody>
+      </CardExpandableContent>
+    </Card>
+  );
+};
+
+SCCProductPicker.propTypes = {
+  sccProducts: PropTypes.array,
+  sccAccountId: PropTypes.number.isRequired,
+  editProductId: PropTypes.number,
+  handleSubscribeCallback: PropTypes.func.isRequired,
+};
+
+SCCProductPicker.defaultProps = {
+  sccProducts: [],
+  editProductId: 0,
+};
+
+export default SCCProductPicker;

data/webpack/components/SCCProductPage/components/SCCProductPicker/styles.scss

@@ -0,0 +1,10 @@
+@import '~@theforeman/vendor/scss/variables';
+
+.pf-c-select__toggle {
+  font-size: var(--pf-global--FontSize--xs);
+  font-weight: var(--pf-global--FontWeight--bold);
+};
+
+.pf-c-switch__input ~ .pf-c-switch__label {
+    font-size: var(--pf-global--FontSize--xs);
+};

data/webpack/components/SCCProductPage/components/SCCProductPickerModal/index.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ForemanModal from 'foremanReact/components/ForemanModal';
+
+import { sprintf, translate as __ } from 'foremanReact/common/I18n';
+import {
+  Card,
+  CardBody,
+  TextContent,
+  Text,
+  TextList,
+  TextListItem,
+  TextListVariants,
+  TextVariants,
+} from '@patternfly/react-core';
+
+const generateRepoList = (repoNames, productName) => (
+  <>
+    <TextListItem key={productName}>{productName}</TextListItem>
+    <TextList key={repoNames}>
+      {repoNames.map((repo) => (
+        <TextListItem key={repo}>{repo}</TextListItem>
+      ))}
+    </TextList>
+  </>
+);
+
+const generateProductList = (reposToSubscribe) => (
+  <TextList
+    key={reposToSubscribe.map((p) => p.productName)}
+    component={TextListVariants.ol}
+  >
+    {reposToSubscribe.map((p) => generateRepoList(p.repoNames, p.productName))}
+  </TextList>
+);
+
+const SCCProductPickerModal = ({ id, taskId, reposToSubscribe }) => (
+  <>
+    <ForemanModal
+      id={id}
+      title={__('Summary of SCC product subscription')}
+      enforceFocus
+    >
+      <Card>
+        <CardBody>
+          <TextContent key={taskId}>
+            <Text key={'modal1'.concat(taskId)}>
+              {__('The subscription task with id ')}
+              <Text
+                key={'modal2'.concat(taskId)}
+                component={TextVariants.a}
+                target="_blank"
+                href={sprintf('/foreman_tasks/tasks/%s', taskId)}
+              >
+                {sprintf('%s', taskId)}
+              </Text>
+              {__(' has started successfully.')}
+            </Text>
+            <Text key={'modal3'.concat(taskId)}>
+              {__('The following products will be imported:')}
+            </Text>
+            {generateProductList(reposToSubscribe)}
+          </TextContent>
+        </CardBody>
+      </Card>
+    </ForemanModal>
+  </>
+);
+SCCProductPickerModal.propTypes = {
+  id: PropTypes.string,
+  taskId: PropTypes.string,
+  reposToSubscribe: PropTypes.array,
+};
+
+SCCProductPickerModal.defaultProps = {
+  id: '',
+  taskId: '',
+  reposToSubscribe: {},
+};
+
+export default SCCProductPickerModal;