Refacto/abstract inplace input (#530)

* Move code to new folder

* Deduplicate code, remove dependancy on table

* Remove more table dependency

* Move close logic to input

* Migrate editable text cell

* Rename EditableTextInput

* Fix component test id

front/src/modules/ui/components/inplace-input/InplaceInputDisplayMode.tsx

@@ -0,0 +1,46 @@
+import styled from '@emotion/styled';
+
+type Props = {
+  softFocus: boolean;
+};
+
+export const InplaceInputNormalModeOuterContainer = styled.div<Props>`
+  align-items: center;
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+
+  padding-left: ${({ theme }) => theme.spacing(2)};
+  padding-right: ${({ theme }) => theme.spacing(1)};
+  width: 100%;
+
+  ${(props) =>
+    props.softFocus
+      ? `background: ${props.theme.background.transparent.secondary};
+         border-radius: ${props.theme.border.radius.md};
+         box-shadow: inset 0 0 0 1px ${props.theme.grayScale.gray30};`
+      : ''}
+`;
+
+export const InplaceInputNormalModeInnerContainer = styled.div`
+  align-items: center;
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+  width: 100%;
+`;
+
+export function InplaceInputDisplayMode({
+  children,
+  hasSoftFocus,
+}: React.PropsWithChildren & {
+  hasSoftFocus: boolean;
+}) {
+  return (
+    <InplaceInputNormalModeOuterContainer softFocus={hasSoftFocus}>
+      <InplaceInputNormalModeInnerContainer>
+        {children}
+      </InplaceInputNormalModeInnerContainer>
+    </InplaceInputNormalModeOuterContainer>
+  );
+}