feat(docker): add UI components to check for new image versions

src/components/designer/default/DefaultSidebar.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { useState } from 'react';
 import styled from '@emotion/styled';
-import { Switch } from 'antd';
+import { Button, Switch } from 'antd';
 import { usePrefixedTranslation } from 'hooks';
 import { NodeImplementation } from 'shared/types';
 import { useStoreActions, useStoreState } from 'store';
@@ -10,6 +10,7 @@ import { getPolarPlatform } from 'utils/system';
 import SidebarCard from '../SidebarCard';
 import SyncButton from '../SyncButton';
 import DraggableNode from './DraggableNode';
+import ImageUpdatesModal from './ImageUpdatesModal';
 
 const Styled = {
   AddNodes: styled.h3`
@@ -24,6 +25,9 @@ const Styled = {
     justify-content: space-between;
     margin: 10px 5px;
   `,
+  UpdatesButton: styled(Button)`
+    margin-top: 30px;
+  `,
 };
 
 interface Props {
@@ -33,14 +37,14 @@ interface Props {
 const DefaultSidebar: React.FC<Props> = ({ network }) => {
   const { l } = usePrefixedTranslation('cmps.designer.default.DefaultSidebar');
 
+  const [showUpdatesModal, setShowUpdatesModal] = useState(false);
   const { updateSettings } = useStoreActions(s => s.app);
   const { settings, dockerRepoState } = useStoreState(s => s.app);
   const showAll = settings.showAllNodeVersions;
   const currPlatform = getPolarPlatform();
 
-  const toggle = () => {
-    updateSettings({ showAllNodeVersions: !showAll });
-  };
+  const toggleVersions = () => updateSettings({ showAllNodeVersions: !showAll });
+  const toggleModal = () => setShowUpdatesModal(!showUpdatesModal);
 
   const nodes: {
     name: string;
@@ -66,7 +70,7 @@ const DefaultSidebar: React.FC<Props> = ({ network }) => {
       <Styled.AddDesc>{l('addNodesDesc')}</Styled.AddDesc>
       <Styled.Toggle>
         <span>{l('showVersions')}</span>
-        <Switch checked={showAll} onClick={toggle} />
+        <Switch checked={showAll} onClick={toggleVersions} />
       </Styled.Toggle>
       {nodes.map(({ name, logo, version, latest, type }) => (
         <DraggableNode
@@ -78,6 +82,12 @@ const DefaultSidebar: React.FC<Props> = ({ network }) => {
           visible={showAll || latest}
         />
       ))}
+      {showAll && (
+        <Styled.UpdatesButton type="link" block icon="cloud-sync" onClick={toggleModal}>
+          {l('checkUpdates')}
+        </Styled.UpdatesButton>
+      )}
+      {showUpdatesModal && <ImageUpdatesModal onClose={toggleModal} />}
     </SidebarCard>
   );
 };

src/components/designer/default/ImageUpdatesModal.tsx

@@ -0,0 +1,100 @@
+import React, { ReactNode } from 'react';
+import { useAsync, useAsyncCallback } from 'react-async-hook';
+import styled from '@emotion/styled';
+import { Modal, Result } from 'antd';
+import { usePrefixedTranslation } from 'hooks';
+import { useStoreActions } from 'store';
+import { delay } from 'utils/async';
+import { DetailsList, Loader } from 'components/common';
+
+const Styled = {
+  Loading: styled.div`
+    min-height: 200px;
+  `,
+  Details: styled.div`
+    width: 70%;
+    margin: auto;
+  `,
+};
+
+interface Props {
+  onClose: () => void;
+}
+
+const ImageUpdatesModal: React.FC<Props> = ({ onClose }) => {
+  const { l } = usePrefixedTranslation('cmps.designer.default.ImageUpdatesModal');
+  const { notify } = useStoreActions(s => s.app);
+
+  const checkAsync = useAsync(async () => {
+    await delay(1000);
+    return true;
+  }, []);
+
+  const updateAsync = useAsyncCallback(async () => {
+    try {
+      await delay(1000);
+      onClose();
+      notify({ message: l('addSuccess') });
+    } catch (error) {
+      notify({ message: l('addError'), error });
+    }
+  });
+
+  let cmp: ReactNode;
+  let showOk = false;
+  if (checkAsync.loading) {
+    cmp = (
+      <Styled.Loading>
+        <Loader />
+      </Styled.Loading>
+    );
+  } else if (checkAsync.result) {
+    const details = [
+      { label: 'LND', value: 'v0.8.0-beta' },
+      { label: 'Bitcoin Core', value: 'v0.19.0.1' },
+    ];
+    cmp = (
+      <>
+        <Result title={l('updatesTitle')} subTitle={l('updatesDesc')} />
+        <Styled.Details>
+          <DetailsList details={details} />
+        </Styled.Details>
+      </>
+    );
+    showOk = true;
+  } else if (checkAsync.error) {
+    cmp = (
+      <Result
+        status="error"
+        title={l('errorTitle')}
+        subTitle={checkAsync.error.message}
+      />
+    );
+  } else {
+    cmp = (
+      <Result status="success" title={l('successTitle')} subTitle={l('successDesc')} />
+    );
+  }
+
+  return (
+    <Modal
+      title={l('title')}
+      onCancel={onClose}
+      destroyOnClose
+      visible
+      width={600}
+      centered
+      cancelText={l('closeBtn')}
+      okText={l('okBtn')}
+      okButtonProps={{
+        loading: updateAsync.loading,
+        style: showOk ? {} : { display: 'none' },
+      }}
+      onOk={updateAsync.execute}
+    >
+      {cmp}
+    </Modal>
+  );
+};
+
+export default ImageUpdatesModal;

src/i18n/locales/en-US.json

@@ -58,6 +58,19 @@
   "cmps.designer.default.DefaultSidebar.addNodesTitle": "Add Nodes",
   "cmps.designer.default.DefaultSidebar.addNodesDesc": "Drag a node below onto the canvas to add it to the network",
   "cmps.designer.default.DefaultSidebar.showVersions": "Show All Versions",
+  "cmps.designer.default.DefaultSidebar.checkUpdates": "Check for new Node Versions",
+  "cmps.designer.default.ImageUpdatesModal.title": "Check for new Node Versions",
+  "cmps.designer.default.ImageUpdatesModal.updatesTitle": "There are new node versions available",
+  "cmps.designer.default.ImageUpdatesModal.updatesDesc": "Add the new versions to begin using them in your Lightning networks.",
+  "cmps.designer.default.ImageUpdatesModal.successTitle": "You are up to date!",
+  "cmps.designer.default.ImageUpdatesModal.successDesc": "There are currently no new node versions available. Check again when new versions are released. We aim to have them available to use within 48 hours of release.",
+  "cmps.designer.default.ImageUpdatesModal.errorTitle": "Failed to check for updates!",
+  "cmps.designer.default.ImageUpdatesModal.closeBtn": "Close",
+  "cmps.designer.default.ImageUpdatesModal.okBtn": "Add New Versions",
+  "cmps.designer.default.ImageUpdatesModal.addSuccess": "The new node versions are now available to use",
+  "cmps.designer.default.ImageUpdatesModal.addError": "Failed to add the new versions",
+  "cmps.designer.default.ImageUpdatesModal.success": "The new Docker Images can now be used",
+  "cmps.designer.default.ImageUpdatesModal.error": "Unable to update",
   "cmps.designer.link.Backend.title": "Chain Backend Connection",
   "cmps.designer.link.Backend.desc": "Lightning nodes rely on blockchain nodes to send transactions and receive confirmation notifications about transactions they care about. You can change this connection if you'd like to.",
   "cmps.designer.link.Backend.btnText": "Change Backend",