rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions 1 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 { DecoratedInput } from '@/components/DecoratedInput';
import { WebApplication } from '@/ui_models/application';
@@ -35,8 +35,22 @@ export const Extensions: FunctionComponent<{
}, [confirmableExtension, confirmableEnd]);
const uninstallExtension = async (extension: SNComponent) => {
await application.deleteItem(extension);
setExtensions(loadExtensions(application));
application.alertService.confirm(
'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) => {
@@ -72,50 +86,51 @@ export const Extensions: FunctionComponent<{
return (
<div>
{visibleExtensions.length > 0 &&
<div>
{
visibleExtensions
.sort((e1, e2) => e1.name.toLowerCase().localeCompare(e2.name.toLowerCase()))
.map((extension, i) => (
<ExtensionItem
application={application}
extension={extension}
latestVersion={extensionsLatestVersions.getVersion(extension)}
first={i === 0}
uninstall={uninstallExtension}
toggleActivate={toggleActivateExtension} />
))
}
</div>
<div>
{
visibleExtensions
.sort((e1, e2) => e1.name.toLowerCase().localeCompare(e2.name.toLowerCase()))
.map((extension, i) => (
<ExtensionItem
key={extension.uuid}
application={application}
extension={extension}
latestVersion={extensionsLatestVersions.getVersion(extension)}
first={i === 0}
uninstall={uninstallExtension}
toggleActivate={toggleActivateExtension} />
))
}
</div>
}
<div>
{!confirmableExtension &&
<PreferencesSegment>
<Title>Install Custom Extension</Title>
<div className="min-h-2" />
<DecoratedInput
placeholder={'Enter Extension URL'}
text={customUrl}
onChange={(value) => { setCustomUrl(value); }}
/>
<div className="min-h-2" />
<Button
className="min-w-20"
type="normal"
label="Install"
onClick={() => submitExtensionUrl(customUrl)}
/>
</PreferencesSegment>
<PreferencesSegment>
<Title>Install Custom Extension</Title>
<div className="min-h-2" />
<DecoratedInput
placeholder={'Enter Extension URL'}
text={customUrl}
onChange={(value) => { setCustomUrl(value); }}
/>
<div className="min-h-2" />
<Button
className="min-w-20"
type="normal"
label="Install"
onClick={() => submitExtensionUrl(customUrl)}
/>
</PreferencesSegment>
}
{confirmableExtension &&
<PreferencesSegment>
<ConfirmCustomExtension
component={confirmableExtension}
callback={handleConfirmExtensionSubmit}
/>
<div ref={confirmableEnd} />
</PreferencesSegment>
<PreferencesSegment>
<ConfirmCustomExtension
component={confirmableExtension}
callback={handleConfirmExtensionSubmit}
/>
<div ref={confirmableEnd} />
</PreferencesSegment>
}
</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 isExternal = !extension.package_info.identifier.startsWith('org.standardnotes.');
const installedVersion = extension.package_info.version;
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 && <UseHosted offlineOnly={offlineOnly} toggleOfllineOnly={toggleOffllineOnly} />}
{(isToggleable || isExternal) &&
<>
<div className="min-h-2" />
<div className="flex flex-row">
{isToggleable && (
<>
{(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>
</>
}
<>
<div className="min-h-2" />
<div className="flex flex-row">
{isToggleable && (
<>
{(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" />
</>
)}
<Button className="min-w-20" type="normal" label="Uninstall" onClick={() => uninstall(extension)} />
</div>
</>
</PreferencesSegment >
);
};