Fix enable/disable edit mode (#1333)

src/components/Dashboard/Modals/AboutModal/AboutModal.tsx

@@ -210,7 +210,7 @@ const useInformationTableItems = (newVersionAvailable?: string): InformationTabl
 
   let items: InformationTableItem[] = [];
 
-  if (editModeEnabled) {
+  if (!editModeEnabled) {
     items = [
       ...items,
       {

src/components/layout/header/Header.tsx

@@ -42,7 +42,7 @@ export function Header(props: any) {
           noWrap
         >
           <Search />
-          {!editModeEnabled && <ToggleEditModeAction />}
+          {editModeEnabled && <ToggleEditModeAction />}
           <DockerMenuButton />
           <Indicator
             size={15}

src/components/layout/header/SettingsMenu.tsx

@@ -29,7 +29,7 @@ export function SettingsMenu({ newVersionAvailable }: { newVersionAvailable: str
           <ColorSchemeSwitch />
           <EditModeToggle />
           <Menu.Divider />
-          {!editModeEnabled && (
+          {editModeEnabled && (
             <Menu.Item icon={<IconSettings strokeWidth={1.2} size={18} />} onClick={drawer.open}>
               {t('sections.settings')}
             </Menu.Item>

src/components/layout/header/SettingsMenu/EditModeToggle.tsx

@@ -61,7 +61,7 @@ function ModalContent() {
 
 export function EditModeToggle() {
   const { editModeEnabled } = useEditModeInformationStore();
-  const Icon = editModeEnabled ? IconEdit : IconEditOff;
+  const Icon = editModeEnabled ? IconEditOff : IconEdit;
   const { t } = useTranslation('settings/general/edit-mode-toggle');
 
   return (
@@ -77,7 +77,7 @@ export function EditModeToggle() {
         })
       }
     >
-      {editModeEnabled ? t('menu.enable') : t('menu.disable')}
+      {editModeEnabled ? t('menu.disable') : t('menu.enable')}
     </Menu.Item>
   );
 }

src/hooks/useEditModeInformation.ts

@@ -2,10 +2,10 @@ import { create } from 'zustand';
 
 interface EditModeInformationStore {
   editModeEnabled: boolean;
-  setDisabled: () => void;
+  setEnabled: () => void;
 }
 
 export const useEditModeInformationStore = create<EditModeInformationStore>((set) => ({
   editModeEnabled: false,
-  setDisabled: () => set(() => ({ editModeEnabled: true })),
+  setEnabled: () => set(() => ({ editModeEnabled: true })),
 }));

src/modules/Docker/ContainerActionBar.tsx

@@ -36,7 +36,7 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction
   const getLowestWrapper = () =>
     config.wrappers.sort((wrapper1, wrapper2) => wrapper1.position - wrapper2.position)[0];
 
-  if (process.env.DISABLE_EDIT_MODE === 'true') {
+  if (process.env.DISABLE_EDIT_MODE?.toLowerCase() === 'true') {
     return null;
   }
 

src/pages/_app.tsx

@@ -90,13 +90,13 @@ function App(
   });
 
   const { setInitialPackageAttributes } = usePackageAttributesStore();
-  const { setDisabled } = useEditModeInformationStore();
+  const { setEnabled } = useEditModeInformationStore();
 
   useEffect(() => {
     setInitialPackageAttributes(props.pageProps.packageAttributes);
 
-    if (!props.pageProps.editModeEnabled) {
-      setDisabled();
+    if (props.pageProps.editModeEnabled) {
+      setEnabled();
     }
   }, []);
 
@@ -165,8 +165,7 @@ function App(
 }
 
 App.getInitialProps = ({ ctx }: { ctx: GetServerSidePropsContext }) => {
-  const disableEditMode =
-    process.env.DISABLE_EDIT_MODE && process.env.DISABLE_EDIT_MODE.toLowerCase() === 'true';
+  const disableEditMode = process.env.DISABLE_EDIT_MODE?.toLowerCase() === 'true';
   if (disableEditMode) {
     Consola.warn(
       'EXPERIMENTAL: You have disabled the edit mode. Modifications are no longer possible and any requests on the API will be dropped. If you want to disable this, unset the DISABLE_EDIT_MODE environment variable. This behaviour may be removed in future versions of Homarr'

src/pages/api/configs/[slug].ts

@@ -8,7 +8,7 @@ import { BackendConfigType, ConfigType } from '../../../types/config';
 import { IRssWidget } from '../../../widgets/rss/RssWidgetTile';
 
 function Put(req: NextApiRequest, res: NextApiResponse) {
-  if (process.env.DISABLE_EDIT_MODE === 'true') {
+  if (process.env.DISABLE_EDIT_MODE?.toLowerCase() === 'true') {
     return res.status(409).json({ error: 'Edit mode has been disabled by the administrator' });
   }
 

src/pages/api/configs/tryPassword.tsx

@@ -5,7 +5,7 @@ function Post(req: NextApiRequest, res: NextApiResponse) {
   const { tried, type = 'password' } = req.body;
   // If the type of password is "edit", we run this branch to check the edit password
   if (type === 'edit') {
-    if ((tried === process.env.EDIT_MODE_PASSWORD) !== undefined) {
+    if (tried === process.env.EDIT_MODE_PASSWORD) {
       if (process.env.DISABLE_EDIT_MODE?.toLowerCase() === 'true') {
         process.env.DISABLE_EDIT_MODE = 'false';
       } else {

src/server/api/routers/config.ts

@@ -68,6 +68,12 @@ export const configRouter = createTRPCRouter({
       })
     )
     .mutation(async ({ input }) => {
+      if (process.env.DISABLE_EDIT_MODE?.toLowerCase() === 'true') {
+        throw new TRPCError({
+          code: 'METHOD_NOT_SUPPORTED',
+          message: 'Edit is not allowed, because edit mode is disabled'
+        });
+      }
       Consola.info(`Saving updated configuration of '${input.name}' config.`);
 
       const previousConfig = getConfig(input.name);

src/server/api/routers/notebook.ts

@@ -13,7 +13,7 @@ export const notebookRouter = createTRPCRouter({
     .input(z.object({ widgetId: z.string(), content: z.string(), configName: z.string() }))
     .mutation(async ({ input }) => {
       //TODO: #1305 Remove use of DISABLE_EDIT_MODE for auth update
-      if (!process.env.DISABLE_EDIT_MODE) {
+      if (process.env.DISABLE_EDIT_MODE?.toLowerCase() === 'true') {
         throw new TRPCError({
           code: 'METHOD_NOT_SUPPORTED',
           message: 'Edit is not allowed, because edit mode is disabled'