@flightctl/ui-components 1.0.2 → 1.1.0-rc4

package/src/components/modals/massModals/ResumeDevicesModal/MassResumeDevicesModal.tsx

@@ -2,11 +2,14 @@ import * as React from 'react';
 import {
   Alert,
   Button,
+  Content,
   FormGroup,
   MenuToggle,
   MenuToggleElement,
   Modal,
-  ModalVariant,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
   Radio,
   Select,
   SelectList,
@@ -14,9 +17,8 @@ import {
   Spinner,
   Stack,
   StackItem,
-  Text,
-  TextContent,
 } from '@patternfly/react-core';
+
 import { Trans } from 'react-i18next';
 import { Formik, useFormikContext } from 'formik';
 import { DeviceList, DeviceResumeRequest, DeviceResumeResponse, Fleet } from '@flightctl/types';
@@ -33,10 +35,9 @@ import { getApiListCount } from '../../../../utils/api';
 import { fromAPILabel, labelToExactApiMatchString } from '../../../../utils/labels';
 import { useFleets } from '../../../Fleet/useFleets';
 import ResumeAllDevicesConfirmationDialog from './ResumeAllDevicesConfirmationDialog';
+import { showSpinnerBriefly } from '../../../../utils/time';
 
 // Adds an artificial delay to make sure that the user notices the count is refreshing.
-// This is specially needed when users switch between modes, and the selection for the new mode is already valid.
-const showSpinnerBriefly = () => new Promise((resolve) => setTimeout(resolve, 450));
 
 type MassResumeFormValues = {
   mode: SelectionMode;
@@ -54,6 +55,9 @@ enum SelectionMode {
   ALL = 'all',
 }
 
+// Delay needed specially when users switch between modes, and the selection for the new mode is already valid.
+const REFRESH_COUNT_DELAY = 450;
+
 const getSelectedFleetLabels = (fleets: Fleet[], fleetId: string) => {
   const selectedFleet = fleets.find((fleet) => fleet.metadata.name === fleetId);
   if (!selectedFleet) {
@@ -113,10 +117,10 @@ const MassResumeDevicesModalContent = ({ onClose }: MassResumeDevicesModalProps)
         }
 
         const deviceResult = await get<DeviceList>(queryEndpoint);
-        await showSpinnerBriefly();
+        await showSpinnerBriefly(REFRESH_COUNT_DELAY);
         setDeviceCountNum(getApiListCount(deviceResult) || 0);
       } catch (error) {
-        await showSpinnerBriefly();
+        await showSpinnerBriefly(REFRESH_COUNT_DELAY);
         setCountError(t('Failed to obtain the number of matching devices'));
       } finally {
         setIsCountLoading(false);
@@ -210,230 +214,224 @@ const MassResumeDevicesModalContent = ({ onClose }: MassResumeDevicesModalProps)
   };
 
   return (
-    <Modal
-      variant={ModalVariant.medium}
-      title={t('Resume devices')}
-      isOpen
-      onClose={() => onClose(hasResumedAtLeastOne)}
-      actions={[
-        <Button
-          key="resume"
-          variant="primary"
-          onClick={handleResume}
-          isLoading={isSubmitting}
-          isDisabled={!isSubmitEnabled}
-        >
-          {t('Resume selection')}
-        </Button>,
-        <Button key="cancel" variant="link" onClick={() => onClose(hasResumedAtLeastOne)} isDisabled={isSubmitting}>
-          {hasResumedAtLeastOne ? t('Close') : t('Cancel')}
-        </Button>,
-      ]}
-    >
-      <Stack hasGutter>
-        <FlightCtlForm>
-          <StackItem>
-            <TextContent>
-              <Text>
+    <Modal isOpen onClose={() => onClose(hasResumedAtLeastOne)} variant="medium">
+      <ModalHeader title={t('Resume devices')} />
+      <ModalBody>
+        <Stack hasGutter>
+          <FlightCtlForm>
+            <StackItem>
+              <Content component="p">
                 {t(
                   "Following a system restore, devices have been identified with configurations newer than the server's records. To prevent data loss, they have been suspended from receiving updates.",
                 )}
-              </Text>
-            </TextContent>
-          </StackItem>
-          <StackItem>
-            <TextContent>
-              <Text>{t('Choose the criteria to select the devices to resume')}:</Text>
-            </TextContent>
-          </StackItem>
-
-          <StackItem>
-            <FormGroup isRequired fieldId="selection-mode">
-              <Radio
-                label={t('Fleet')}
-                id="selectionModeFleet"
-                name="selectionMode"
-                isChecked={values.mode === SelectionMode.FLEET}
-                onChange={() => {
-                  handleSelectionModeChanged(SelectionMode.FLEET);
-                }}
-                description={t('Resume all suspended devices associated with a given fleet')}
-              />
-              <Radio
-                label={t('Labels')}
-                id="selectionModeLabels"
-                name="selectionMode"
-                isChecked={values.mode === SelectionMode.LABELS}
-                onChange={() => {
-                  handleSelectionModeChanged(SelectionMode.LABELS);
-                }}
-                description={t('Resume all suspended devices matching the specified labels')}
-              />
-              <Radio
-                label={t('All suspended devices')}
-                id="selectionModeAll"
-                name="selectionMode"
-                isChecked={values.mode === SelectionMode.ALL}
-                onChange={() => {
-                  handleSelectionModeChanged(SelectionMode.ALL);
-                }}
-                description={t('Resume all suspended devices')}
-              />
-            </FormGroup>
-          </StackItem>
-
-          {values.mode === SelectionMode.FLEET && (
+              </Content>
+            </StackItem>
             <StackItem>
-              <FormGroup label={t('Fleet')} isRequired fieldId="fleetId">
-                <Select
-                  id="fleetSelection"
-                  isOpen={isFleetListOpen}
-                  selected={values.fleetId}
-                  onSelect={(_, selection) => handleFleetSelected(selection as string)}
-                  onOpenChange={(isOpen) => setIsFleetSelectOpen(isOpen)}
-                  toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-                    <MenuToggle
-                      ref={toggleRef}
-                      onClick={() => setIsFleetSelectOpen(!isFleetListOpen)}
-                      isExpanded={isFleetListOpen}
-                      isDisabled={fleetsLoading}
-                      style={{ width: '100%' }}
-                    >
-                      {values.fleetId || t('Select a fleet')}
-                    </MenuToggle>
-                  )}
-                  shouldFocusToggleOnSelect
-                >
-                  <SelectList>
-                    {fleets.map((fleet) => {
-                      const fleetId = fleet.metadata.name || '';
-                      const deviceSelectorStr = Object.entries(fleet.spec?.selector?.matchLabels || {})
-                        .map(([key, value]) => (value ? `${key}=${value}` : key))
-                        .join(',');
-
-                      let description = '';
-                      if (deviceSelectorStr) {
-                        description = `${t('Device selector labels')}: ${deviceSelectorStr}`;
-                      } else {
-                        description = t('This fleet does not select any devices');
-                      }
-
-                      return (
-                        <SelectOption
-                          key={fleetId}
-                          value={fleetId}
-                          description={description}
-                          isDisabled={!deviceSelectorStr}
-                        >
-                          {fleetId}
-                        </SelectOption>
-                      );
-                    })}
-                  </SelectList>
-                </Select>
-              </FormGroup>
+              <Content component="p">{t('Choose the criteria to select the devices to resume')}:</Content>
             </StackItem>
-          )}
 
-          {values.mode === SelectionMode.LABELS && (
             <StackItem>
-              <FormGroup label={t('Device labels')} fieldId="labelsSelection" isRequired>
-                <LabelsField name="labels" onChangeCallback={handleLabelsChanged} />
+              <FormGroup isRequired fieldId="selection-mode">
+                <Radio
+                  label={t('Fleet')}
+                  id="selectionModeFleet"
+                  name="selectionMode"
+                  isChecked={values.mode === SelectionMode.FLEET}
+                  onChange={() => {
+                    handleSelectionModeChanged(SelectionMode.FLEET);
+                  }}
+                  description={t('Resume all suspended devices associated with a given fleet')}
+                />
+                <Radio
+                  label={t('Labels')}
+                  id="selectionModeLabels"
+                  name="selectionMode"
+                  isChecked={values.mode === SelectionMode.LABELS}
+                  onChange={() => {
+                    handleSelectionModeChanged(SelectionMode.LABELS);
+                  }}
+                  description={t('Resume all suspended devices matching the specified labels')}
+                />
+                <Radio
+                  label={t('All suspended devices')}
+                  id="selectionModeAll"
+                  name="selectionMode"
+                  isChecked={values.mode === SelectionMode.ALL}
+                  onChange={() => {
+                    handleSelectionModeChanged(SelectionMode.ALL);
+                  }}
+                  description={t('Resume all suspended devices')}
+                />
               </FormGroup>
             </StackItem>
-          )}
-        </FlightCtlForm>
-
-        {isValid && dirty && resumedCount === undefined && (
-          <StackItem>
-            {isCountLoading ? (
-              <Alert variant="info" isInline title={t('Refreshing device count')}>
-                <Spinner size="md" className="pf-v5-u-mr-sm" />
-                {t('Checking how many suspended devices match your criteria...')}
-              </Alert>
-            ) : countError ? (
-              <Alert variant="warning" isInline title={t('Unable to refresh device count')}>
-                {countError}
-              </Alert>
-            ) : deviceCountNum > 0 ? (
-              <Alert
-                variant={values.mode === SelectionMode.ALL ? 'warning' : 'success'}
-                isInline
-                title={t('Devices found')}
-              >
-                {values.mode === SelectionMode.FLEET ? (
-                  <Trans t={t}>
-                    <strong>{deviceCount}</strong> suspended devices are currently associated with fleet{' '}
-                    <strong>{values.fleetId}</strong>.
-                  </Trans>
-                ) : values.mode === SelectionMode.LABELS ? (
-                  <Trans t={t}>
-                    <strong>{deviceCount}</strong> suspended devices match the specified labels.
-                  </Trans>
-                ) : (
-                  <>
-                    <Trans t={t} count={deviceCountNum}>
-                      You are about to resume all <strong>{deviceCount}</strong> suspended devices.
-                    </Trans>
-                    {t(
-                      'This action is irreversible and will allow all affected devices to receive new configuration updates from the server.',
+
+            {values.mode === SelectionMode.FLEET && (
+              <StackItem>
+                <FormGroup label={t('Fleet')} isRequired fieldId="fleetId">
+                  <Select
+                    id="fleetSelection"
+                    isOpen={isFleetListOpen}
+                    selected={values.fleetId}
+                    onSelect={(_, selection) => handleFleetSelected(selection as string)}
+                    onOpenChange={(isOpen) => setIsFleetSelectOpen(isOpen)}
+                    toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                      <MenuToggle
+                        ref={toggleRef}
+                        onClick={() => setIsFleetSelectOpen(!isFleetListOpen)}
+                        isExpanded={isFleetListOpen}
+                        isDisabled={fleetsLoading}
+                        style={{ width: '100%' }}
+                      >
+                        {values.fleetId || t('Select a fleet')}
+                      </MenuToggle>
                     )}
-                  </>
-                )}
-              </Alert>
-            ) : (
-              <Alert variant="warning" isInline title={t('No devices found')}>
-                {values.mode === SelectionMode.FLEET ? (
-                  <Trans t={t}>
-                    No suspended devices are associated with fleet <strong>{values.fleetId}</strong>.
-                  </Trans>
-                ) : values.mode === SelectionMode.ALL ? (
-                  t('No suspended devices found.')
-                ) : (
-                  t('No suspended devices match the specified labels.')
-                )}
-              </Alert>
+                    shouldFocusToggleOnSelect
+                  >
+                    <SelectList>
+                      {fleets.map((fleet) => {
+                        const fleetId = fleet.metadata.name || '';
+                        const deviceSelectorStr = Object.entries(fleet.spec?.selector?.matchLabels || {})
+                          .map(([key, value]) => (value ? `${key}=${value}` : key))
+                          .join(',');
+
+                        let description = '';
+                        if (deviceSelectorStr) {
+                          description = `${t('Device selector labels')}: ${deviceSelectorStr}`;
+                        } else {
+                          description = t('This fleet does not select any devices');
+                        }
+
+                        return (
+                          <SelectOption
+                            key={fleetId}
+                            value={fleetId}
+                            description={description}
+                            isDisabled={!deviceSelectorStr}
+                          >
+                            {fleetId}
+                          </SelectOption>
+                        );
+                      })}
+                    </SelectList>
+                  </Select>
+                </FormGroup>
+              </StackItem>
             )}
-          </StackItem>
-        )}
 
-        {submitError && (
-          <StackItem>
-            <Alert isInline variant="danger" title={t('Resume devices failed')}>
-              {submitError}
-            </Alert>
-          </StackItem>
-        )}
-        {resumedCount !== undefined && hasResumedAllExpected && (
-          <StackItem>
-            <Alert isInline variant="success" title={t('Resume successful')}>
-              {t('{{ count }} devices were resumed', { count: resumedCount })}
-            </Alert>
-          </StackItem>
-        )}
+            {values.mode === SelectionMode.LABELS && (
+              <StackItem>
+                <FormGroup label={t('Device labels')} fieldId="labelsSelection" isRequired>
+                  <LabelsField name="labels" onChangeCallback={handleLabelsChanged} />
+                </FormGroup>
+              </StackItem>
+            )}
+          </FlightCtlForm>
 
-        {resumedCount !== undefined && !hasResumedAllExpected && (
-          <StackItem>
-            <Alert isInline variant="warning" title={t('Resumed with warnings')}>
-              {t('{{ expectedCount }} devices to resume, and {{ resumedCount }} resumed successfully', {
-                expectedCount: deviceCountNum,
-                resumedCount,
-              })}
-            </Alert>
-          </StackItem>
+          {isValid && dirty && resumedCount === undefined && (
+            <StackItem>
+              {isCountLoading ? (
+                <Alert variant="info" isInline title={t('Refreshing device count')}>
+                  <Spinner size="md" />
+                  {t('Checking how many suspended devices match your criteria...')}
+                </Alert>
+              ) : countError ? (
+                <Alert variant="warning" isInline title={t('Unable to refresh device count')}>
+                  {countError}
+                </Alert>
+              ) : deviceCountNum > 0 ? (
+                <Alert
+                  variant={values.mode === SelectionMode.ALL ? 'warning' : 'success'}
+                  isInline
+                  title={t('Devices found')}
+                >
+                  {values.mode === SelectionMode.FLEET ? (
+                    <Trans t={t}>
+                      <strong>{deviceCount}</strong> suspended devices are currently associated with fleet{' '}
+                      <strong>{values.fleetId}</strong>.
+                    </Trans>
+                  ) : values.mode === SelectionMode.LABELS ? (
+                    <Trans t={t}>
+                      <strong>{deviceCount}</strong> suspended devices match the specified labels.
+                    </Trans>
+                  ) : (
+                    <>
+                      <Trans t={t} count={deviceCountNum}>
+                        You are about to resume all <strong>{deviceCount}</strong> suspended devices.
+                      </Trans>
+                      {t(
+                        'This action is irreversible and will allow all affected devices to receive new configuration updates from the server.',
+                      )}
+                    </>
+                  )}
+                </Alert>
+              ) : (
+                <Alert variant="warning" isInline title={t('No devices found')}>
+                  {values.mode === SelectionMode.FLEET ? (
+                    <Trans t={t}>
+                      No suspended devices are associated with fleet <strong>{values.fleetId}</strong>.
+                    </Trans>
+                  ) : values.mode === SelectionMode.ALL ? (
+                    t('No suspended devices found.')
+                  ) : (
+                    t('No suspended devices match the specified labels.')
+                  )}
+                </Alert>
+              )}
+            </StackItem>
+          )}
+
+          {submitError && (
+            <StackItem>
+              <Alert isInline variant="danger" title={t('Resume devices failed')}>
+                {submitError}
+              </Alert>
+            </StackItem>
+          )}
+          {resumedCount !== undefined && hasResumedAllExpected && (
+            <StackItem>
+              <Alert isInline variant="success" title={t('Resume successful')}>
+                {t('{{ count }} devices were resumed', { count: resumedCount })}
+              </Alert>
+            </StackItem>
+          )}
+
+          {resumedCount !== undefined && !hasResumedAllExpected && (
+            <StackItem>
+              <Alert isInline variant="warning" title={t('Resumed with warnings')}>
+                {t('{{ expectedCount }} devices to resume, and {{ resumedCount }} resumed successfully', {
+                  expectedCount: deviceCountNum,
+                  resumedCount,
+                })}
+              </Alert>
+            </StackItem>
+          )}
+        </Stack>
+        {showResumeAllConfirmation && (
+          <ResumeAllDevicesConfirmationDialog
+            devicesToResume={deviceCountNum}
+            onClose={(resumedCount) => {
+              setResumedCount(resumedCount);
+              setIsCountLoading(false);
+              setCountError(null);
+              setShowResumeAllConfirmation(false);
+            }}
+          />
         )}
-      </Stack>
-      {showResumeAllConfirmation && (
-        <ResumeAllDevicesConfirmationDialog
-          devicesToResume={deviceCountNum}
-          onClose={(resumedCount) => {
-            setResumedCount(resumedCount);
-            setIsCountLoading(false);
-            setCountError(null);
-            setShowResumeAllConfirmation(false);
-          }}
-        />
-      )}
+      </ModalBody>
+      <ModalFooter>
+        <Button
+          key="resume"
+          variant="primary"
+          onClick={handleResume}
+          isLoading={isSubmitting}
+          isDisabled={!isSubmitEnabled}
+        >
+          {t('Resume selection')}
+        </Button>
+        <Button key="cancel" variant="link" onClick={() => onClose(hasResumedAtLeastOne)} isDisabled={isSubmitting}>
+          {hasResumedAtLeastOne ? t('Close') : t('Cancel')}
+        </Button>
+      </ModalFooter>
     </Modal>
   );
 };

package/src/components/modals/massModals/ResumeDevicesModal/ResumeAllDevicesConfirmationDialog.tsx

@@ -1,6 +1,17 @@
 import * as React from 'react';
 import { Trans } from 'react-i18next';
-import { Alert, Button, Modal, ModalVariant, Stack, StackItem, Text, TextContent } from '@patternfly/react-core';
+import {
+  Alert,
+  Button,
+  Content,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  Stack,
+  StackItem,
+} from '@patternfly/react-core';
+
 import { DeviceResumeRequest, DeviceResumeResponse } from '@flightctl/types';
 
 import { useTranslation } from '../../../../hooks/useTranslation';
@@ -20,20 +31,16 @@ const ModalContentBeforeResume = ({ devicesToResume }: { devicesToResume: number
   return (
     <Stack hasGutter>
       <StackItem>
-        <TextContent>
-          <Text>
-            <Trans t={t} count={devicesToResume}>
-              You are about to resume all <strong>{deviceCount}</strong> suspended devices.
-            </Trans>
-          </Text>
-        </TextContent>
-        <TextContent>
-          <Text>
-            {t(
-              'This action is irreversible and will allow all affected devices to receive new configuration updates from the server.',
-            )}
-          </Text>
-        </TextContent>
+        <Content component="p">
+          <Trans t={t} count={devicesToResume}>
+            You are about to resume all <strong>{deviceCount}</strong> suspended devices.
+          </Trans>
+        </Content>
+        <Content component="p">
+          {t(
+            'This action is irreversible and will allow all affected devices to receive new configuration updates from the server.',
+          )}
+        </Content>
       </StackItem>
     </Stack>
   );
@@ -79,54 +86,58 @@ const ResumeAllDevicesConfirmationModal = ({ devicesToResume, onClose }: ResumeA
     ? t('Resume all {{ count }} devices?', { count: devicesToResume })
     : t('Resume devices result');
 
-  const buttons = isBeforeResume
-    ? [
-        <Button
-          key="confirm"
-          variant="primary"
-          isDisabled={isSubmitting}
-          onClick={async () => {
-            setIsSubmitting(true);
-            try {
-              const resumeRequest: DeviceResumeRequest = {
-                labelSelector: '', // All devices
-              };
-              const resumeResponse = await post<DeviceResumeRequest, DeviceResumeResponse>(
-                'deviceactions/resume',
-                resumeRequest,
-              );
-              setResumedCount(resumeResponse.resumedDevices || 0);
-            } catch (error) {
-              setResumedCount(0);
-              setSubmitError(getErrorMessage(error));
-            } finally {
-              setIsSubmitting(false);
-            }
-          }}
-        >
-          {t('Resume all devices')}
-        </Button>,
-        <Button key="cancel" variant="link" isDisabled={isSubmitting} onClick={() => onClose(undefined)}>
-          {t('Cancel')}
-        </Button>,
-      ]
-    : [
-        <Button key="close" variant="primary" onClick={() => onClose(resumedCount)}>
-          {t('Close')}
-        </Button>,
-      ];
-
   return (
-    <Modal variant={ModalVariant.small} title={title} isOpen onClose={() => onClose(undefined)} actions={buttons}>
-      {isBeforeResume ? (
-        <ModalContentBeforeResume devicesToResume={devicesToResume} />
-      ) : (
-        <ModalContentAfterResume
-          resumedCount={resumedCount}
-          hasResumedAll={resumedCount === devicesToResume}
-          submitError={submitError}
-        />
-      )}
+    <Modal isOpen onClose={() => onClose(undefined)} variant="small">
+      <ModalHeader title={title} />
+      <ModalBody>
+        {isBeforeResume ? (
+          <ModalContentBeforeResume devicesToResume={devicesToResume} />
+        ) : (
+          <ModalContentAfterResume
+            resumedCount={resumedCount}
+            hasResumedAll={resumedCount === devicesToResume}
+            submitError={submitError}
+          />
+        )}
+      </ModalBody>
+      <ModalFooter>
+        {isBeforeResume ? (
+          <>
+            <Button
+              key="confirm"
+              variant="primary"
+              isDisabled={isSubmitting}
+              onClick={async () => {
+                setIsSubmitting(true);
+                try {
+                  const resumeRequest: DeviceResumeRequest = {
+                    labelSelector: '', // All devices
+                  };
+                  const resumeResponse = await post<DeviceResumeRequest, DeviceResumeResponse>(
+                    'deviceactions/resume',
+                    resumeRequest,
+                  );
+                  setResumedCount(resumeResponse.resumedDevices || 0);
+                } catch (error) {
+                  setResumedCount(0);
+                  setSubmitError(getErrorMessage(error));
+                } finally {
+                  setIsSubmitting(false);
+                }
+              }}
+            >
+              {t('Resume all devices')}
+            </Button>
+            <Button key="cancel" variant="link" isDisabled={isSubmitting} onClick={() => onClose(undefined)}>
+              {t('Cancel')}
+            </Button>
+          </>
+        ) : (
+          <Button key="close" variant="primary" onClick={() => onClose(resumedCount)}>
+            {t('Close')}
+          </Button>
+        )}
+      </ModalFooter>
     </Modal>
   );
 };