Skip to content

Commit

Permalink
move to useDialogs
Browse files Browse the repository at this point in the history
  • Loading branch information
@tomasmatus
tomasmatus committed Aug 22, 2023
1 parent fb3f830 commit 5426a54
Show file tree
Hide file tree
Showing 3 changed files with 114 additions and 131 deletions.
173 changes: 82 additions & 91 deletions src/ostree.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ import { AddRepositoryModal, EditRepositoryModal, RebaseRepositoryModal, RemoveR

import './ostree.scss';
import { CleanUpModal, ResetModal } from './deploymentModals';
import { WithDialogs, useDialogs } from "dialogs.jsx";

const _ = cockpit.gettext;

Expand Down Expand Up @@ -497,78 +498,66 @@ const OStreeStatus = ({ ostreeState, versions }) => {
};

const OStreeSource = ({ ostreeState, refreshRemotes, onChangeBranch, onChangeRemoteOrigin }) => {
const OStreeSourceActions = () => {
const [isKebabOpen, setKebabOpen] = useState(false);
const [isRemoveModalOpen, setRemoveModalOpen] = useState(false);
const [isAddModalOpen, setAddModalOpen] = useState(false);
const [isEditModalOpen, setEditModalOpen] = useState(false);
const [isRebaseModalOpen, setRebaseModalOpen] = useState(false);

const actions = [
<DropdownItem key="rebase"
onClick={() => setRebaseModalOpen(true)}>
{_("Rebase")}
</DropdownItem>,
<DropdownSeparator key="separator-1" />,
<DropdownItem key="add-repository"
onClick={() => setAddModalOpen(true)}>
{_("Add repository")}
</DropdownItem>,
<DropdownItem key="edit-repository"
onClick={() => setEditModalOpen(true)}>
{_("Edit repository")}
</DropdownItem>,
<DropdownItem key="remove-repository"
onClick={() => setRemoveModalOpen(true)}>
{_("Remove repository")}
</DropdownItem>,
];

return (
<>
<Dropdown toggle={<KebabToggle onToggle={(_, isOpen) => setKebabOpen(isOpen)} />}
isPlain
isOpen={isKebabOpen}
position="right"
id="ostree-source-actions"
dropdownItems={actions}
const Dialogs = useDialogs();
const [isKebabOpen, setKebabOpen] = useState(false);

const actions = [
<DropdownItem key="rebase"
isDisabled={!ostreeState.branches && !ostreeState.branchLoadError}
onClick={() => Dialogs.show(
<RebaseRepositoryModal origin={ostreeState.origin}
availableRemotes={ostreeState.remotes}
currentOriginBranches={ostreeState.branches}
currentBranchLoadError={ostreeState.branchLoadError}
onChangeBranch={onChangeBranch}
onChangeRemoteOrigin={onChangeRemoteOrigin}
/>
{isRemoveModalOpen &&
<RemoveRepositoryModal closeModal={() => setRemoveModalOpen(false)}
origin={ostreeState.origin}
availableRemotes={ostreeState.remotes}
refreshRemotes={refreshRemotes}
/>
}
{isAddModalOpen &&
<AddRepositoryModal closeModal={() => setAddModalOpen(false)}
refreshRemotes={refreshRemotes}
/>
}
{isEditModalOpen &&
<EditRepositoryModal
closeModal={() => setEditModalOpen(false)}
remote={ostreeState.origin.remote}
availableRemotes={ostreeState.remotes}
/>
}
{isRebaseModalOpen &&
<RebaseRepositoryModal closeModal={() => setRebaseModalOpen(false)}
origin={ostreeState.origin}
availableRemotes={ostreeState.remotes}
currentOriginBranches={ostreeState.branches}
currentBranchLoadError={ostreeState.branchLoadError}
onChangeBranch={onChangeBranch}
onChangeRemoteOrigin={onChangeRemoteOrigin}
/>
}
</>
);
};
)}
>
{_("Rebase")}
</DropdownItem>,
<DropdownSeparator key="separator-1" />,
<DropdownItem key="add-repository"
onClick={() => Dialogs.show(
<AddRepositoryModal refreshRemotes={refreshRemotes} />
)}
>
{_("Add repository")}
</DropdownItem>,
<DropdownItem key="edit-repository"
onClick={() => Dialogs.show(
<EditRepositoryModal remote={ostreeState.origin.remote}
availableRemotes={ostreeState.remotes}
/>
)}
>
{_("Edit repository")}
</DropdownItem>,
<DropdownItem key="remove-repository"
onClick={() => Dialogs.show(
<RemoveRepositoryModal origin={ostreeState.origin}
availableRemotes={ostreeState.remotes}
refreshRemotes={refreshRemotes}
/>
)}
>
{_("Remove repository")}
</DropdownItem>,
];

const ostreeSourceActions = (
<Dropdown toggle={<KebabToggle onToggle={(_, isOpen) => setKebabOpen(isOpen)} />}
isPlain
isOpen={isKebabOpen}
position="right"
id="ostree-source-actions"
dropdownItems={actions}
/>
);

return (
<Card className="ct-card-info" id="ostree-source">
<CardHeader actions={{ actions: <OStreeSourceActions /> }}>
<CardHeader actions={{ actions: ostreeSourceActions }}>
<CardTitle component="h2">{_("OStree source")}</CardTitle>
</CardHeader>
<CardBody>
Expand Down Expand Up @@ -803,29 +792,31 @@ class Application extends React.Component {
);

return (
<Page>
<PageSection>
<Gallery hasGutter className="ct-cards-grid">
<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} actionClose={<AlertActionCloseButton onClose={() => this.setState({ error: "" })} />} />}
<CardHeader actions={{ actions: cardActions, hasNoOffset: false }}>
<CardTitle component="h2">{_("Deployments and updates")}</CardTitle>
</CardHeader>
<CardBody className="contains-list">
<Deployments versions={versions} />
</CardBody>
</Card>
</Gallery>
</PageSection>
{this.state.isCleanupModalOpen &&
<CleanUpModal closeModal={() => this.setState({ isCleanupModalOpen: false })} />
}
{this.state.isResetModalOpen &&
<ResetModal closeModal={() => this.setState({ isResetModalOpen: false })} />
}
</Page>
<WithDialogs>
<Page>
<PageSection>
<Gallery hasGutter className="ct-cards-grid">
<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} actionClose={<AlertActionCloseButton onClose={() => this.setState({ error: "" })} />} />}
<CardHeader actions={{ actions: cardActions, hasNoOffset: false }}>
<CardTitle component="h2">{_("Deployments and updates")}</CardTitle>
</CardHeader>
<CardBody className="contains-list">
<Deployments versions={versions} />
</CardBody>
</Card>
</Gallery>
</PageSection>
{this.state.isCleanupModalOpen &&
<CleanUpModal closeModal={() => this.setState({ isCleanupModalOpen: false })} />
}
{this.state.isResetModalOpen &&
<ResetModal closeModal={() => this.setState({ isResetModalOpen: false })} />
}
</Page>
</WithDialogs>
);
}
}
Expand Down
48 changes: 24 additions & 24 deletions src/repositoryModals.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,19 +34,21 @@ import { Select, SelectOption } from "@patternfly/react-core/dist/esm/deprecated
import { ExclamationCircleIcon } from '@patternfly/react-icons';

import { FormHelper } from 'cockpit-components-form-helper.jsx';
import { useDialogs } from "dialogs.jsx";

import * as remotes from './remotes';

const _ = cockpit.gettext;

export const RemoveRepositoryModal = ({ closeModal, origin, availableRemotes, refreshRemotes }) => {
export const RemoveRepositoryModal = ({ origin, availableRemotes, refreshRemotes }) => {
const Dialogs = useDialogs();
const [error, setError] = useState('');
const [selectedRemotes, setSelectedRemotes] = useState([]);

const onDelete = () => {
Promise.all(selectedRemotes.map(remote => remotes.deleteRemote(remote)))
.then(() => refreshRemotes())
.then(closeModal, ex => setError(ex.message));
.then(Dialogs.close, ex => setError(ex.message));
};

const handleChange = (event, isChecked) => {
Expand All @@ -64,7 +66,7 @@ export const RemoveRepositoryModal = ({ closeModal, origin, availableRemotes, re
onClick={() => onDelete()}>
{_("Remove")}
</Button>,
<Button key="cancel" variant="link" onClick={closeModal}>
<Button key="cancel" variant="link" onClick={Dialogs.close}>
{_("Cancel")}
</Button>
];
Expand All @@ -86,7 +88,7 @@ export const RemoveRepositoryModal = ({ closeModal, origin, availableRemotes, re
title={_("Remove repository")}
position="top"
variant="small"
onClose={closeModal}
onClose={Dialogs.close}
actions={actions}
>
<Form isHorizontal>
Expand All @@ -103,7 +105,8 @@ export const RemoveRepositoryModal = ({ closeModal, origin, availableRemotes, re
);
};

export const AddRepositoryModal = ({ closeModal, refreshRemotes }) => {
export const AddRepositoryModal = ({ refreshRemotes }) => {
const Dialogs = useDialogs();
const [newRepoName, setNewRepoName] = useState("");
const [newRepoURL, setNewRepoURL] = useState("");
const [newRepoTrusted, setNewRepoTrusted] = useState(false);
Expand All @@ -118,7 +121,7 @@ export const AddRepositoryModal = ({ closeModal, refreshRemotes }) => {
}
return remotes.addRemote(newRepoName, newRepoURL, newRepoTrusted)
.then(() => refreshRemotes())
.then(closeModal,
.then(Dialogs.close,
ex => setAddNewRepoError(ex.message));
};

Expand All @@ -128,7 +131,7 @@ export const AddRepositoryModal = ({ closeModal, refreshRemotes }) => {
onClick={() => onAddRemote()}>
{_("Add repository")}
</Button>,
<Button key="cancel" variant="link" onClick={closeModal}>
<Button key="cancel" variant="link" onClick={Dialogs.close}>
{_("Cancel")}
</Button>
];
Expand All @@ -139,7 +142,7 @@ export const AddRepositoryModal = ({ closeModal, refreshRemotes }) => {
title={_("Add new repository")}
position="top"
variant="small"
onClose={closeModal}
onClose={Dialogs.close}
actions={actions}
>
<Form isHorizontal>
Expand Down Expand Up @@ -188,7 +191,8 @@ export const AddRepositoryModal = ({ closeModal, refreshRemotes }) => {
);
};

export const EditRepositoryModal = ({ closeModal, remote, availableRemotes }) => {
export const EditRepositoryModal = ({ remote, availableRemotes }) => {
const Dialogs = useDialogs();
const [addAnotherKey, setAddAnotherKey] = useState(false);
const [key, setKey] = useState('');
const [error, setError] = useState('');
Expand Down Expand Up @@ -220,14 +224,14 @@ export const EditRepositoryModal = ({ closeModal, remote, availableRemotes }) =>

promises.push(remotes.updateRemoteSettings(selectedRemote, options));

Promise.all(promises).then(() => closeModal(), ex => setError(ex.message));
Promise.all(promises).then(() => Dialogs.close(), ex => setError(ex.message));
};

const actions = [
<Button key="edit-repo" variant="primary" onClick={onUpdate}>
{_("Save")}
</Button>,
<Button key="cancel" variant="link" onClick={closeModal}>
<Button key="cancel" variant="link" onClick={Dialogs.close}>
{_("Cancel")}
</Button>,
];
Expand All @@ -238,7 +242,7 @@ export const EditRepositoryModal = ({ closeModal, remote, availableRemotes }) =>
variant="small"
id="edit-repository-modal"
isOpen
onClose={closeModal}
onClose={Dialogs.close}
actions={actions}
>
<Form isHorizontal>
Expand Down Expand Up @@ -286,7 +290,8 @@ export const EditRepositoryModal = ({ closeModal, remote, availableRemotes }) =>
);
};

export const RebaseRepositoryModal = ({ closeModal, origin, availableRemotes, currentOriginBranches, currentBranchLoadError, onChangeBranch, onChangeRemoteOrigin }) => {
export const RebaseRepositoryModal = ({ origin, availableRemotes, currentOriginBranches, currentBranchLoadError, onChangeBranch, onChangeRemoteOrigin }) => {
const Dialogs = useDialogs();
const [isSelectRemoteExpanded, setSelectRemoteExpanded] = useState(false);
const [selectedRemote, setSelectedRemote] = useState(origin.remote);
const [isSelectBranchExpanded, setSelectBranchExpanded] = useState(false);
Expand All @@ -295,11 +300,6 @@ export const RebaseRepositoryModal = ({ closeModal, origin, availableRemotes, cu
const [branchLoadError, setBranchLoadError] = useState(currentBranchLoadError);
const [error, setError] = useState(null);

// branches were not loaded yet
if (!availableBranches && !branchLoadError) {
return null;
}

const handeRemoteSelect = async (remote) => {
setSelectedRemote(remote);
remotes.listBranches(remote)
Expand All @@ -322,7 +322,7 @@ export const RebaseRepositoryModal = ({ closeModal, origin, availableRemotes, cu
const onRebaseClicked = () => {
onChangeRemoteOrigin(selectedRemote)
.then(() => onChangeBranch(selectedBranch))
.then(closeModal)
.then(Dialogs.close())
.catch(ex => setError(ex.message));
};

Expand All @@ -335,7 +335,7 @@ export const RebaseRepositoryModal = ({ closeModal, origin, availableRemotes, cu
</Button>,
<Button key="cancel"
variant="link"
onClick={closeModal}
onClick={Dialogs.close}
>
{_("Cancel")}
</Button>
Expand Down Expand Up @@ -381,12 +381,12 @@ export const RebaseRepositoryModal = ({ closeModal, origin, availableRemotes, cu
);

return (
<Modal isOpen
id="rebase-repository-modal"
title={_("Rebase repository and branch")}
<Modal title={_("Rebase repository and branch")}
position="top"
variant="small"
onClose={closeModal}
id="rebase-repository-modal"
isOpen
onClose={Dialogs.close}
actions={actions}
>
{error && <Alert variant="danger" isInline title={error} />}
Expand Down
Loading

0 comments on commit 5426a54

Please sign in to comment.