rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(preferences): extension modals into extension panes (#683)

Browse Source 
* feat(preferences): show inline extensions in extensions pane

* wip

* wip

* refactor: convert ComponentView to React component

* refactor: convert ComponentView to React component

* chore: fix merge conflicts

* feat: don't show features whose `area` is "room", update modal items' icons in Preferences menu

* chore: fix TS error

* feat: don't show 2FA Manager in modal-based component

* feat: remove `ExtendedDataReloadComplete` event, since Extensions Manger is being removed from the app

* chore: avoid hardcoded values in svg image, optimize `if` condition

* chore: remove remnant comment

* fix: fix typescript errors

Co-authored-by: vardanhakobyan <vardan_live@live.com>
This commit is contained in:
Gorjan Petrovski
2021-10-25 10:45:36 +02:00
committed by GitHub
parent 82fc103a3e
commit 31222e1236
29 changed files with 993 additions and 625 deletions
Download Patch File Download Diff File Expand all files Collapse all files

244
app/assets/javascripts/preferences/panes/extensions-segments/ExtensionItem.tsx
View File

@@ -6,6 +6,7 @@ import { Switch } from "@/components/Switch";
import { WebApplication } from "@/ui_models/application";
import { useEffect, useRef, useState } from "preact/hooks";
import { Button } from "@/components/Button";
import { RenameExtension } from "./RenameExtension";
const ExtensionVersions: FunctionComponent<{
installedVersion: string,
@@ -37,161 +38,108 @@ const UseHosted: FunctionComponent<{
</div>
);
const RenameExtension: FunctionComponent<{
extensionName: string, changeName: (newName: string) => void
}> = ({ extensionName, changeName }) => {
const [isRenaming, setIsRenaming] = useState(false);
const [newExtensionName, setNewExtensionName] = useState<string>(extensionName);
const inputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
if (isRenaming) {
inputRef.current!.focus();
}
}, [inputRef, isRenaming]);
const startRenaming = () => {
setNewExtensionName(extensionName);
setIsRenaming(true);
};
const cancelRename = () => {
setNewExtensionName(extensionName);
setIsRenaming(false);
};
const confirmRename = () => {
if (newExtensionName == undefined || newExtensionName === '') {
return;
}
changeName(newExtensionName);
setIsRenaming(false);
};
return (
<div className="flex flex-row mr-3 items-center">
<input
ref={inputRef}
disabled={!isRenaming}
autocomplete='off'
className="flex-grow text-base font-bold no-border bg-default px-0 color-text"
type="text"
value={newExtensionName}
onChange={({ target: input }) => setNewExtensionName((input as HTMLInputElement)?.value)}
/>
<div className="min-w-3" />
{isRenaming ?
<>
<a className="pt-1 cursor-pointer" onClick={confirmRename}>Confirm</a>
<div className="min-w-3" />
<a className="pt-1 cursor-pointer" onClick={cancelRename}>Cancel</a>
</> :
<a className="pt-1 cursor-pointer" onClick={startRenaming}>Rename</a>
}
</div>
);
};
export const ExtensionItem: FunctionComponent<{
export interface ExtensionItemProps {
application: WebApplication,
extension: SNComponent,
first: boolean,
latestVersion: string | undefined,
uninstall: (extension: SNComponent) => void,
toggleActivate: (extension: SNComponent) => void,
}> = ({ application, extension, first, uninstall, toggleActivate, latestVersion }) => {
toggleActivate?: (extension: SNComponent) => void,
}
export const ExtensionItem: FunctionComponent<ExtensionItemProps> =
({ application, extension, first, uninstall, toggleActivate, latestVersion }) => {
const [autoupdateDisabled, setAutoupdateDisabled] = useState(extension.autoupdateDisabled ?? false);
const [offlineOnly, setOfflineOnly] = useState(extension.offlineOnly ?? false);
const [extensionName, setExtensionName] = useState(extension.name);
const toggleAutoupdate = () => {
const newAutoupdateValue = !autoupdateDisabled;
setAutoupdateDisabled(newAutoupdateValue);
application
.changeAndSaveItem(extension.uuid, (m: any) => {
if (m.content == undefined) m.content = {};
m.content.autoupdateDisabled = newAutoupdateValue;
})
.then((item) => {
const component = (item as SNComponent);
setAutoupdateDisabled(component.autoupdateDisabled);
})
.catch(e => {
console.error(e);
});
const toggleAutoupdate = () => {
const newAutoupdateValue = !autoupdateDisabled;
setAutoupdateDisabled(newAutoupdateValue);
application
.changeAndSaveItem(extension.uuid, (m: any) => {
if (m.content == undefined) m.content = {};
m.content.autoupdateDisabled = newAutoupdateValue;
})
.then((item) => {
const component = (item as SNComponent);
setAutoupdateDisabled(component.autoupdateDisabled);
})
.catch(e => {
console.error(e);
});
};
const toggleOffllineOnly = () => {
const newOfflineOnly = !offlineOnly;
setOfflineOnly(newOfflineOnly);
application
.changeAndSaveItem(extension.uuid, (m: any) => {
if (m.content == undefined) m.content = {};
m.content.offlineOnly = newOfflineOnly;
})
.then((item) => {
const component = (item as SNComponent);
setOfflineOnly(component.offlineOnly);
})
.catch(e => {
console.error(e);
});
};
const changeExtensionName = (newName: string) => {
setExtensionName(newName);
application
.changeAndSaveItem(extension.uuid, (m: any) => {
if (m.content == undefined) m.content = {};
m.content.name = newName;
})
.then((item) => {
const component = (item as SNComponent);
setExtensionName(component.name);
});
};
const localInstallable = extension.package_info.download_url;
const isExternal = !extension.package_info.identifier.startsWith('org.standardnotes.');
const installedVersion = extension.package_info.version;
const isEditorOrTags = ['editor-stack', 'tags-list'].includes(extension.area);
return (
<PreferencesSegment>
{first && <>
<Title>Extensions</Title>
<div className="w-full min-h-3" />
</>}
<RenameExtension extensionName={extensionName} changeName={changeExtensionName} />
<div className="min-h-2" />
<ExtensionVersions installedVersion={installedVersion} latestVersion={latestVersion} />
{localInstallable && <AutoUpdateLocal autoupdateDisabled={autoupdateDisabled} toggleAutoupdate={toggleAutoupdate} />}
{localInstallable && <UseHosted offlineOnly={offlineOnly} toggleOfllineOnly={toggleOffllineOnly} />}
{isEditorOrTags || isExternal &&
<>
<div className="min-h-2" />
<div className="flex flex-row">
{isEditorOrTags && toggleActivate != undefined && (
<>
{extension.active ?
<Button className="min-w-20" type="normal" label="Deactivate" onClick={() => toggleActivate(extension)} /> :
<Button className="min-w-20" type="normal" label="Activate" onClick={() => toggleActivate(extension)} />
}
<div className="min-w-3" />
</>
)}
{isExternal && <Button className="min-w-20" type="normal" label="Uninstall" onClick={() => uninstall(extension)} />}
</div>
</>
}
</PreferencesSegment >
);
};
const toggleOffllineOnly = () => {
const newOfflineOnly = !offlineOnly;
setOfflineOnly(newOfflineOnly);
application
.changeAndSaveItem(extension.uuid, (m: any) => {
if (m.content == undefined) m.content = {};
m.content.offlineOnly = newOfflineOnly;
})
.then((item) => {
const component = (item as SNComponent);
setOfflineOnly(component.offlineOnly);
})
.catch(e => {
console.error(e);
});
};
const changeExtensionName = (newName: string) => {
setExtensionName(newName);
application
.changeAndSaveItem(extension.uuid, (m: any) => {
if (m.content == undefined) m.content = {};
m.content.name = newName;
})
.then((item) => {
const component = (item as SNComponent);
setExtensionName(component.name);
});
};
const localInstallable = extension.package_info.download_url;
const isExternal = !extension.package_info.identifier.startsWith('org.standardnotes.');
const installedVersion = extension.package_info.version;
const isEditorOrTags = ['editor-stack', 'tags-list'].includes(extension.area);
return (
<PreferencesSegment>
{first && <>
<Title>Extensions</Title>
<div className="w-full min-h-3" />
</>}
<RenameExtension extensionName={extensionName} changeName={changeExtensionName} />
<div className="min-h-2" />
<ExtensionVersions installedVersion={installedVersion} latestVersion={latestVersion} />
{localInstallable && <AutoUpdateLocal autoupdateDisabled={autoupdateDisabled} toggleAutoupdate={toggleAutoupdate} />}
{localInstallable && <UseHosted offlineOnly={offlineOnly} toggleOfllineOnly={toggleOffllineOnly} />}
{isEditorOrTags || isExternal &&
<>
<div className="min-h-2" />
<div className="flex flex-row">
{isEditorOrTags && (
<>
{extension.active ?
<Button className="min-w-20" type="normal" label="Deactivate" onClick={() => toggleActivate(extension)} /> :
<Button className="min-w-20" type="normal" label="Activate" onClick={() => toggleActivate(extension)} />
}
<div className="min-w-3" />
</>
)}
{isExternal && <Button className="min-w-20" type="normal" label="Uninstall" onClick={() => uninstall(extension)} />}
</div>
</>
}
</PreferencesSegment >
);
};