Merge pull request #620 from lightninglabs/disabled-subservers

Front-end integration for disabled subservers

app/src/__tests__/components/common/SubServerStatusMessage.spec.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { renderWithProviders } from 'util/tests';
+import { prefixTranslation } from 'util/translate';
+import { SubServerStatusMessage } from 'components/common/SubServerRequired';
+
+describe('SubServer Status Message Component', () => {
+  const render = (isDisabled: boolean, errorMessage?: string) => {
+    const cmp = (
+      <SubServerStatusMessage isDisabled={isDisabled} errorMessage={errorMessage} />
+    );
+    return renderWithProviders(cmp);
+  };
+
+  it('should display disabled', () => {
+    const { getByText } = render(true);
+    const { l } = prefixTranslation('cmps.common.SubServerStatus');
+    expect(getByText(l('isDisabled'))).toBeInTheDocument();
+  });
+
+  it('should display error', () => {
+    const { getByText } = render(false);
+    const { l } = prefixTranslation('cmps.common.SubServerStatus');
+    expect(getByText(l('isError'))).toBeInTheDocument();
+  });
+
+  it('should match error message', () => {
+    const { getByText } = render(false, 'Test error message');
+    expect(getByText('Test error message')).toBeInTheDocument();
+  });
+});

app/src/__tests__/components/loop/LoopPage.spec.tsx

@@ -9,6 +9,7 @@ import { formatSats } from 'util/formatters';
 import { renderWithProviders } from 'util/tests';
 import { loopListSwaps } from 'util/tests/sampleData';
 import { createStore, Store } from 'store';
+import { prefixTranslation } from 'util/translate';
 import LoopPage from 'components/loop/LoopPage';
 
 const grpcMock = grpc as jest.Mocked<typeof grpc>;
@@ -216,5 +217,15 @@ describe('LoopPage component', () => {
       expect(store.settingsStore.channelSort.field).toBeUndefined();
       expect(store.settingsStore.channelSort.descending).toBe(true);
     });
+
+    it('should display subserver disabled message', () => {
+      const { getByText, store } = render();
+      const { l } = prefixTranslation('cmps.common.SubServerStatus');
+
+      store.subServerStore.subServers.loop.disabled = true;
+      render();
+
+      expect(getByText(l('isDisabled'))).toBeInTheDocument();
+    });
   });
 });

app/src/__tests__/components/pool/PoolPage.spec.tsx

@@ -3,13 +3,15 @@ import { fireEvent } from '@testing-library/react';
 import { saveAs } from 'file-saver';
 import { renderWithProviders } from 'util/tests';
 import { createStore, Store } from 'store';
+import { prefixTranslation } from 'util/translate';
 import PoolPage from 'components/pool/PoolPage';
 
 describe('PoolPage', () => {
   let store: Store;
 
   beforeEach(async () => {
     store = createStore();
+    await store.fetchAllData();
   });
 
   const render = () => {
@@ -27,4 +29,14 @@ describe('PoolPage', () => {
     fireEvent.click(getByText('download.svg'));
     expect(saveAs).toBeCalledWith(expect.any(Blob), 'leases.csv');
   });
+
+  it('should display subserver disabled message', () => {
+    const { getByText, store } = render();
+    const { l } = prefixTranslation('cmps.common.SubServerStatus');
+
+    store.subServerStore.subServers.pool.disabled = true;
+    render();
+
+    expect(getByText(l('isDisabled'))).toBeInTheDocument();
+  });
 });

app/src/api/lit.ts

@@ -1,7 +1,9 @@
 import * as ACCOUNT from 'types/generated/lit-accounts_pb';
 import * as SESSION from 'types/generated/lit-sessions_pb';
+import * as STATUS from 'types/generated/lit-status_pb';
 import { Accounts } from 'types/generated/lit-accounts_pb_service';
 import { Sessions } from 'types/generated/lit-sessions_pb_service';
+import { Status } from 'types/generated/lit-status_pb_service';
 import { b64 } from 'util/strings';
 import { MAX_DATE } from 'util/constants';
 import BaseApi from './base';
@@ -84,6 +86,12 @@ class LitApi extends BaseApi<LitEvents> {
     const res = await this._grpc.request(Sessions.RevokeSession, req, this._meta);
     return res.toObject();
   }
+
+  async listSubServerStatus(): Promise<STATUS.SubServerStatusResp.AsObject> {
+    const req = new STATUS.SubServerStatusReq();
+    const res = await this._grpc.request(Status.SubServerStatus, req, this._meta);
+    return res.toObject();
+  }
 }
 
 export default LitApi;

app/src/components/base/icons.tsx

@@ -32,9 +32,10 @@ import { ReactComponent as CancelIcon } from 'assets/icons/slash.svg';
 import { ReactComponent as UserPlusIcon } from 'assets/icons/user-plus.svg';
 import { ReactComponent as QRCodeIcon } from 'assets/icons/qr.svg';
 import { ReactComponent as BoltOutlinedIcon } from 'assets/icons/bolt-outlined.svg';
+import { ReactComponent as PlugIcon } from 'assets/icons/plug.svg';
 
 interface IconProps {
-  size?: 'x-small' | 'small' | 'medium' | 'large';
+  size?: 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
   onClick?: () => void;
   disabled?: boolean;
 }
@@ -51,7 +52,7 @@ const Icon = styled.span<IconProps>`
     cursor: pointer;
     &:hover {
       color: ${props.theme.colors.blue};
-      background-color: ${props.theme.colors.offWhite}; 
+      background-color: ${props.theme.colors.offWhite};
     }
   `}
 
@@ -88,6 +89,13 @@ const Icon = styled.span<IconProps>`
       width: 36px;
       height: 36px;
     `}
+
+  ${props =>
+    props.size === 'x-large' &&
+    `
+      width: 48px;
+      height: 48px;
+    `}
 `;
 
 export const AlertTriangle = Icon.withComponent(AlertTriangleIcon);
@@ -123,3 +131,4 @@ export const BarChart = Icon.withComponent(BarChartIcon);
 export const List = Icon.withComponent(ListIcon);
 export const QRCode = Icon.withComponent(QRCodeIcon);
 export const BoltOutlined = Icon.withComponent(BoltOutlinedIcon);
+export const Plug = Icon.withComponent(PlugIcon);

app/src/components/common/SubServerRequired.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { usePrefixedTranslation } from 'hooks';
+import { Plug } from '../base';
+import { SubServerStatus } from 'types/state';
+
+const Styled = {
+  Wrapper: styled.div`
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  `,
+  StatusMessage: styled.div`
+    display: inline-block;
+    border-radius: 24px;
+    padding: 3px 16px 3px 6px;
+    font-size: ${props => props.theme.sizes.s};
+    color: ${props => props.theme.colors.lightningGray};
+    font-weight: 600;
+    white-space: nowrap;
+    text-align: center;
+
+    svg {
+      margin-bottom: 16px;
+      color: ${props => props.theme.colors.gold};
+    }
+  `,
+  Error: styled.div`
+    font-weight: bold;
+  `,
+};
+
+interface StatusProps {
+  isDisabled: boolean;
+  errorMessage?: string;
+}
+
+export const SubServerStatusMessage: React.FC<StatusProps> = ({
+  isDisabled,
+  errorMessage,
+}) => {
+  const { l } = usePrefixedTranslation('cmps.common.SubServerStatus');
+  const { Wrapper, StatusMessage, Error } = Styled;
+  return (
+    <Wrapper>
+      <StatusMessage>
+        <Plug size="x-large" />
+
+        {isDisabled ? (
+          <p>{l('isDisabled')}</p>
+        ) : (
+          <>
+            <p>{l('isError')}</p>
+            <Error>{errorMessage}</Error>
+          </>
+        )}
+      </StatusMessage>
+    </Wrapper>
+  );
+};
+
+interface Props {
+  status: SubServerStatus;
+}
+
+const SubServerRequired: React.FC<Props> = ({ status, children }) => {
+  if (status.disabled) {
+    return <SubServerStatusMessage isDisabled />;
+  } else if (status.error) {
+    return <SubServerStatusMessage isDisabled={false} errorMessage={status.error} />;
+  }
+
+  return <>{children}</>;
+};
+
+export default SubServerRequired;

app/src/components/history/HistoryPage.tsx

@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 import { usePrefixedTranslation } from 'hooks';
 import { useStore } from 'store';
 import PageHeader from 'components/common/PageHeader';
+import SubServerRequired from 'components/common/SubServerRequired';
 import HistoryList from './HistoryList';
 
 const Styled = {
@@ -14,14 +15,16 @@ const Styled = {
 
 const HistoryPage: React.FC = () => {
   const { l } = usePrefixedTranslation('cmps.history.HistoryPage');
-  const { swapStore } = useStore();
+  const { swapStore, subServerStore } = useStore();
 
   const { Wrapper } = Styled;
   return (
-    <Wrapper>
-      <PageHeader title={l('pageTitle')} onExportClick={swapStore.exportSwaps} />
-      <HistoryList />
-    </Wrapper>
+    <SubServerRequired status={subServerStore.subServers.loop}>
+      <Wrapper>
+        <PageHeader title={l('pageTitle')} onExportClick={swapStore.exportSwaps} />
+        <HistoryList />
+      </Wrapper>
+    </SubServerRequired>
   );
 };
 

app/src/components/loop/LoopPage.tsx

@@ -5,6 +5,7 @@ import { usePrefixedTranslation } from 'hooks';
 import { useStore } from 'store';
 import { Badge } from 'components/base';
 import PageHeader from 'components/common/PageHeader';
+import SubServerRequired from 'components/common/SubServerRequired';
 import ChannelList from './ChannelList';
 import LoopActions from './LoopActions';
 import LoopTiles from './LoopTiles';
@@ -26,6 +27,7 @@ const LoopPage: React.FC = () => {
     registerSidecarView,
     channelStore,
     nodeStore,
+    subServerStore,
   } = useStore();
 
   const title = (
@@ -41,26 +43,28 @@ const LoopPage: React.FC = () => {
 
   const { PageWrap } = Styled;
   return (
-    <PageWrap>
-      {appView.processingSwapsVisible ? (
-        <ProcessingSwaps />
-      ) : buildSwapView.showWizard ? (
-        <SwapWizard />
-      ) : registerSidecarView.showWizard ? (
-        <SidecarWizard />
-      ) : (
-        <>
-          <PageHeader
-            title={title}
-            onHelpClick={appView.showTour}
-            onExportClick={channelStore.exportChannels}
-          />
-          <LoopTiles />
-          <LoopActions />
-        </>
-      )}
-      <ChannelList />
-    </PageWrap>
+    <SubServerRequired status={subServerStore.subServers.loop}>
+      <PageWrap>
+        {appView.processingSwapsVisible ? (
+          <ProcessingSwaps />
+        ) : buildSwapView.showWizard ? (
+          <SwapWizard />
+        ) : registerSidecarView.showWizard ? (
+          <SidecarWizard />
+        ) : (
+          <>
+            <PageHeader
+              title={title}
+              onHelpClick={appView.showTour}
+              onExportClick={channelStore.exportChannels}
+            />
+            <LoopTiles />
+            <LoopActions />
+          </>
+        )}
+        <ChannelList />
+      </PageWrap>
+    </SubServerRequired>
   );
 };