Add endpoint to read firmware capabilities #1218

interface/src/App.tsx

@@ -4,6 +4,7 @@ import { ToastContainer, Slide } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.min.css';
 
 import { localStorageDetector } from 'typesafe-i18n/detectors';
+import { FeaturesLoader } from './contexts/features';
 import type { FC } from 'react';
 import AppRouting from 'AppRouting';
 import CustomTheme from 'CustomTheme';
@@ -26,7 +27,9 @@ const App: FC = () => {
   return (
     <TypesafeI18n locale={detectedLocale}>
       <CustomTheme>
-        <AppRouting />
+        <FeaturesLoader>
+          <AppRouting />
+        </FeaturesLoader>
         <ToastContainer
           position="bottom-left"
           autoClose={3000}

interface/src/contexts/features/FeaturesLoader.tsx

@@ -5,28 +5,19 @@ import type { FC } from 'react';
 
 import type { RequiredChildrenProps } from 'utils';
 import * as FeaturesApi from 'api/features';
-import { ApplicationError, LoadingSpinner } from 'components';
 
 const FeaturesLoader: FC<RequiredChildrenProps> = (props) => {
-  const { data: features, error } = useRequest(FeaturesApi.readFeatures);
+  const { data: features } = useRequest(FeaturesApi.readFeatures);
 
-  if (features) {
-    return (
-      <FeaturesContext.Provider
-        value={{
-          features
-        }}
-      >
-        {props.children}
-      </FeaturesContext.Provider>
-    );
-  }
-
-  if (error) {
-    return <ApplicationError message={error?.message} />;
-  }
-
-  return <LoadingSpinner height="100vh" />;
+  return (
+    <FeaturesContext.Provider
+      value={{
+        features
+      }}
+    >
+      {props.children}
+    </FeaturesContext.Provider>
+  );
 };
 
 export default FeaturesLoader;

interface/src/framework/mqtt/MqttSettingsForm.tsx

@@ -1,7 +1,8 @@
 import CancelIcon from '@mui/icons-material/Cancel';
 import WarningIcon from '@mui/icons-material/Warning';
 import { Button, Checkbox, MenuItem, Grid, Typography, InputAdornment, TextField } from '@mui/material';
-import { useState } from 'react';
+import { useContext, useState } from 'react';
+import { FeaturesContext } from '../../contexts/features';
 import type { ValidateFieldsError } from 'async-validator';
 import type { FC } from 'react';
 
@@ -39,6 +40,7 @@ const MqttSettingsForm: FC = () => {
   });
 
   const { LL } = useI18nContext();
+  const { features } = useContext(FeaturesContext);
 
   const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
 
@@ -169,6 +171,10 @@ const MqttSettingsForm: FC = () => {
             </TextField>
           </Grid>
         </Grid>
+
+        {/* TODO here */}
+        <div>{JSON.stringify(features, null, 2)}</div>
+
         <BlockFormControlLabel
           control={<Checkbox name="clean_session" checked={data.clean_session} onChange={updateFormValue} />}
           label={LL.MQTT_CLEAN_SESSION()}

interface/src/types/features.ts

@@ -1,8 +1,4 @@
 export interface Features {
-  project: boolean;
-  security: boolean;
-  mqtt: boolean;
-  ntp: boolean;
-  ota: boolean;
-  upload_firmware: boolean;
+  version: string;
+  platform: string; // "ESP32-C3" "ESP32-S2" "ESP32-S3" "ESP32"
 }