Fix app design 4 (#19803)

## Before <img width="1512" height="584" alt="image" src="https://github.com/user-attachments/assets/2a05d0c7-4bba-438f-9b05-4abd159530ba" /> <img width="1512" height="908" alt="image" src="https://github.com/user-attachments/assets/a36da096-505d-4f25-84bc-a0feca436d53" /> ## After <img width="1503" height="574" alt="image" src="https://github.com/user-attachments/assets/e039b92f-057a-4ed7-869a-a248f446eb2b" /> <img width="1512" height="904" alt="image" src="https://github.com/user-attachments/assets/065767b5-8a70-4ea7-a520-5b2ccbdcffa3" /> --------- Co-authored-by: Copilot Autofix powered by AI <223894421+github-code-quality[bot]@users.noreply.github.com>
2026-04-17 16:52:41 +02:00
parent 3268a86f4b
commit 120ced44a9
19 changed files with 1027 additions and 1124 deletions
@@ -0,0 +1,169 @@
+import { styled } from '@linaria/react';
+import { H3Title, IconCheck, IconPencil, IconX } from 'twenty-ui/display';
+import { Button } from 'twenty-ui/input';
+import { themeCssVariables } from 'twenty-ui/theme-constants';
+import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal';
+import { useLingui } from '@lingui/react/macro';
+import { Section } from 'twenty-ui/layout';
+import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
+import { type Dispatch, type SetStateAction, useState } from 'react';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { useModal } from '@/ui/layout/modal/hooks/useModal';
+import { SettingsSkeletonLoader } from '@/settings/components/SettingsSkeletonLoader';
+
+const RESET_VARIABLE_MODAL_ID =
+  'reset-application-registration-config-variable-modal';
+
+const StyledRow = styled.div`
+  align-items: flex-end;
+  display: flex;
+  gap: ${themeCssVariables.spacing[2]};
+`;
+
+const StyledButtonContainer = styled.div`
+  display: flex;
+  & > :not(:first-of-type) > button {
+    border-left: none;
+  }
+`;
+
+type ConfigVariableEditProps = {
+  title: string;
+  description?: string;
+  input: React.ReactNode;
+  isEditing: boolean;
+  setIsEditing: Dispatch<SetStateAction<boolean>>;
+  isSaveDisabled?: boolean;
+  canOpenCancelModal?: boolean;
+  onSave?: () => Promise<void>;
+  onCancel: () => void;
+  onEdit?: () => void;
+  onConfirmReset?: () => Promise<void>;
+  editDisabled?: boolean;
+  helpContent?: React.ReactNode;
+};
+
+export const ConfigVariableEdit = ({
+  title,
+  description,
+  input,
+  isEditing,
+  setIsEditing,
+  canOpenCancelModal,
+  isSaveDisabled = false,
+  onSave,
+  onCancel,
+  onEdit,
+  onConfirmReset,
+  editDisabled = false,
+  helpContent,
+}: ConfigVariableEditProps) => {
+  const { t } = useLingui();
+
+  const { openModal } = useModal();
+
+  const { enqueueErrorSnackBar, enqueueSuccessSnackBar } = useSnackBar();
+
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleSave = async () => {
+    try {
+      setIsSubmitting(true);
+      await onSave?.();
+      enqueueSuccessSnackBar({
+        message: t`Variable ${title} updated`,
+      });
+    } catch {
+      enqueueErrorSnackBar({
+        message: t`Error updating variable`,
+      });
+    } finally {
+      setIsSubmitting(false);
+      setIsEditing(false);
+    }
+  };
+
+  const handleConfirmReset = async () => {
+    try {
+      setIsSubmitting(true);
+      await onConfirmReset?.();
+      enqueueSuccessSnackBar({
+        message: t`Variable ${title} reset`,
+      });
+    } catch {
+      enqueueErrorSnackBar({
+        message: t`Error resetting variable`,
+      });
+    } finally {
+      setIsSubmitting(false);
+      setIsEditing(false);
+    }
+  };
+
+  const handleCancel = () => {
+    if (canOpenCancelModal) {
+      openModal(RESET_VARIABLE_MODAL_ID);
+      return;
+    }
+
+    onCancel?.();
+
+    setIsEditing(false);
+  };
+
+  const handleEdit = () => {
+    onEdit?.();
+    setIsEditing(true);
+  };
+
+  return (
+    <SettingsPageContainer>
+      <Section>
+        <H3Title title={title} description={description} />
+      </Section>
+
+      <Section>
+        <StyledRow>
+          {input}
+          {!isEditing ? (
+            <Button
+              Icon={IconPencil}
+              variant="primary"
+              onClick={handleEdit}
+              type="button"
+              disabled={editDisabled}
+            />
+          ) : (
+            <StyledButtonContainer>
+              <Button
+                Icon={IconCheck}
+                variant="secondary"
+                position="left"
+                type={'button'}
+                onClick={handleSave}
+                disabled={isSaveDisabled || isSubmitting}
+              />
+              <Button
+                Icon={IconX}
+                variant="secondary"
+                position="right"
+                onClick={handleCancel}
+                type="button"
+                disabled={isSubmitting}
+              />
+            </StyledButtonContainer>
+          )}
+          <ConfirmationModal
+            modalInstanceId={RESET_VARIABLE_MODAL_ID}
+            title={t`Reset variable`}
+            subtitle={t`Are you sure you want to reset this variable?`}
+            onConfirmClick={handleConfirmReset}
+            confirmButtonText={t`Reset`}
+            confirmButtonAccent="danger"
+          />
+        </StyledRow>
+        {helpContent}
+      </Section>
+    </SettingsPageContainer>
+  );
+};