[MI-1987]: Integrated project list UI

webapp/src/components/buttons/iconButton/index.tsx

@@ -20,7 +20,8 @@ const IconButton = ({tooltipText, iconClassName, extraClass = '', iconColor, onC
         <Tooltip tooltipContent={tooltipText}>
             <Button
                 variant='outline-danger'
-                className={`button-wrapper  ${extraClass} ${iconColor === 'danger' && 'danger'}`}
+                className={`plugin-btn button-wrapper btn-icon ${extraClass}`}
+                onClick={onClick}
             >
                 <i
                     className={iconClassName}

webapp/src/components/card/project/index.tsx

@@ -5,37 +5,37 @@ import IconButton from 'components/buttons/iconButton';
 
 import {onPressingEnterKey} from 'utils';
 
-import './styles.scss';
-
 type ProjectCardProps = {
-    onProjectTitleClick: (projectDetails: ProjectDetails) => void;
+    onProjectTitleClick: (projectDetails: ProjectDetails) => void
+    handleUnlinkProject: () => void
     projectDetails: ProjectDetails
 }
 
-const ProjectCard = ({onProjectTitleClick, projectDetails: {organization, title}, projectDetails}: ProjectCardProps) => {
+const ProjectCard = ({onProjectTitleClick, projectDetails: {organizationName, projectName}, projectDetails, handleUnlinkProject}: ProjectCardProps) => {
     return (
         <BaseCard>
             <div className='d-flex'>
                 <div className='project-details'>
                     <p className='margin-bottom-10'>
                         <span
-                            aria-label={title}
+                            aria-label={projectName}
                             role='button'
                             tabIndex={0}
                             className='font-size-14 font-bold link-title'
                             onKeyDown={() => onPressingEnterKey(event, () => onProjectTitleClick(projectDetails))}
                             onClick={() => onProjectTitleClick(projectDetails)}
                         >
-                            {title}
+                            {projectName}
                         </span>
                     </p>
-                    <p className='font-size-14'>{organization}</p>
+                    <p className='font-size-14'>{organizationName}</p>
                 </div>
                 <div className='button-wrapper'>
                     <IconButton
                         tooltipText='Unlink project'
                         iconClassName='fa fa-chain-broken'
-                        extraClass='project-details-unlink-button unlink-button'
+                        extraClass='unlink-button'
+                        onClick={handleUnlinkProject}
                     />
                 </div>
             </div>

webapp/src/components/card/subscription/styles.scss

@@ -1,11 +1,3 @@
-.project-details {
-    flex-basis: 70%;
-}
-
-.button-wrapper {
-    flex-basis: 30%;
-}
-
 .delete-button {
     display: block;
     margin-left: auto;

webapp/src/components/emptyState/index.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+
+import './styles.scss';
+
+type EmptyStatePropTypes = {
+    title: string,
+    subTitle?: {
+        text: string
+        slashCommand?: string
+    },
+    buttonText?: string,
+    buttonAction?: (event: React.SyntheticEvent) => void;
+}
+
+const EmptyState = ({title, subTitle, buttonText, buttonAction}: EmptyStatePropTypes) => {
+    return (
+        <div className='no-data d-flex'>
+            <div className='d-flex flex-column align-items-center'>
+                <div className='no-data__icon d-flex justify-content-center align-items-center'>
+                    <svg
+                        width='32px'
+                        height='32px'
+                        viewBox='0 0 32 32'
+                    >
+                        <path d='M0 11.865l2.995-3.953 11.208-4.557v-3.292l9.828 7.188-20.078 3.896v10.969l-3.953-1.141zM32 5.932v19.536l-7.672 6.531-12.401-4.073v4.073l-7.974-9.885 20.078 2.396v-17.26z'/>
+                    </svg>
+                </div>
+                <p className='no-data__title'>{title}</p>
+                {subTitle && (
+                    <>
+                        <p className='no-data__subtitle'>{subTitle.text}</p>
+                        {
+                            subTitle.slashCommand && <p className='slash-command'>{subTitle.slashCommand}</p>
+                        }
+
+                    </>
+                )}
+                {
+                    buttonText && buttonAction && (
+                        <button
+                            onClick={buttonAction}
+                            className='plugin-btn no-data__btn btn btn-primary'
+                        >
+                            {buttonText}
+                        </button>
+                    )
+                }
+            </div>
+        </div>
+    );
+};
+
+export default EmptyState;

webapp/src/containers/Rhs/tabs/no_data/styles.scss → webapp/src/components/emptyState/styles.scss

@@ -1,11 +1,12 @@
 .no-data {
-  text-align: center;
   height: 100%;
-  min-height: 350px;
+  justify-content: center;
+  margin-top: 80px;
+  text-align: center;
 
   &__icon {
-    width: 120px;
-    height: 120px;
+    width: 100px;
+    height: 100px;
     background: rgba(var(--center-channel-color-rgb), 0.04);
     border-radius: 100%;
     margin-bottom: 24px;
@@ -24,4 +25,14 @@
   &__btn {
     margin-top: 24px;
   }
+
+  svg {
+    fill: rgba(var(--center-channel-color-rgb), 0.5);
+  }
+}
+
+.slash-command {
+  padding: 10px 15px;
+  border-radius: 4px;
+  border: 1px solid rgba(var(--center-channel-color-rgb), 0.08);
 }

webapp/src/components/labelValuePair/index.tsx

@@ -10,7 +10,7 @@ type LabelValuePairProps = {
 const LabelValuePair = ({label, value}: LabelValuePairProps) => {
     return (
         <p className='margin-bottom-10'>
-            <strong>{label}{': '}</strong>
+            <strong>{`${label}: `}</strong>
             <span className='value'>{value}</span>
         </p>
     );

webapp/src/components/modal/confirmationModal/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import Modal from 'components/modal';
+
+type ConfirmationModalProps = {
+    isOpen: boolean
+    title: string
+    description: string
+    confirmBtnText: string
+    onHide: () => void
+    onConfirm?: () => void
+}
+
+const ConfirmationModal = ({isOpen, title, confirmBtnText, description, onHide, onConfirm}: ConfirmationModalProps) => {
+    return (
+        <Modal
+            show={isOpen}
+            title={title}
+            onHide={onHide}
+            onConfirm={onConfirm}
+            confirmAction={true}
+            confirmBtnText={confirmBtnText}
+        >
+            <p>{description}</p>
+        </Modal>
+    );
+};
+
+export default ConfirmationModal;

webapp/src/components/modal/index.tsx

@@ -17,14 +17,15 @@ type ModalProps = {
     onConfirm?: () => void;
     confirmBtnText?: string;
     cancelBtnText?: string;
+    confirmAction?: boolean;
     className?: string;
     loading?: boolean;
     error?: string | JSX.Element;
     confirmDisabled?: boolean;
     cancelDisabled?: boolean;
 }
 
-const Modal = ({show, onHide, showCloseIconInHeader = true, children, title, subTitle, onConfirm, confirmBtnText, cancelBtnText, className = '', loading = false, error, confirmDisabled = false, cancelDisabled = false}: ModalProps) => {
+const Modal = ({show, onHide, showCloseIconInHeader = true, children, title, subTitle, onConfirm, confirmAction, confirmBtnText, cancelBtnText, className = '', loading = false, error}: ModalProps) => {
     return (
         <RBModal
             show={show}
@@ -54,8 +55,7 @@ const Modal = ({show, onHide, showCloseIconInHeader = true, children, title, sub
                 onConfirm={onConfirm}
                 cancelBtnText={cancelBtnText}
                 confirmBtnText={confirmBtnText}
-                confirmDisabled={confirmDisabled}
-                cancelDisabled={cancelDisabled}
+                confirmAction={confirmAction}
             />
         </RBModal>
     );

webapp/src/components/modal/subComponents/modalFooter/index.tsx

@@ -11,13 +11,14 @@ type ModalFooterProps = {
     className?: string;
     confirmDisabled?: boolean;
     cancelDisabled?: boolean;
+    confirmAction?: boolean;
 }
 
-const ModalFooter = ({onConfirm, onHide, cancelBtnText, confirmBtnText, className = '', confirmDisabled, cancelDisabled}: ModalFooterProps) : JSX.Element => (
-    <RBModal.Footer className={`modal__footer d-flex flex-column justify-content-center align-items-center ${className}`}>
+const ModalFooter = ({onConfirm, onHide, cancelBtnText, confirmBtnText, className = '', confirmDisabled, cancelDisabled, confirmAction}: ModalFooterProps) : JSX.Element => (
+    <RBModal.Footer className={confirmAction ? 'modal__confirm-action' : `modal__footer d-flex flex-column justify-content-center align-items-center ${className}`}>
         {onConfirm && (
             <button
-                className='btn btn-primary modal__confirm-btn'
+                className={`plugin-btn btn ${confirmAction ? 'btn-danger' : 'btn-primary modal__confirm-btn'}`}
                 onClick={onConfirm}
                 disabled={confirmDisabled}
             >
@@ -26,7 +27,7 @@ const ModalFooter = ({onConfirm, onHide, cancelBtnText, confirmBtnText, classNam
         )}
         {onHide && (
             <button
-                className='btn btn-link modal__cancel-btn'
+                className={`plugin-btn btn btn-link ${!confirmAction && 'modal__cancel-btn'}`}
                 onClick={onHide}
                 disabled={cancelDisabled}
             >

webapp/src/components/modal/subComponents/modalFooter/styles.scss

@@ -13,4 +13,9 @@
     margin: 0 !important;
     padding: 0;
   }
+
+  &__confirm-action {
+    display: flex;
+    flex-direction: row-reverse;
+  }
 }

webapp/src/components/modal/subComponents/modalHeader/index.tsx

@@ -5,7 +5,7 @@ import './styles.scss';
 
 type ModalHeaderProps = {
     title?: string | JSX.Element;
-    onHide: () => void;
+    onHide?: () => void;
     showCloseIconInHeader?: boolean;
 }
 

webapp/src/containers/Rhs/index.tsx

@@ -1,19 +1,23 @@
 import React from 'react';
 
 import usePluginApi from 'hooks/usePluginApi';
-import {getprojectDetailsState} from 'selectors';
+import {getprojectDetailsState, getRhsState} from 'selectors';
 
 import ProjectList from './projectList';
 import ProjectDetails from './projectDetails';
 
 const Rhs = (): JSX.Element => {
     const usePlugin = usePluginApi();
 
+    if (!getRhsState(usePlugin.state).isSidebarOpen) {
+        return <></>;
+    }
+
     return (
-        <div className='height-100vh bg-sidebar padding-25'>
+        <div className='height-rhs bg-sidebar padding-25'>
             {
-                getprojectDetailsState(usePlugin.state).id ?
-                    <ProjectDetails title={getprojectDetailsState(usePlugin.state).title}/> :
+                getprojectDetailsState(usePlugin.state).projectID ?
+                    <ProjectDetails title={getprojectDetailsState(usePlugin.state).projectName}/> :
                     <ProjectList/>
             }
         </div>