diff --git a/src/widgets/gitClone.tsx b/src/widgets/gitClone.tsx
index 415a3735f..bb7cfc61c 100644
--- a/src/widgets/gitClone.tsx
+++ b/src/widgets/gitClone.tsx
@@ -20,22 +20,18 @@ export function addCloneButton(model: IGitExtension, filebrowser: FileBrowser) {
'gitClone',
ReactWidget.create(
- {(_, change: IChangedArgs) => (
- {
- await doGitClone(model, filebrowser.model.path);
- filebrowser.model.refresh();
- }}
- tooltip={'Git Clone'}
+ {(_, change: IChangedArgs) => (
+
)}
@@ -151,3 +147,54 @@ class GitCloneForm extends Widget {
return encodeURIComponent(this.node.querySelector('input').value);
}
}
+
+/**
+ * Git clone toolbar button properties
+ */
+interface IGitCloneButtonProps {
+ /**
+ * Git extension model
+ */
+ model: IGitExtension;
+ /**
+ * File browser object
+ */
+ filebrowser: FileBrowser;
+ /**
+ * File browser path change
+ */
+ change: IChangedArgs;
+}
+
+const GitCloneButton: React.FunctionComponent = (
+ props: IGitCloneButtonProps
+) => {
+ const [enable, setEnable] = React.useState(false);
+
+ React.useEffect(() => {
+ model
+ .showTopLevel(change.newValue)
+ .then(answer => {
+ setEnable(answer.code !== 0);
+ })
+ .catch(reason => {
+ console.error(
+ `Fail to get the top level path for ${change.newValue}.\n${reason}`
+ );
+ });
+ });
+
+ const { model, filebrowser, change } = props;
+
+ return (
+ {
+ await doGitClone(model, filebrowser.model.path);
+ filebrowser.model.refresh();
+ }}
+ tooltip={'Git Clone'}
+ />
+ );
+};