foreman_openbolt 0.0.1

data/webpack/src/Components/LaunchTask/FieldTable.js

@@ -0,0 +1,147 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  ExpandableRowContent,
+} from '@patternfly/react-table';
+import { HelperText, HelperTextItem } from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+
+/**
+ * FieldTable
+ * Renders rows as: [chevron][Name] [Value]
+ * Clicking the chevron expands a details row that spans all columns and shows Type + Description.
+ *
+ * PatternFly v5 expandable table references:
+ * - Make first cell expandable via Td expand prop
+ * - Wrap each parent/child pair in a Tbody with isExpanded
+ * - Place details inside <ExpandableRowContent>
+ */
+const FieldTable = ({ rows }) => {
+  // Track expanded state per row key
+  const [expanded, setExpanded] = React.useState(() => ({}));
+
+  const toggle = rowKey => {
+    setExpanded(prev => ({ ...prev, [rowKey]: !prev[rowKey] }));
+  };
+
+  return (
+    <Table
+      variant="compact"
+      isExpandable
+      isStickyHeader
+      gridBreakPoint="grid-md"
+      style={{ wordBreak: 'break-word' }}
+    >
+      <Thead>
+        <Tr>
+          <Th aria-label="Row expand control" />
+          <Th width={25}>Name</Th>
+          <Th width={75}>Value</Th>
+        </Tr>
+      </Thead>
+
+      {rows.map(
+        // required is only relevant (currently) for ParametersSection
+        // hasEncryptedDefault is only relevant for OpenBoltOptionsSection
+        (
+          {
+            key,
+            name,
+            valueCell,
+            type,
+            description,
+            required,
+            hasEncryptedDefault,
+          },
+          rowIndex
+        ) => {
+          const rowKey = String(key || name || rowIndex);
+          const isExpanded = !!expanded[rowKey];
+
+          return (
+            <Tbody key={rowKey} isExpanded={isExpanded}>
+              <Tr>
+                <Td
+                  expand={{
+                    rowIndex,
+                    isExpanded,
+                    onToggle: () => toggle(rowKey),
+                  }}
+                />
+                <Td dataLabel="Name">
+                  <span className="pf-v5-u-font-family-monospace">{name}</span>
+                  {required && (
+                    <span
+                      style={{
+                        color: 'red',
+                        marginLeft: '0.25rem',
+                      }}
+                      title="Required"
+                    >
+                      *
+                    </span>
+                  )}
+                </Td>
+                <Td dataLabel="Value">{valueCell}</Td>
+              </Tr>
+
+              {(type || description) && (
+                <Tr isExpanded={isExpanded}>
+                  <Td noPadding colSpan={3}>
+                    <ExpandableRowContent>
+                      <HelperText component="ul">
+                        {type && (
+                          <HelperTextItem>
+                            <strong>{__('Type:')}</strong> <code>{type}</code>
+                          </HelperTextItem>
+                        )}
+                        {required && (
+                          <HelperTextItem variant="error">
+                            <strong>{__('This field is required')}</strong>
+                          </HelperTextItem>
+                        )}
+                        {hasEncryptedDefault && (
+                          <HelperTextItem variant="warning">
+                            <strong>
+                              {__(
+                                'This field has a saved, encrypted default value. To use this value, do not change the field.'
+                              )}
+                            </strong>
+                          </HelperTextItem>
+                        )}
+                        {description && (
+                          <HelperTextItem>{description}</HelperTextItem>
+                        )}
+                      </HelperText>
+                    </ExpandableRowContent>
+                  </Td>
+                </Tr>
+              )}
+            </Tbody>
+          );
+        }
+      )}
+    </Table>
+  );
+};
+
+FieldTable.propTypes = {
+  rows: PropTypes.arrayOf(
+    PropTypes.shape({
+      key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      name: PropTypes.string.isRequired,
+      required: PropTypes.bool,
+      valueCell: PropTypes.node.isRequired,
+      type: PropTypes.string,
+      description: PropTypes.node,
+    })
+  ).isRequired,
+};
+
+export default FieldTable;

data/webpack/src/Components/LaunchTask/HostSelector/HostSearch.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import SearchBar from 'foremanReact/components/SearchBar';
+import { getControllerSearchProps } from 'foremanReact/constants';
+
+export const HostSearch = ({ value, setValue }) => {
+  const props = getControllerSearchProps('hosts', 'mainHostQuery');
+  return (
+    <div className="foreman-search-field">
+      <SearchBar
+        data={{
+          ...props,
+          autocomplete: {
+            id: 'mainHostQuery',
+            url: '/hosts/auto_complete_search',
+            searchQuery: value,
+          },
+        }}
+        onSearch={null}
+        onSearchChange={search => setValue(search)}
+      />
+    </div>
+  );
+};
+
+HostSearch.propTypes = {
+  value: PropTypes.string.isRequired,
+  setValue: PropTypes.func.isRequired,
+};

data/webpack/src/Components/LaunchTask/HostSelector/SearchSelect.js

@@ -0,0 +1,208 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useQuery } from '@apollo/client';
+import {
+  Select,
+  SelectOption,
+  SelectList,
+  MenuToggle,
+  TextInputGroup,
+  TextInputGroupMain,
+  Button,
+  Spinner,
+  TextInputGroupUtilities,
+} from '@patternfly/react-core';
+import {
+  useForemanOrganization,
+  useForemanLocation,
+} from 'foremanReact/Root/Context/ForemanContext';
+import { decodeId } from 'foremanReact/common/globalIdHelpers';
+import { TimesIcon } from '@patternfly/react-icons';
+import Immutable from 'seamless-immutable';
+import { sprintf, translate as __ } from 'foremanReact/common/I18n';
+import hostsQuery from './hosts.gql';
+import hostgroupsQuery from './hostgroups.gql';
+
+export const maxResults = 100;
+
+export const SearchSelect = ({
+  name,
+  selected,
+  setSelected,
+  placeholderText,
+  apiKey,
+  url,
+  setLabel,
+}) => {
+  const useNameSearch = queryKey => {
+    const org = useForemanOrganization();
+    const location = useForemanLocation();
+    const [search, setSearch] = useState('');
+    const queries = {
+      HOSTS: hostsQuery,
+      HOST_GROUPS: hostgroupsQuery,
+    };
+    // Was from JobWizardConstants. Move into ours maybe.
+    const dataName = {
+      HOSTS: 'hosts',
+      HOST_GROUPS: 'hostgroups',
+    };
+
+    const { loading, data } = useQuery(queries[queryKey], {
+      variables: {
+        search: [
+          `name~"${search}"`,
+          org ? `organization_id=${org.id}` : null,
+          location ? `location_id=${location.id}` : null,
+        ]
+          .filter(i => i)
+          .join(' and '),
+      },
+    });
+    return [
+      setSearch,
+      {
+        subtotal: data?.[dataName[queryKey]]?.totalCount,
+        results:
+          data?.[dataName[queryKey]]?.nodes.map(node => ({
+            id: decodeId(node.id),
+            name: node.name,
+            displayName: node.displayName,
+          })) || [],
+      },
+      loading,
+    ];
+  };
+
+  const [onSearch, response, isLoading] = useNameSearch(apiKey, url);
+  const [inputValue, setInputValue] = useState('');
+  const [isOpen, setIsOpen] = useState(false);
+  const [typingTimeout, setTypingTimeout] = useState(null);
+  useEffect(() => {
+    onSearch(selected.name || '');
+    if (typingTimeout) {
+      return () => clearTimeout(typingTimeout);
+    }
+    return undefined;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  let selectOptions = [];
+  if (response.subtotal > maxResults) {
+    selectOptions = [
+      <SelectOption
+        isDisabled
+        key={0}
+        description={__('Please refine your search.')}
+      >
+        {sprintf(
+          __('You have %s results to display. Showing first %s results'),
+          response.subtotal,
+          maxResults
+        )}
+      </SelectOption>,
+    ];
+  }
+  selectOptions = [
+    ...selectOptions,
+    ...Immutable.asMutable(response?.results || [])?.map((result, index) => (
+      <SelectOption key={index + 1} value={result.id}>
+        {setLabel(result)}
+      </SelectOption>
+    )),
+  ];
+
+  const onSelect = (event, selection) => {
+    if (selected.map(({ id }) => id).includes(selection)) {
+      setSelected(currentSelected =>
+        currentSelected.filter(({ id }) => id !== selection)
+      );
+    } else {
+      setSelected(currentSelected => [
+        ...currentSelected,
+        response.results.find(r => r.id === selection),
+      ]);
+    }
+    setInputValue('');
+  };
+  const autoSearch = searchTerm => {
+    if (typingTimeout) clearTimeout(typingTimeout);
+    setTypingTimeout(setTimeout(() => onSearch(searchTerm), 500));
+  };
+
+  const toggle = toggleRef => (
+    <MenuToggle
+      ref={toggleRef}
+      variant="typeahead"
+      aria-label={`${name} toggle`}
+      onClick={() => setIsOpen(!isOpen)}
+      isExpanded={isOpen}
+      isFullWidth
+    >
+      <TextInputGroup isPlain>
+        <TextInputGroupMain
+          value={inputValue}
+          onClick={() => setIsOpen(!isOpen)}
+          onChange={(_event, value) => {
+            setInputValue(value);
+            autoSearch(value || '');
+          }}
+          aria-label={`${name} typeahead input`}
+          role="combobox"
+          isExpanded={isOpen}
+          aria-controls="select-typeahead-listbox"
+          placeholder={placeholderText}
+        />
+        <TextInputGroupUtilities>
+          {isLoading && <Spinner size="md" />}
+          {selected.length > 0 && (
+            <Button
+              variant="plain"
+              aria-label={__('Clear selections')}
+              onClick={() => {
+                setSelected([]);
+                setInputValue('');
+              }}
+            >
+              <TimesIcon />
+            </Button>
+          )}
+        </TextInputGroupUtilities>
+      </TextInputGroup>
+    </MenuToggle>
+  );
+  return (
+    <Select
+      id={name}
+      isOpen={isOpen}
+      selected={selected.map(({ id }) => id)}
+      onSelect={onSelect}
+      onOpenChange={setIsOpen}
+      role="menu"
+      toggle={toggle}
+    >
+      <SelectList
+        id="select-typeahead-listbox"
+        style={{ maxHeight: '45vh', overflowY: 'auto' }}
+      >
+        {selectOptions}
+      </SelectList>
+    </Select>
+  );
+};
+
+SearchSelect.propTypes = {
+  name: PropTypes.string,
+  selected: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  setSelected: PropTypes.func.isRequired,
+  setLabel: PropTypes.func.isRequired,
+  placeholderText: PropTypes.string,
+  apiKey: PropTypes.string.isRequired,
+  url: PropTypes.string,
+};
+
+SearchSelect.defaultProps = {
+  name: 'typeahead select',
+  selected: {},
+  placeholderText: '',
+  url: '',
+};

data/webpack/src/Components/LaunchTask/HostSelector/SelectedChips.js

@@ -0,0 +1,113 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Chip, ChipGroup, Button } from '@patternfly/react-core';
+import { sprintf, translate as __ } from 'foremanReact/common/I18n';
+
+const SelectedChip = ({ selected, setSelected, categoryName, setLabel }) => {
+  const deleteItem = itemToRemove => {
+    setSelected(oldSelected =>
+      oldSelected.filter(({ id }) => id !== itemToRemove)
+    );
+  };
+  const NUM_CHIPS = 3;
+  return (
+    <>
+      <ChipGroup
+        ouiaId="hosts-chip-group"
+        className="hosts-chip-group"
+        categoryName={categoryName}
+        isClosable
+        closeBtnAriaLabel="Remove all"
+        collapsedText={sprintf(__('%s more'), selected.length - NUM_CHIPS)}
+        numChips={NUM_CHIPS}
+        onClick={() => {
+          setSelected(() => []);
+        }}
+      >
+        {selected.map((result, index) => (
+          <Chip
+            ouiaId={`${categoryName}-${result.id}`}
+            key={index}
+            id={`${categoryName}-${result.id}`}
+            onClick={() => deleteItem(result.id)}
+            closeBtnAriaLabel={`Remove ${result.name}`}
+          >
+            {setLabel(result)}
+          </Chip>
+        ))}
+      </ChipGroup>
+      {selected.length > 0 && <br />}
+    </>
+  );
+};
+
+export const SelectedChips = ({
+  selectedHosts,
+  setSelectedHosts,
+  selectedHostGroups,
+  setSelectedHostGroups,
+  hostsSearchQuery,
+  clearSearch,
+  setLabel,
+}) => {
+  const clearAll = () => {
+    setSelectedHosts(() => []);
+    setSelectedHostGroups(() => []);
+    clearSearch();
+  };
+  const showClear =
+    selectedHosts.length || selectedHostGroups.length || hostsSearchQuery;
+  return (
+    <div className="selected-chips">
+      <SelectedChip
+        selected={selectedHosts}
+        categoryName={__('Hosts')}
+        setSelected={setSelectedHosts}
+        setLabel={setLabel}
+      />
+      <SelectedChip
+        selected={selectedHostGroups}
+        categoryName={__('Host groups')}
+        setSelected={setSelectedHostGroups}
+        setLabel={setLabel}
+      />
+      <SelectedChip
+        selected={
+          hostsSearchQuery
+            ? [{ id: hostsSearchQuery, name: hostsSearchQuery }]
+            : []
+        }
+        categoryName={__('Search query')}
+        setSelected={clearSearch}
+        setLabel={setLabel}
+      />
+      {showClear && (
+        <Button
+          ouiaId="clear-chips"
+          variant="link"
+          className="clear-chips"
+          onClick={clearAll}
+        >
+          {__('Clear all target selections')}
+        </Button>
+      )}
+    </div>
+  );
+};
+
+SelectedChips.propTypes = {
+  selectedHosts: PropTypes.array.isRequired,
+  setSelectedHosts: PropTypes.func.isRequired,
+  selectedHostGroups: PropTypes.array.isRequired,
+  setSelectedHostGroups: PropTypes.func.isRequired,
+  hostsSearchQuery: PropTypes.string.isRequired,
+  clearSearch: PropTypes.func.isRequired,
+  setLabel: PropTypes.func.isRequired,
+};
+
+SelectedChip.propTypes = {
+  categoryName: PropTypes.string.isRequired,
+  selected: PropTypes.array.isRequired,
+  setSelected: PropTypes.func.isRequired,
+  setLabel: PropTypes.func.isRequired,
+};

data/webpack/src/Components/LaunchTask/HostSelector/hostgroups.gql

@@ -0,0 +1,9 @@
+query($search: String!) {
+  hostgroups(first: 100, last: 100, search: $search) {
+    totalCount
+    nodes {
+      id
+      name: title
+    }
+  }
+}

data/webpack/src/Components/LaunchTask/HostSelector/hosts.gql

@@ -0,0 +1,10 @@
+query($search: String!) {
+  hosts(first: 100, last: 100, search: $search) {
+    totalCount
+    nodes {
+      id
+      name
+      displayName
+    }
+  }
+}