🛠 Fix tailwind UI and more (linagora#2337)

* Fix linagora#2332

* Fix bad file format in response and fix linagora#2329

* Make sure badly formatted files are not returned

* Go back to css

.gitignore

@@ -143,4 +143,5 @@ userreport.sh
 
 private
 
-log-workforce.sh
+log-workforce.sh
+.dccache

twake/.gitignore

@@ -3,6 +3,8 @@
 # Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
 
 *.DS_Store
+*.dccache
+.dccache
 
 # User-specific stuff:
 .idea/**/workspace.xml

twake/backend/node/src/services/messages/entities/message-files.ts

@@ -49,7 +49,6 @@ export type MessageFileMetadata = {
   mime?: string; //Original file mime
   size?: number; //Original file weight
   thumbnails?: Thumbnail[]; //Url to thumbnail (or set it to undefined if no relevant)
-  type?: string;
 };
 
 export type MessageFilePrimaryKey = Pick<MessageFile, "message_id" | "id">;

twake/backend/node/src/services/messages/services/messages.ts

@@ -28,7 +28,7 @@ import {
   ReactionOperation,
   ThreadExecutionContext,
 } from "../types";
-import _, { first } from "lodash";
+import _, { first, pick } from "lodash";
 import { getThreadMessagePath, getThreadMessageWebsocketRoom } from "../web/realtime";
 import { ThreadMessagesOperationsService } from "./messages-operations";
 import { Thread, ThreadPrimaryKey } from "../entities/threads";
@@ -752,11 +752,19 @@ export class ThreadMessagesService implements MessageThreadMessagesServiceAPI {
           company: { id: file.metadata.external_id?.company_id as string },
         });
         if (original) {
-          file.metadata = { ...file.metadata, ...original.metadata };
-          file.metadata.thumbnails = (file.metadata.thumbnails || []).map((t, index) => {
-            t.url = gr.services.files.getThumbnailRoute(original, (t.index || index).toString());
-            return t;
-          });
+          file.metadata = {
+            ...file.metadata,
+            ..._.pick(original.metadata, "mime", "name"),
+            ..._.pick(original.upload_data, "size"),
+            source: "internal",
+            external_id: file.metadata.external_id,
+          };
+          file.metadata.thumbnails = (file.metadata.thumbnails || original.thumbnails || []).map(
+            (t, index) => {
+              t.url = gr.services.files.getThumbnailRoute(original, (t.index || index).toString());
+              return t;
+            },
+          );
         }
       }
 

twake/backend/node/src/services/messages/web/controllers/views/recent-files.ts

@@ -26,7 +26,7 @@ export default async (
   );
 
   return {
-    resources: userFiles.getEntities().filter(a => a) as FileSearchResult[],
+    resources: userFiles.getEntities().filter(a => a?.metadata?.external_id) as FileSearchResult[],
     next_page_token: userFiles?.nextPage?.page_token,
   };
 };

twake/backend/node/src/services/messages/web/controllers/views/search-files.ts

@@ -40,7 +40,7 @@ export default async (
   }>,
   context: ChannelViewExecutionContext,
 ): Promise<ResourceListResponse<MessageFile>> => {
-  if (isEmpty(request)) {
+  if (isEmpty(request.query)) {
     return recentFiles(request);
   }
 
@@ -119,7 +119,9 @@ export default async (
     }
   }
 
-  messageFiles = messageFiles.filter(mf => mf.message.subtype !== "deleted");
+  messageFiles = messageFiles
+    .filter(mf => mf.message.subtype !== "deleted")
+    .filter(a => a?.metadata?.external_id);
 
   return {
     resources: messageFiles,

twake/frontend/public/styles/tailwind.css

@@ -2118,6 +2118,16 @@ select {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 
+input.ant-input {
+  background-color: transparent;
+}
+
+[type='text'], [type='email'], [type='url'], [type='password'], [type='number'], [type='date'], [type='datetime-local'], [type='month'], [type='search'], [type='tel'], [type='time'], [type='week'], [multiple], textarea, select {
+  &, &:hover {
+    border-color: var(--grey-light);
+  }
+}
+
 .focus-within\:z-10:focus-within {
   z-index: 10;
 }

twake/frontend/src/app/app.tsx

@@ -12,8 +12,8 @@ import InitService from './features/global/services/init-service';
 import useTimeout from 'app/features/global/hooks/use-timeout';
 import ApplicationLoader from './components/loader/application-loader';
 
-import 'app/styles/index.less';
 import DebugState from './components/debug/debug-state';
+import 'app/styles/index.less';
 
 const delayMessage = 5000;
 

twake/frontend/src/app/atoms/button/button.tsx

@@ -28,7 +28,7 @@ export const Button = (props: ButtonProps) => {
     <button
       type="button"
       className={
-        'inline-flex items-center px-4 py-2 border text-sm font-medium rounded-md focus:outline-none ' +
+        ' inline-flex items-center px-4 py-2 border text-sm font-medium rounded-md focus:outline-none ' +
         colors +
         ' ' +
         props.className

twake/frontend/src/app/components/banner/banner.scss

@@ -1,3 +1,5 @@
+
+
 .ant-layout-header.banner-container {
   padding: 0 16px;
 

twake/frontend/src/app/components/buttons/button.js

@@ -26,7 +26,7 @@ export default class Button extends React.Component {
       <button
         ref={this.props.refButton}
         {...this.props}
-        className={'button ' + className}
+        className={'button no-tw ' + className}
         onClick={evt => {
           evt.target.blur();
           this.props.onClick && this.props.onClick(evt);

twake/frontend/src/app/components/buttons/buttons.scss

@@ -38,8 +38,8 @@
   }
 }
 
-.button {
-  background: var(--primary);
+.button, .button.no-tw {
+  background-color: var(--primary);
   color: var(--white);
   font-weight: 500;
   border: 0px;
@@ -49,17 +49,17 @@
   cursor: pointer;
 
   &:hover {
-    background: var(--primary-hover);
+    background-color: var(--primary-hover);
   }
   &:active {
-    background: var(--primary);
+    background-color: var(--primary);
   }
   &:focus {
     outline: none;
   }
   &.disabled,
   &:disabled {
-    background: var(--primary-background);
+    background-color: var(--primary-background);
     pointer-events: none;
   }
 
@@ -117,7 +117,7 @@
   }
 
   &.secondary-light {
-    background: var(--grey-light);
+    background-color: var(--grey-light);
     color: var(--black);
 
     &:hover,
@@ -126,7 +126,7 @@
     }
     &.disabled,
     &:disabled {
-      background: var(--grey-background);
+      background-color: var(--grey-background);
       color: var(--grey-dark);
     }
   }
@@ -148,10 +148,10 @@
     }
     &:hover {
       color: var(--primary-hover);
-      //      background: var(--primary-background);
+      //      background-color: var(--primary-background);
     }
     &:active {
-      //      background: var(--primary-background);
+      //      background-color: var(--primary-background);
     }
   }
 
@@ -172,7 +172,7 @@
     }
     &:hover {
       color: var(--black);
-      //background: var(--grey-background);
+      //background-color: var(--grey-background);
     }
     &:active {
       color: var(--black);

twake/frontend/src/app/features/files/api/file-upload-api-client.ts

@@ -1,5 +1,5 @@
 import Api from 'app/features/global/framework/api-service';
-import { FileType, MetaDataType } from 'app/features/files/types/file';
+import { FileType } from 'app/features/files/types/file';
 import { MessageFileType } from 'app/features/messages/types/message';
 import extensionToMime from '../utils/extension-to-mime';
 import { fileTypeMimes } from '../utils/type-mimes';

twake/frontend/src/app/features/files/types/file.ts

@@ -8,10 +8,6 @@ export type MetaDataType = {
   name: string;
   mime: string;
   thumbnails_status?: string;
-  external_id?: {
-    id: string;
-    company_id: string;
-  };
 };
 
 export type FileUploadDataObjectType = {

twake/frontend/src/app/styles/themes/antd-theme.less

@@ -50,9 +50,13 @@
   font-size: 17px;
 }
 
+button.ant-btn-primary {
+  background-color: @primary;
+}
+
 .ant-btn-primary:hover,
 .ant-btn-primary:focus {
-  background: @primary-hover;
+  background-color: @primary-hover;
 }
 
 .ant-btn-ghost,
@@ -153,11 +157,11 @@ textarea.ant-input,
 }
 
 // --- antd-layout-header --- //
-@layout-header-background: @white;
+@layout-header-background-color: @white;
 
 // --- ant-layout-sider ---//
-@layout-body-background: @white;
-@layout-sider-background: @secondary;
+@layout-body-background-color: @white;
+@layout-sider-background-color: @secondary;
 @layout-sider-background-light: @grey-background;
 
 .ant-layout-sider-zero-width-trigger {
@@ -196,7 +200,7 @@ textarea.ant-input,
 }
 
 // --- ant-select --- //
-@select-background: @grey-background;
+@select-background-color: @grey-background;
 @select-border-color: @grey-background;
 @select-dropdown-bg: @white;
 @select-item-active-bg: @primary-background;

twake/frontend/src/app/views/applications/messages/message/parts/ReplyBlock.tsx

@@ -49,7 +49,8 @@ export default (props: Props) => {
             })
           }
         >
-          <CornerDownRight size={14} /> {Languages.t('scenes.apps.messages.message.reply_button')}
+          <CornerDownRight size={14} className="inline" />{' '}
+          {Languages.t('scenes.apps.messages.message.reply_button')}
         </span>
       </div>
     </ThreadSection>

twake/frontend/src/app/views/client/main-view/MainView.scss

@@ -25,6 +25,7 @@
   .global-view-header {
     padding: 8px 0;
     height: 56px;
+    background-color: #FFF;
 
     .ant-divider {
       margin: 0;
@@ -83,6 +84,7 @@
     display: flex;
 
     .main-view-tabs-header {
+      background-color: #FFF;
       height: 47px;
       margin-top: -8px;
       padding: 0 8px;

twake/frontend/src/app/views/client/workspaces-bar/components/CompanySelector/index.tsx

@@ -65,7 +65,7 @@ export default ({
       ]}
       position="top"
     >
-      {!children && <CurrentCompanyLogo withCompanyName={withCompanyName} />}
+      {!children && <CurrentCompanyLogo showBadge withCompanyName={withCompanyName} />}
       {!!children && children}
     </Menu>
   );
@@ -74,9 +74,11 @@ export default ({
 export const CurrentCompanyLogo = ({
   size,
   withCompanyName = true,
+  showBadge = false,
 }: {
   size?: number;
   withCompanyName?: boolean;
+  showBadge?: boolean;
 }) => {
   const { company } = useCurrentCompany();
   const { badges } = useOtherCompanyNotifications(company?.id || '');
@@ -87,7 +89,7 @@ export const CurrentCompanyLogo = ({
 
   return (
     <div className={classNames('company-selector-container')}>
-      {badges.length > 0 && <div className="notification_dot" />}
+      {showBadge && badges.length > 0 && <div className="notification_dot" />}
 
       <div
         className={classNames('image', {

twake/frontend/src/app/views/join/styles.scss

@@ -9,6 +9,6 @@
 
   .ant-btn-primary.gray-btn {
     border-color: var(--grey-dark);
-    background: var(--grey-dark);
+    background-color: var(--grey-dark);
   }
 }

twake/frontend/src/tailwind.css

@@ -1,3 +1,15 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+input.ant-input {
+    background-color: transparent;
+}
+
+[type='text'], [type='email'], [type='url'], [type='password'], [type='number'], [type='date'], [type='datetime-local'], [type='month'], [type='search'], [type='tel'], [type='time'], [type='week'], [multiple], textarea, select {
+    border-color: var(--grey-light);
+}
+
+[type='text']:hover, [type='email']:hover, [type='url']:hover, [type='password']:hover, [type='number']:hover, [type='date']:hover, [type='datetime-local']:hover, [type='month']:hover, [type='search']:hover, [type='tel']:hover, [type='time']:hover, [type='week']:hover, [multiple]:hover, textarea:hover, select:hover {
+    border-color: var(--grey-light);
+}