Extract the JSON visualizer component in twenty-ui (#10937)

- Move the JsonTree component and the other components to twenty-ui
- Rely on a React Context to provide translations

## Future work

It would be good to migrate the `createRequiredContext` function to
`twenty-ui`. I didn't want to migrate it in this PR but would have liked
to use it.

packages/twenty-front/src/modules/settings/admin-panel/health-status/components/JsonDataIndicatorHealthStatus.tsx

@@ -1,8 +1,8 @@
 import { SettingsAdminIndicatorHealthContext } from '@/settings/admin-panel/health-status/contexts/SettingsAdminIndicatorHealthContext';
-import { JsonTree } from '@/workflow/components/json-visualizer/components/JsonTree';
 import styled from '@emotion/styled';
+import { useLingui } from '@lingui/react/macro';
 import { useContext } from 'react';
-import { Section } from 'twenty-ui';
+import { JsonTree, Section } from 'twenty-ui';
 import { AdminPanelHealthServiceStatus } from '~/generated/graphql';
 
 const StyledDetailsContainer = styled.div`
@@ -21,6 +21,8 @@ const StyledErrorMessage = styled.div`
 `;
 
 export const JsonDataIndicatorHealthStatus = () => {
+  const { t } = useLingui();
+
   const { indicatorHealth } = useContext(SettingsAdminIndicatorHealthContext);
 
   const parsedDetails = indicatorHealth.details
@@ -41,7 +43,13 @@ export const JsonDataIndicatorHealthStatus = () => {
       )}
       {parsedDetails && (
         <StyledDetailsContainer>
-          <JsonTree value={parsedDetails} />
+          <JsonTree
+            value={parsedDetails}
+            emptyArrayLabel={t`Empty Array`}
+            emptyObjectLabel={t`Empty Object`}
+            arrowButtonCollapsedLabel={t`Expand`}
+            arrowButtonExpandedLabel={t`Collapse`}
+          />
         </StyledDetailsContainer>
       )}
     </Section>