Open link in new tab and added cell url (#782)

front/src/modules/companies/table/components/EditableCompanyDomainNameCell.tsx

@@ -2,10 +2,11 @@ import { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { companyDomainNameFamilyState } from '@/companies/states/companyDomainNameFamilyState';
-import { EditableCellText } from '@/ui/table/editable-cell/types/EditableCellText';
 import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
 import { useUpdateOneCompanyMutation } from '~/generated/graphql';
 
+import { EditableCellURL } from '../../../ui/table/editable-cell/types/EditableCellURL';
+
 export function EditableCompanyDomainNameCell() {
   const currentRowEntityId = useCurrentRowEntityId();
 
@@ -20,8 +21,8 @@ export function EditableCompanyDomainNameCell() {
   }, [name]);
 
   return (
-    <EditableCellText
-      value={internalValue}
+    <EditableCellURL
+      url={internalValue}
       onChange={setInternalValue}
       onSubmit={() =>
         updateCompany({

front/src/modules/ui/link/components/RawLink.tsx

@@ -20,7 +20,7 @@ const StyledClickable = styled.div`
 export function RawLink({ className, href, children, onClick }: OwnProps) {
   return (
     <StyledClickable className={className}>
-      <ReactLink onClick={onClick} to={href}>
+      <ReactLink target="_blank" onClick={onClick} to={href}>
         {children}
       </ReactLink>
     </StyledClickable>

front/src/modules/ui/table/editable-cell/types/EditableCellURL.tsx

@@ -0,0 +1,64 @@
+import { ChangeEvent, useEffect, useState } from 'react';
+
+import { InplaceInputTextEditMode } from '@/ui/inplace-input/components/InplaceInputTextEditMode';
+
+import { RawLink } from '../../../link/components/RawLink';
+import { CellSkeleton } from '../components/CellSkeleton';
+import { EditableCell } from '../components/EditableCell';
+
+type OwnProps = {
+  placeholder?: string;
+  url: string;
+  onChange: (newURL: string) => void;
+  editModeHorizontalAlign?: 'left' | 'right';
+  loading?: boolean;
+  onSubmit?: () => void;
+  onCancel?: () => void;
+};
+
+export function EditableCellURL({
+  url,
+  placeholder,
+  onChange,
+  editModeHorizontalAlign,
+  loading,
+  onCancel,
+  onSubmit,
+}: OwnProps) {
+  const [internalValue, setInternalValue] = useState(url);
+
+  useEffect(() => {
+    setInternalValue(url);
+  }, [url]);
+
+  return (
+    <EditableCell
+      editModeHorizontalAlign={editModeHorizontalAlign}
+      editModeContent={
+        <InplaceInputTextEditMode
+          placeholder={placeholder || ''}
+          autoFocus
+          value={internalValue}
+          onChange={(event: ChangeEvent<HTMLInputElement>) => {
+            setInternalValue(event.target.value);
+            onChange(event.target.value);
+          }}
+        />
+      }
+      onSubmit={onSubmit}
+      onCancel={onCancel}
+      nonEditModeContent={
+        loading ? (
+          <CellSkeleton />
+        ) : (
+          <RawLink
+            onClick={(e) => e.stopPropagation()}
+            href={internalValue ? 'https://' + internalValue : ''}
+          >
+            {internalValue}
+          </RawLink>
+        )
+      }
+    ></EditableCell>
+  );
+}