ui+common: SubServerRequired component

Author: itsrachelfish

app/src/assets/icons/plug.svg

@@ -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/base/icons.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/common/SubServerRequired.tsx

@@ -31,6 +31,9 @@
   "cmps.common.PageHeader.exportTip": "Download CSV",
   "cmps.common.PageHeader.helpTip": "Take a Tour",
   "cmps.common.Wizard.backTip": "Back to Previous",
+  "cmps.common.SubServerStatus.isDisabled": "This subserver is turned off so this interface is not accessible.",
+  "cmps.common.SubServerStatus.isError": "This subserver encountered an error and failed to start up.",
+  "cmps.common.SubServerStatus.isNotRunning": "The {{name}} subserver is not running so this interface is not accessible.",
   "cmps.connect.AddSession.create": "Create a new session",
   "cmps.connect.AddSession.label": "Label",
   "cmps.connect.AddSession.permissions": "Permissions",