change layout for branch selection in RebaseRepositoryModal

cockpit-project · Aug 15, 2023 · 9734c25 · 9734c25
1 parent 9c54717
commit 9734c25
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 17 deletions.
diff --git a/src/ostree.jsx b/src/ostree.jsx
@@ -26,7 +26,7 @@ import { debounce } from 'throttle-debounce';
 
 import 'patternfly/patternfly-5-cockpit.scss';
 
-import { Alert } from "@patternfly/react-core/dist/esm/components/Alert";
+import { Alert, AlertActionCloseButton } from "@patternfly/react-core/dist/esm/components/Alert";
 import { Button } from "@patternfly/react-core/dist/esm/components/Button";
 import { Card, CardHeader, CardTitle, CardBody } from "@patternfly/react-core/dist/esm/components/Card";
 import { EmptyState, EmptyStateIcon, EmptyStateBody, EmptyStateHeader, EmptyStateFooter, EmptyStateVariant } from "@patternfly/react-core/dist/esm/components/EmptyState";
@@ -699,7 +699,10 @@ class Application extends React.Component {
     }
 
     checkForUpgrades() {
-        this.setState({ progressMsg: _("Checking for updates") });
+        this.setState({
+            progressMsg: _("Checking for updates"),
+            error: "",
+        });
 
         return client.check_for_updates(this.state.os, this.state.origin.remote, this.state.origin.branch)
                 .catch(ex => this.setState({ error: ex }))
@@ -806,7 +809,7 @@ class Application extends React.Component {
                         <OStreeStatus ostreeState={this.state} versions={versions} />
                         <OStreeSource ostreeState={this.state} refreshRemotes={this.refreshRemotes} onChangeBranch={this.onChangeBranch} onChangeRemoteOrigin={this.onChangeRemoteOrigin} />
                         <Card id="deployments" isSelectable isClickable>
-                            {this.state.error && <Alert variant="danger" isInline title={this.state.error} />}
+                            {this.state.error && <Alert variant="danger" isInline title={this.state.error} actionClose={<AlertActionCloseButton onClose={() => this.setState({ error: "" })} />} />}
                             <CardHeader actions={{ actions: cardActions, hasNoOffset: false }}>
                                 <CardTitle component="h2">{_("Deployments and updates")}</CardTitle>
                             </CardHeader>

diff --git a/src/repositoryModals.jsx b/src/repositoryModals.jsx
@@ -24,12 +24,14 @@ import cockpit from 'cockpit';
 import { Alert } from "@patternfly/react-core/dist/esm/components/Alert";
 import { Button } from "@patternfly/react-core/dist/esm/components/Button";
 import { Checkbox } from '@patternfly/react-core/dist/esm/components/Checkbox';
+import { Flex, FlexItem } from "@patternfly/react-core/dist/esm/layouts/Flex/index.js";
 import { Form, FormGroup } from "@patternfly/react-core/dist/esm/components/Form";
 import { Modal } from "@patternfly/react-core/dist/esm/components/Modal";
 import { Text } from "@patternfly/react-core/dist/esm/components/Text";
 import { TextInput } from "@patternfly/react-core/dist/esm/components/TextInput";
 import { TextArea } from "@patternfly/react-core/dist/esm/components/TextArea";
 import { Select, SelectOption } from "@patternfly/react-core/dist/esm/deprecated/components/Select";
+import { ExclamationCircleIcon } from '@patternfly/react-icons';
 
 import { FormHelper } from 'cockpit-components-form-helper.jsx';
 
@@ -351,9 +353,31 @@ export const RebaseRepositoryModal = ({ closeModal, origin, availableRemotes, cu
             </Select>
         )
         : (
-            <Text>
-                {availableRemotes[0]}
-            </Text>
+            <Text>{availableRemotes[0]}</Text>
+        );
+
+    const branchComponent = branchLoadError
+        ? (
+            <Flex spacer={{ default: 'spaceItemsSm' }} flexWrap={{ default: 'nowrap' }} className="danger-color">
+                <FlexItem><ExclamationCircleIcon /></FlexItem>
+                <FlexItem>{branchLoadError.replace("error: ", "")}</FlexItem>
+            </Flex>
+        )
+        : (
+            availableBranches.length > 1
+                ? (
+                    <Select isOpen={isSelectBranchExpanded}
+                        selections={selectedBranch}
+                        onToggle={(_, expanded) => setSelectBranchExpanded(expanded) }
+                        onSelect={(_, branch) => { setSelectBranchExpanded(false); setSelectedBranch(branch) }}
+                        menuAppendTo="parent"
+                    >
+                        {availableBranches.map(branch => <SelectOption value={branch} key={branch}> {branch} </SelectOption>)}
+                    </Select>
+                )
+                : (
+                    <Text>{availableBranches[0]}</Text>
+                )
         );
 
     return (
@@ -377,18 +401,9 @@ export const RebaseRepositoryModal = ({ closeModal, origin, availableRemotes, cu
                 <FormGroup label={_("Branch")}
                     id="change-branch"
                     fieldId="selected-branch"
+                    hasNoPaddingTop={branchLoadError || availableBranches.length === 1}
                 >
-                    <Select isOpen={isSelectBranchExpanded}
-                        selections={selectedBranch}
-                        onToggle={(_, expanded) => setSelectBranchExpanded(expanded) }
-                        onSelect={(_, branch) => { setSelectBranchExpanded(false); setSelectedBranch(branch) }}
-                        menuAppendTo="parent"
-                    >
-                        { branchLoadError
-                            ? [<SelectOption key="branch-load-error" value={branchLoadError} isDisabled />]
-                            : (availableBranches.map(branch => <SelectOption value={branch} key={branch}> {branch} </SelectOption>))
-                        }
-                    </Select>
+                    {branchComponent}
                 </FormGroup>
             </Form>
         </Modal>