Skip to content

Commit

Permalink
feature: Not connected alert banner in React (#2492)
Browse files Browse the repository at this point in the history
### TL;DR
Added a network status banner to the main layout component.

| before | after |
| -- | -- |
| ![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/XqC2uNFuj0wg8I60sMUh/2bef7928-f35c-45b9-b050-4bbadba4721e.png) |  ![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/XqC2uNFuj0wg8I60sMUh/ebb01c92-29d8-46db-aed6-da473d39b63f.png) |

### What changed?
- Introduced `NetworkStatusBanner` component.
  - Displays when the user is offline
- Updated translations for the offline message in multiple languages.
- Removed old snackbar-based offline indicator.

### How to test?
1. Go offline and verify that the new banner appears with the appropriate message.

### Why make this change?
Enhances user experience by providing clearer visual feedback on network status directly within the main layout.

---

<!--
Please precisely, concisely, and concretely describe what this PR changes, the rationale behind codes,
and how it affects the users and other developers.
-->

**Checklist:** (if applicable)

- [ ] Mention to the original issue
- [ ] Documentation
- [ ] Minium required manager version
- [ ] Specific setting for review (eg., KB link, endpoint or how to setup)
- [ ] Minimum requirements to check during review
- [ ] Test case(s) to demonstrate the difference of before/after
  • Loading branch information
yomybaby committed Jul 1, 2024
1 parent a5d4a36 commit db62f9a
Show file tree
Hide file tree
Showing 27 changed files with 79 additions and 134 deletions.
2 changes: 2 additions & 0 deletions react/src/components/MainLayout/MainLayout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import BAIErrorBoundary from '../BAIErrorBoundary';
import BAISider from '../BAISider';
import Flex from '../Flex';
import ForceTOTPChecker from '../ForceTOTPChecker';
import NetworkStatusBanner from '../NetworkStatusBanner';
import PasswordChangeRequestAlert from '../PasswordChangeRequestAlert';
import { DRAWER_WIDTH } from '../WEBUINotificationDrawer';
import WebUIHeader from './WebUIHeader';
Expand Down Expand Up @@ -169,6 +170,7 @@ function MainLayout() {
zIndex: HEADER_Z_INDEX_IN_MAIN_LAYOUT,
}}
>
<NetworkStatusBanner />
<WebUIHeader
onClickMenuIcon={() => setSideCollapsed((v) => !v)}
containerElement={contentScrollFlexRef.current}
Expand Down
55 changes: 55 additions & 0 deletions react/src/components/NetworkStatusBanner.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import { useNetwork } from 'ahooks';
import { Alert } from 'antd';
import { createStyles } from 'antd-style';
import { atom, useAtom } from 'jotai';
import { useTranslation } from 'react-i18next';

const networkSoftTimeoutAtom = atom(false);

const useStyles = createStyles(({ token, css }) => ({
borderError: css`
border-bottom: 1px solid ${token.colorErrorBorder} !important;
`,
borderWarning: css`
border-bottom: 1px solid ${token.colorWarningBorder} !important;
`,
}));
const NetworkStatusBanner = () => {
const { t } = useTranslation();
const network = useNetwork();

const { styles } = useStyles();

const [softTimeout, setSoftTimeout] = useAtom(networkSoftTimeoutAtom);

// const handler = (()=>{
// });

// useEffect(()=>{
// document.addEventListener('backendai.client.softtimeout', handler);
// return ()=>{
// document.removeEventListener('backendai.client.softtimeout', handler);
// }
// },[])

return !network.online ? (
<Alert
message={t('webui.YouAreOffline')}
className={styles.borderError}
type="error"
banner
/>
) : softTimeout ? (
<Alert
message={t('webui.NetworkSoftTimeout')}
className={styles.borderWarning}
banner
closable
onClose={() => {
setSoftTimeout(false);
}}
/>
) : null;
};

export default NetworkStatusBanner;
2 changes: 1 addition & 1 deletion resources/i18n/de.json
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
"MyEnvironments": "Meine Umgebungen",
"ResourcePolicy": "Ressourcenpolitik"
},
"YouAreOffline": "Du bist jetzt offline",
"YouAreOffline": "Offline: Keine Verbindung zu einem Netzwerk.",
"YouAreOnline": "Sie sind jetzt online",
"NOTFOUND": " <p> Hoppla! <br/> Seite nicht gefunden... </p>",
"DescNOTFOUND": "Die von Ihnen gesuchte Seite konnte leider nicht gefunden werden.",
Expand Down
2 changes: 1 addition & 1 deletion resources/i18n/el.json
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
"MyEnvironments": "Τα περιβάλλοντα μου",
"ResourcePolicy": "Πολιτική Πόρων"
},
"YouAreOffline": "Είστε πλέον εκτός σύνδεσης",
"YouAreOffline": "Offline: Δεν είναι συνδεδεμένος σε κανένα δίκτυο.",
"YouAreOnline": "Είστε πλέον συνδεδεμένοι",
"NOTFOUND": " α0d4554eb75c21z0 Ωχ! <br/> Η σελίδα δεν βρέθηκε ... </p>",
"DescNOTFOUND": "Δυστυχώς, δεν ήταν δυνατή η εύρεση της σελίδας που αναζητάτε.",
Expand Down
2 changes: 1 addition & 1 deletion resources/i18n/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
"MyEnvironments": "My Environments",
"ResourcePolicy": "Resource Policy"
},
"YouAreOffline": "You are now offline",
"YouAreOffline": "Offline: Not connected to any networks.",
"YouAreOnline": "You are now online",
"NOTFOUND": "<p>Oops!<br/>Page not Found...</p>",
"DescNOTFOUND": "Sorry, the page you are looking for could not be found.",
Expand Down
2 changes: 1 addition & 1 deletion resources/i18n/es.json
Original file line number Diff line number Diff line change
Expand Up @@ -1505,7 +1505,7 @@
"DescNOTFOUND": "Lo sentimos, no se ha encontrado la página que busca.",
"NOTFOUND": "<p>¡Oops!<br/>Página no encontrada...</p>",
"UNAUTHORIZEDACCESS": "Acceso no autorizado",
"YouAreOffline": "Ahora está desconectado",
"YouAreOffline": "Desconectado: No conectado a ninguna red.",
"YouAreOnline": "Ya está en línea",
"menu": {
"AIAccelerator": "Acelerador de IA",
Expand Down
2 changes: 1 addition & 1 deletion resources/i18n/fi.json
Original file line number Diff line number Diff line change
Expand Up @@ -1503,7 +1503,7 @@
"DescNOTFOUND": "Valitettavasti etsimääsi sivua ei löytynyt.",
"NOTFOUND": "<p>Oops!<br/>Sivua ei löydy...</p>",
"UNAUTHORIZEDACCESS": "Luvaton pääsy",
"YouAreOffline": "Olet nyt offline-tilassa",
"YouAreOffline": "Offline: Ei yhteyttä mihinkään verkkoon.",
"YouAreOnline": "Olet nyt verkossa",
"menu": {
"AIAccelerator": "AI-kiihdyttämö",
Expand Down
2 changes: 1 addition & 1 deletion resources/i18n/fr.json
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
"MyEnvironments": "Mes environnements",
"ResourcePolicy": "Politique des ressources"
},
"YouAreOffline": "Vous êtes maintenant hors ligne",
"YouAreOffline": "Hors ligne : N'est connecté à aucun réseau.",
"YouAreOnline": "Vous êtes maintenant en ligne",
"NOTFOUND": " <p> Oups ! <br/> Page non trouvée... </p>",
"DescNOTFOUND": "Désolé, la page que vous recherchez est introuvable.",
Expand Down
2 changes: 1 addition & 1 deletion resources/i18n/id.json
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
"MyEnvironments": "Lingkungan Saya",
"ResourcePolicy": "Kebijakan Sumber Daya"
},
"YouAreOffline": "Anda sekarang offline",
"YouAreOffline": "Offline: Tidak terhubung ke jaringan apa pun.",
"YouAreOnline": "Anda sekarang online",
"NOTFOUND": " <p> Ups! <br/> Halaman tidak ditemukan... </p>",
"DescNOTFOUND": "Maaf, halaman yang anda cari tidak ditemukan.",
Expand Down
2 changes: 1 addition & 1 deletion resources/i18n/it.json
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
"MyEnvironments": "I miei ambienti",
"ResourcePolicy": "Politica delle risorse"
},
"YouAreOffline": "Ora sei offline",
"YouAreOffline": "Non in linea: Non è collegato ad alcuna rete.",
"YouAreOnline": "Ora sei online",
"NOTFOUND": " <p> Ops! <br/> Pagina non trovata... </p>",
"DescNOTFOUND": "Siamo spiacenti, la pagina che stai cercando non è stata trovata.",
Expand Down
2 changes: 1 addition & 1 deletion resources/i18n/ja.json
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
"MyEnvironments": "私の環境",
"ResourcePolicy": "リソースポリシー"
},
"YouAreOffline": "あなたは今オフラインです",
"YouAreOffline": "オフライン:どのネットワークにも接続されていない。",
"YouAreOnline": "あなたは今オンラインです",
"NOTFOUND": " <p>おっと! <br/>ページが見つかりません... </p>",
"DescNOTFOUND": "申し訳ありませんが、お探しのページが見つかりませんでした。",
Expand Down
2 changes: 1 addition & 1 deletion resources/i18n/ko.json
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
"MyEnvironments": "나의 실행 환경",
"ResourcePolicy": "자원 정책"
},
"YouAreOffline": "오프라인 상태가 되었습니다",
"YouAreOffline": "오프라인: 네트워크에 연결되어 있지 않습니다.",
"YouAreOnline": "온라인 상태가 되었습니다",
"NOTFOUND": "<p>요청하신 페이지를 찾을 수 없습니다.</p>",
"DescNOTFOUND": "요청하신 페이지가 사라졌거나, 잘못된 경로를 입력하였습니다.",
Expand Down
2 changes: 1 addition & 1 deletion resources/i18n/mn.json
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
"MyEnvironments": "Миний орчин",
"ResourcePolicy": "Нөөцийн бодлого"
},
"YouAreOffline": "Та одоо офлайн байна",
"YouAreOffline": "Офлайн: Ямар ч сүлжээнд холбогдоогүй.",
"YouAreOnline": "Та одоо онлайн байна",
"NOTFOUND": " <p> Өө! <br/> хуудас олдсонгүй ... </p>",
"DescNOTFOUND": "Уучлаарай, таны хайж буй хуудас олдсонгүй.",
Expand Down
2 changes: 1 addition & 1 deletion resources/i18n/ms.json
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
"MyEnvironments": "Persekitaran Saya",
"ResourcePolicy": "Dasar Sumber"
},
"YouAreOffline": "Anda kini berada di luar talian",
"YouAreOffline": "Luar talian: Tidak disambungkan ke mana-mana rangkaian.",
"YouAreOnline": "Anda kini dalam talian",
"NOTFOUND": " <p> Alamak! <br/> Halaman tidak dijumpai ... </p>",
"DescNOTFOUND": "Maaf, halaman yang anda cari tidak dapat dijumpai.",
Expand Down
2 changes: 1 addition & 1 deletion resources/i18n/pl.json
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
"MyEnvironments": "Moje Środowiska",
"ResourcePolicy": "Polityka zasobów"
},
"YouAreOffline": "Jesteś teraz offline",
"YouAreOffline": "Offline: Brak połączenia z siecią.",
"YouAreOnline": "Jesteś teraz online",
"NOTFOUND": " <p> Ups! <br/> Nie znaleziono strony... </p>",
"DescNOTFOUND": "Przepraszamy, nie można znaleźć strony, której szukasz.",
Expand Down
2 changes: 1 addition & 1 deletion resources/i18n/pt-BR.json
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
"MyEnvironments": "Meus ambientes",
"ResourcePolicy": "Política de Recursos"
},
"YouAreOffline": "Agora você está offline",
"YouAreOffline": "Desligado: Não está ligado a nenhuma rede.",
"YouAreOnline": "Agora você está online",
"NOTFOUND": " <p> Ops! <br/> Página não encontrada ... </p>",
"DescNOTFOUND": "Desculpe, a página que você está procurando não foi encontrada.",
Expand Down
2 changes: 1 addition & 1 deletion resources/i18n/pt.json
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
"MyEnvironments": "Meus ambientes",
"ResourcePolicy": "Política de Recursos"
},
"YouAreOffline": "Agora você está offline",
"YouAreOffline": "Desligado: Não está ligado a nenhuma rede.",
"YouAreOnline": "Agora você está online",
"NOTFOUND": " <p> Ops! <br/> Página não encontrada ... </p>",
"DescNOTFOUND": "Desculpe, a página que você está procurando não foi encontrada.",
Expand Down
2 changes: 1 addition & 1 deletion resources/i18n/ru.json
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
"MyEnvironments": "Моя среда",
"ResourcePolicy": "Ресурсная политика"
},
"YouAreOffline": "Вы сейчас не в сети",
"YouAreOffline": "Не в сети: Не подключен ни к одной сети.",
"YouAreOnline": "Вы сейчас в сети",
"NOTFOUND": " <p> Ой! <br/> Страница не найдена ... </p>",
"DescNOTFOUND": "Извините, страница, которую вы ищете, не может быть найдена.",
Expand Down
2 changes: 1 addition & 1 deletion resources/i18n/tr.json
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
"MyEnvironments": "Ortamlarım",
"ResourcePolicy": "Kaynak Politikası"
},
"YouAreOffline": "Şu anda çevrimdışısın",
"YouAreOffline": "Çevrimdışı: Herhangi bir ağa bağlı değil.",
"YouAreOnline": "artık çevrimiçisin",
"NOTFOUND": " <p> Hata! <br/> Sayfa Bulunamadı... </p>",
"DescNOTFOUND": "Üzgünüz, aradığınız sayfa bulunamadı.",
Expand Down
2 changes: 1 addition & 1 deletion resources/i18n/vi.json
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
"MyEnvironments": "Môi trường của tôi",
"ResourcePolicy": "Chính sách tài nguyên"
},
"YouAreOffline": "Bạn hiện đang ngoại tuyến",
"YouAreOffline": "Ngoại tuyến: Không kết nối với bất kỳ mạng nào.",
"YouAreOnline": "Bạn hiện đang trực tuyến",
"NOTFOUND": " <p> Rất tiếc! <br/> Không tìm thấy trang ... </p>",
"DescNOTFOUND": "Xin lỗi, không thể tìm thấy trang bạn đang tìm.",
Expand Down
2 changes: 1 addition & 1 deletion resources/i18n/zh-CN.json
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
"MyEnvironments": "我的环境",
"ResourcePolicy": "资源政策"
},
"YouAreOffline": "您现在离线",
"YouAreOffline": "脱机:未连接任何网络。",
"YouAreOnline": "您现在在线",
"NOTFOUND": " <p> 糟糕! <br/> 页面未找到... </p>",
"DescNOTFOUND": "抱歉,找不到您要找的页面。",
Expand Down
2 changes: 1 addition & 1 deletion resources/i18n/zh-TW.json
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
"MyEnvironments": "我的環境",
"ResourcePolicy": "資源政策"
},
"YouAreOffline": "您現在離線",
"YouAreOffline": "脱机:未连接任何网络。",
"YouAreOnline": "您現在在線",
"NOTFOUND": " <p> 糟糕! <br/> 頁面未找到... </p>",
"DescNOTFOUND": "抱歉,找不到您要找的頁面。",
Expand Down
26 changes: 0 additions & 26 deletions src/backend-ai-app.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@
export const UPDATE_PAGE = 'UPDATE_PAGE';
export const UPDATE_OFFLINE = 'UPDATE_OFFLINE';
export const UPDATE_DRAWER_STATE = 'UPDATE_DRAWER_STATE';
export const OPEN_SNACKBAR = 'OPEN_SNACKBAR';
export const CLOSE_SNACKBAR = 'CLOSE_SNACKBAR';

export const navigate =
(path: any, params: Record<string, unknown> = {}) =>
Expand Down Expand Up @@ -192,30 +190,6 @@ const updatePage = (page, params) => {
};
};

let offlineTimer;

export const showOffline = () => (dispatch) => {
dispatch({
type: OPEN_SNACKBAR,
});
window.clearTimeout(offlineTimer);
offlineTimer = window.setTimeout(
() => dispatch({ type: CLOSE_SNACKBAR }),
3000,
);
};

export const updateOffline = (offline) => (dispatch, getState) => {
// Show the snackbar only if offline status changes.
if (offline !== getState().app.offline) {
dispatch(showOffline());
}
dispatch({
type: UPDATE_OFFLINE,
offline,
});
};

export const updateDrawerState = (opened) => {
return {
type: UPDATE_DRAWER_STATE,
Expand Down
68 changes: 0 additions & 68 deletions src/components/backend-ai-offline-indicator.ts

This file was deleted.

Loading

0 comments on commit db62f9a

Please sign in to comment.