foreman_scc_manager 1.8.20 → 2.0.0

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;

data/webpack/components/SCCProductPage/components/SCCProductView/components/SCCRepoView/index.js

@@ -0,0 +1,113 @@
+import { foremanUrl } from 'foremanReact/common/helpers';
+import { sprintf, translate as __ } from 'foremanReact/common/I18n';
+
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+import {
+  Dropdown,
+  DropdownItem,
+  BadgeToggle,
+  Tooltip,
+} from '@patternfly/react-core';
+import { Icon } from 'patternfly-react';
+import { BrowserRouter, Link } from 'react-router-dom';
+
+import './styles.scss';
+
+const createKatelloRepoLink = (repo, sccProductId) => {
+  const url = foremanUrl(
+    `/products/${sccProductId}/repositories/${repo.katello_root_repository_id}`
+  );
+  return (
+    <Tooltip content={__('Go to Repository page')}>
+      <BrowserRouter>
+        <Link to={url} target="_blank">
+          {repo.name}
+        </Link>
+      </BrowserRouter>
+    </Tooltip>
+  );
+};
+
+const createRepoDropDownItem = (repo, sccProductId) => (
+  <DropdownItem
+    key={repo.id}
+    component="button"
+    icon={
+      repo.subscription_valid ? (
+        repo.katello_root_repository_id !== null ? (
+          <Icon name="check" type="fa" />
+        ) : (
+          <Tooltip content={__('Repository not imported')}>
+            <Icon name="ban" type="fa" />
+          </Tooltip>
+        )
+      ) : (
+        <Tooltip content={__('Please check your SUSE subscription')}>
+          <Icon name="warning-triangle-o" type="pf" size="2x" />
+        </Tooltip>
+      )
+    }
+  >
+    {repo.katello_root_repository_id !== null
+      ? createKatelloRepoLink(repo, sccProductId)
+      : repo.name}
+  </DropdownItem>
+);
+
+const SCCRepoView = ({ sccRepos, sccProductId }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const onToggle = (toggle) => {
+    setIsOpen(toggle);
+  };
+
+  const onFocus = () => {
+    const element = document.getElementById(
+      sprintf('scc-repo-show-toggle-id-%s', sccProductId)
+    );
+    element.focus();
+  };
+
+  const onSelect = (event) => {
+    setIsOpen(!isOpen);
+    onFocus();
+  };
+
+  const dropdownItems = sccRepos.map((repo) =>
+    createRepoDropDownItem(repo, sccProductId)
+  );
+
+  return (
+    <Dropdown
+      onSelect={onSelect}
+      toggle={
+        <BadgeToggle
+          id={sprintf('scc-repo-show-toggle-id-%s', sccProductId)}
+          key={sprintf('scc-repo-show-toggle-id-%s', sccProductId)}
+          onToggle={onToggle}
+        >
+          {sprintf(
+            __('Repositories (%s/%s)'),
+            sccRepos.filter((r) => r.katello_root_repository_id !== null)
+              .length,
+            sccRepos.length
+          )}
+        </BadgeToggle>
+      }
+      isOpen={isOpen}
+      dropdownItems={dropdownItems}
+    />
+  );
+};
+
+SCCRepoView.propTypes = {
+  sccRepos: PropTypes.array,
+  sccProductId: PropTypes.number,
+};
+
+SCCRepoView.defaultProps = {
+  sccRepos: undefined,
+  sccProductId: undefined,
+};
+
+export default SCCRepoView;

data/webpack/components/SCCProductPage/components/SCCProductView/components/SCCRepoView/styles.scss

@@ -0,0 +1,14 @@
+.pf-c-button.pf-m-plain {
+  --pf-c-button--PaddingTop: var(--pf-global--spacer--xs);
+  --pf-c-button--PaddingRight: var(--pf-global--spacer--sm);
+  --pf-c-button--PaddingBottom: var(--pf-global--spacer--xs);
+  --pf-c-button--PaddingLeft: var(--pf-global--spacer--sm);
+}
+
+.pf-c-dropdown__toggle::before {
+  --pf-c-button--PaddingTop: var(--pf-global--spacer--xs);
+  --pf-c-button--PaddingRight: var(--pf-global--spacer--xs);
+  --pf-c-button--PaddingBottom: var(--pf-global--spacer--xs);
+  --pf-c-button--PaddingLeft: var(--pf-global--spacer--xs);
+}
+

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

@@ -0,0 +1,236 @@
+import React, { useState } from 'react';
+import { Icon } from 'patternfly-react';
+import PropTypes from 'prop-types';
+import { sprintf, translate as __ } from 'foremanReact/common/I18n';
+import { foremanUrl } from 'foremanReact/common/helpers';
+import {
+  TreeView,
+  Button,
+  Card,
+  CardTitle,
+  CardBody,
+  Tooltip,
+  Flex,
+  FlexItem,
+} from '@patternfly/react-core';
+import { BrowserRouter, Link } from 'react-router-dom';
+import { cloneDeep, filter, clone } from 'lodash';
+import SCCProductTreeExpander from '../common/SCCProductTreeExpander';
+import SCCSubscribedProductsExpander from '../common/SCCSubscribedProductsExpander';
+import SCCRepoView from './components/SCCRepoView';
+
+const addCheckBoxToTree = (tree) => {
+  const checkProps = {};
+  checkProps.checked = tree.product_id !== null;
+  checkProps.disabled = true;
+  tree.checkProps = checkProps;
+};
+
+const addKatelloLinkToTree = (tree) => {
+  const url = foremanUrl(`/products/${tree.product_id}`);
+  // Link component needs to be wrapped in a Router
+  tree.customBadgeContent.push(
+    <BrowserRouter>
+      <Link to={url} target="_blank">
+        <Tooltip content={__('Go to Product page')}>
+          <Button variant="plain" id="tt-ref">
+            <Icon name="external-link" type="fa" />
+          </Button>
+        </Tooltip>
+      </Link>
+    </BrowserRouter>
+  );
+  return tree;
+};
+
+const addEditIcon = (tree, editProductTree) => {
+  tree.customBadgeContent.push(
+    <Tooltip content={__('Add more sub products to Product tree')}>
+      <Button
+        variant="plain"
+        id={tree.id.toString()}
+        onClick={(evt) => editProductTree(evt, tree.id)}
+      >
+        <Icon name="edit" type="pf" size="2x" />
+      </Button>
+    </Tooltip>
+  );
+
+  return tree;
+};
+
+const addReposToTree = (tree) => {
+  tree.customBadgeContent.push(
+    <Tooltip content={__('Show currently added repositories')}>
+      <SCCRepoView
+        sccRepos={tree.scc_repositories}
+        sccProductId={tree.product_id}
+      />
+    </Tooltip>
+  );
+  return tree;
+};
+
+const addValidationStatusToTree = (tree) => {
+  tree.customBadgeContent.push(
+    <Tooltip content={__('Please check your SUSE subscription')}>
+      <Button variant="plain">
+        <Icon name="warning-triangle-o" type="pf" size="2x" />
+      </Button>
+    </Tooltip>
+  );
+  return tree;
+};
+
+const setupTreeViewListItem = (tree, isRoot, editProductTree) => {
+  tree.key = 'view'.concat(tree.id.toString());
+  tree.customBadgeContent = [];
+  if (!tree.subscription_valid) addValidationStatusToTree(tree);
+  addReposToTree(tree);
+  addCheckBoxToTree(tree);
+  if (tree.product_id !== null) {
+    addKatelloLinkToTree(tree);
+    if (isRoot) {
+      addEditIcon(tree, editProductTree);
+    }
+  }
+  if ('children' in tree) {
+    tree.children = tree.children.map((c) =>
+      setupTreeViewListItem(c, false, editProductTree)
+    );
+  }
+  return tree;
+};
+
+const filterDeep = (tree) => {
+  if (tree.product_id !== null) {
+    const filtered = clone(tree);
+    if ('children' in tree) {
+      filtered.children = filter(
+        tree.children,
+        (child) => child.product_id !== null
+      ).map(filterDeep);
+      if (filtered.children.length === 0) {
+        delete filtered.children;
+      }
+    }
+    return filtered;
+  }
+  return null;
+};
+
+const SCCProductView = ({
+  sccProducts,
+  editProductTreeGlobal,
+  subscriptionTaskId,
+}) => {
+  const editProductTree = (evt, productId) => {
+    editProductTreeGlobal(productId);
+  };
+  const sccProductsClone = cloneDeep(sccProducts);
+  // wrap actual iterator function into anonymous function to pass extra parameters
+  const [allProducts, setAllProducts] = useState(
+    sccProductsClone.map((tree) =>
+      setupTreeViewListItem(tree, true, editProductTree)
+    )
+  );
+  const [subscribedProducts, setSubscribedProducts] = useState(null);
+  const [showAll, setShowAll] = useState(true);
+  const [expandAll, setExpandAll] = useState();
+
+  const showSubscribed = () => {
+    if (subscribedProducts === null) {
+      const test = allProducts.map(filterDeep);
+      setSubscribedProducts(test);
+    }
+  };
+
+  const setShowAllFromChild = (showAllFromChild) => {
+    if (!showAllFromChild) {
+      showSubscribed();
+    }
+    setShowAll(showAllFromChild);
+  };
+
+  const setExpandAllFromChild = (expandAllFromChild) => {
+    setExpandAll(expandAllFromChild);
+  };
+
+  return (
+    <Card>
+      <CardTitle>{__('Selected SUSE Products')}</CardTitle>
+      {sccProducts.length > 0 && (
+        <CardBody>
+          <Flex>
+            <SCCProductTreeExpander
+              setExpandAllInParent={setExpandAllFromChild}
+            />
+            <SCCSubscribedProductsExpander
+              setExpandAllInParent={setShowAllFromChild}
+            />
+          </Flex>
+          <Flex>
+            <TreeView
+              data={showAll ? allProducts : subscribedProducts}
+              allExpanded={expandAll}
+              hasChecks
+              hasBadges
+              hasGuides
+            />
+          </Flex>
+        </CardBody>
+      )}
+      {sccProducts.length === 0 && (
+        <CardBody>
+          {__(
+            'You currently have no SUSE products selected. Search and add SUSE products in the section below.'
+          )}
+        </CardBody>
+      )}
+      <Flex>
+        {sccProducts.length > 0 && (
+          <FlexItem>
+            <Button variant="link">
+              <BrowserRouter>
+                <Link
+                  to="/foreman_tasks/tasks/?search=Subscribe+SCC+Product"
+                  target="_blank"
+                >
+                  {__('Show all subscription tasks')}
+                </Link>
+              </BrowserRouter>
+            </Button>
+          </FlexItem>
+        )}
+        {subscriptionTaskId !== '' && (
+          <FlexItem>
+            <Button variant="link">
+              <BrowserRouter>
+                <Link
+                  to={sprintf('/foreman_tasks/tasks/%s', subscriptionTaskId)}
+                  target="_blank"
+                >
+                  {__('Show last product subscription task')}
+                </Link>
+              </BrowserRouter>
+            </Button>
+          </FlexItem>
+        )}
+      </Flex>
+    </Card>
+  );
+};
+
+SCCProductView.propTypes = {
+  sccProducts: PropTypes.array,
+  editProductTreeGlobal: PropTypes.func,
+  subscriptionTaskId: PropTypes.string,
+};
+
+SCCProductView.defaultProps = {
+  sccProducts: undefined,
+  editProductTreeGlobal: undefined,
+  subscriptionTaskId: '',
+};
+
+export default SCCProductView;