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

feat: ability to uninstall any extension

Browse Source
This commit is contained in:
Mo Bitar
2021-11-14 14:27:26 -06:00
parent 893615157b
commit 04136159dc
2 changed files with 72 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
app/assets/javascripts/preferences/panes/Extensions.tsx
View File

@@ -1,4 +1,4 @@
import { ContentType, SNComponent } from '@standardnotes/snjs'; import { ButtonType, ContentType, SNComponent } from '@standardnotes/snjs';
import { Button } from '@/components/Button'; import { Button } from '@/components/Button';
import { DecoratedInput } from '@/components/DecoratedInput'; import { DecoratedInput } from '@/components/DecoratedInput';
import { WebApplication } from '@/ui_models/application'; import { WebApplication } from '@/ui_models/application';
@@ -35,8 +35,22 @@ export const Extensions: FunctionComponent<{
}, [confirmableExtension, confirmableEnd]); }, [confirmableExtension, confirmableEnd]);
const uninstallExtension = async (extension: SNComponent) => { const uninstallExtension = async (extension: SNComponent) => {
await application.deleteItem(extension); application.alertService.confirm(
setExtensions(loadExtensions(application)); 'Are you sure you want to uninstall this extension? Note that extensions managed by your subscription will automatically be re-installed on application restart.',
'Uninstall Extension?',
'Uninstall',
ButtonType.Danger,
'Cancel'
)
.then(async (shouldRemove: boolean) => {
if (shouldRemove) {
await application.deleteItem(extension);
setExtensions(loadExtensions(application));
}
})
.catch((err: string) => {
application.alertService.alert(err);
});
}; };
const submitExtensionUrl = async (url: string) => { const submitExtensionUrl = async (url: string) => {
@@ -72,50 +86,51 @@ export const Extensions: FunctionComponent<{
return ( return (
<div> <div>
{visibleExtensions.length > 0 && {visibleExtensions.length > 0 &&
<div> <div>
{ {
visibleExtensions visibleExtensions
.sort((e1, e2) => e1.name.toLowerCase().localeCompare(e2.name.toLowerCase())) .sort((e1, e2) => e1.name.toLowerCase().localeCompare(e2.name.toLowerCase()))
.map((extension, i) => ( .map((extension, i) => (
<ExtensionItem <ExtensionItem
application={application} key={extension.uuid}
extension={extension} application={application}
latestVersion={extensionsLatestVersions.getVersion(extension)} extension={extension}
first={i === 0} latestVersion={extensionsLatestVersions.getVersion(extension)}
uninstall={uninstallExtension} first={i === 0}
toggleActivate={toggleActivateExtension} /> uninstall={uninstallExtension}
)) toggleActivate={toggleActivateExtension} />
} ))
</div> }
</div>
} }
<div> <div>
{!confirmableExtension && {!confirmableExtension &&
<PreferencesSegment> <PreferencesSegment>
<Title>Install Custom Extension</Title> <Title>Install Custom Extension</Title>
<div className="min-h-2" /> <div className="min-h-2" />
<DecoratedInput <DecoratedInput
placeholder={'Enter Extension URL'} placeholder={'Enter Extension URL'}
text={customUrl} text={customUrl}
onChange={(value) => { setCustomUrl(value); }} onChange={(value) => { setCustomUrl(value); }}
/> />
<div className="min-h-2" /> <div className="min-h-2" />
<Button <Button
className="min-w-20" className="min-w-20"
type="normal" type="normal"
label="Install" label="Install"
onClick={() => submitExtensionUrl(customUrl)} onClick={() => submitExtensionUrl(customUrl)}
/> />
</PreferencesSegment> </PreferencesSegment>
} }
{confirmableExtension && {confirmableExtension &&
<PreferencesSegment> <PreferencesSegment>
<ConfirmCustomExtension <ConfirmCustomExtension
component={confirmableExtension} component={confirmableExtension}
callback={handleConfirmExtensionSubmit} callback={handleConfirmExtensionSubmit}
/> />
<div ref={confirmableEnd} /> <div ref={confirmableEnd} />
</PreferencesSegment> </PreferencesSegment>
} }
</div> </div>
</div> </div>

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

@@ -101,7 +101,6 @@ export const ExtensionItem: FunctionComponent<ExtensionItemProps> =
}; };
const localInstallable = extension.package_info.download_url; const localInstallable = extension.package_info.download_url;
const isExternal = !extension.package_info.identifier.startsWith('org.standardnotes.');
const installedVersion = extension.package_info.version; const installedVersion = extension.package_info.version;
const isToggleable = [ComponentArea.EditorStack, ComponentArea.TagsList].includes(extension.area); const isToggleable = [ComponentArea.EditorStack, ComponentArea.TagsList].includes(extension.area);
@@ -120,24 +119,22 @@ export const ExtensionItem: FunctionComponent<ExtensionItemProps> =
{localInstallable && <AutoUpdateLocal autoupdateDisabled={autoupdateDisabled} toggleAutoupdate={toggleAutoupdate} />} {localInstallable && <AutoUpdateLocal autoupdateDisabled={autoupdateDisabled} toggleAutoupdate={toggleAutoupdate} />}
{localInstallable && <UseHosted offlineOnly={offlineOnly} toggleOfllineOnly={toggleOffllineOnly} />} {localInstallable && <UseHosted offlineOnly={offlineOnly} toggleOfllineOnly={toggleOffllineOnly} />}
{(isToggleable || isExternal) && <>
<> <div className="min-h-2" />
<div className="min-h-2" /> <div className="flex flex-row">
<div className="flex flex-row"> {isToggleable && (
{isToggleable && ( <>
<> {(extension.active ? (
{(extension.active ? ( <Button className="min-w-20" type="normal" label="Deactivate" onClick={() => toggleActivate!(extension)} />
<Button className="min-w-20" type="normal" label="Deactivate" onClick={() => toggleActivate!(extension)} /> ) : (
) : ( <Button className="min-w-20" type="normal" label="Activate" onClick={() => toggleActivate!(extension)} />
<Button className="min-w-20" type="normal" label="Activate" onClick={() => toggleActivate!(extension)} /> ))}
))} <div className="min-w-3" />
<div className="min-w-3" /> </>
</> )}
)} <Button className="min-w-20" type="normal" label="Uninstall" onClick={() => uninstall(extension)} />
{isExternal && <Button className="min-w-20" type="normal" label="Uninstall" onClick={() => uninstall(extension)} />} </div>
</div> </>
</>
}
</PreferencesSegment > </PreferencesSegment >
); );
}; };