removed add dashbaord from shared dashboards. added a message when no dashboards have been shared.

1 files changed, 64 insertions, 58 deletions

diff --git a/src/client/views/DashboardView.tsx b/src/client/views/DashboardView.tsx
index 5d7fc8835..4387c6e96 100644
--- a/src/client/views/DashboardView.tsx
+++ b/src/client/views/DashboardView.tsx
@@ -172,68 +172,74 @@ export class DashboardView extends React.Component {
                             onClick={() => this.selectDashboardGroup(DashboardGroup.SharedDashboards)}
                             fillWidth
                         />
+                        {}
                         <Button icon={<FaPlus />} color={variant} iconPlacement="left" text="New Dashboard" type={Type.TERT} onClick={() => this.setNewDashboardName('')} />
                     </div>
                     <div className="all-dashboards">
-                        {this.getDashboards(this.selectedDashboardGroup).map(dashboard => {
-                            const href = ImageCast(dashboard.thumb)?.url?.href;
-                            const shared = Object.keys(dashboard[DocAcl])
-                                .filter(key => key !== `acl-${Doc.CurrentUserEmailNormalized}` && !['acl-Me', 'acl-Guest'].includes(key))
-                                .some(key => dashboard[DocAcl][key] !== AclPrivate);
-                            return (
-                                <div
-                                    className="dashboard-container"
-                                    key={dashboard[Id]}
-                                    style={{ background: this.isUnviewedSharedDashboard(dashboard) && this.selectedDashboardGroup === DashboardGroup.SharedDashboards ? '#6CB982' : shared ? variant : '' }}
-                                    onContextMenu={e => this.onContextMenu(dashboard, e)}
-                                    onClick={e => this.clickDashboard(e, dashboard)}>
-                                    <img
-                                        src={
-                                            href ?? 'https://media.istockphoto.com/photos/hot-air-balloons-flying-over-the-botan-canyon-in-turkey-picture-id1297349747?b=1&k=20&m=1297349747&s=170667a&w=0&h=oH31fJty_4xWl_JQ4OIQWZKP8C6ji9Mz7L4XmEnbqRU='
-                                        }
-                                    />
-                                    <div className="info">
-                                        <EditableText type={Type.PRIM} color={color} val={StrCast(dashboard.title)} setVal={val => (Doc.GetProto(dashboard).title = val)} />
-                                        {this.selectedDashboardGroup === DashboardGroup.SharedDashboards && this.isUnviewedSharedDashboard(dashboard) ? <div>unviewed</div> : <div></div>}
-                                        <div
-                                            className="more"
-                                            onPointerDown={e => {
-                                                this._downX = e.clientX;
-                                                this._downY = e.clientY;
-                                            }}
-                                            onClick={e => {
-                                                e.preventDefault();
-                                                e.stopPropagation();
-                                                this.onContextMenu(dashboard, e);
-                                            }}>
-                                            <Button size={Size.SMALL} color={color} icon={<FontAwesomeIcon color={color} icon="bars" />} />
-                                        </div>
-                                    </div>
-                                    <div
-                                        className={`background`}
-                                        style={{
-                                            background: StrCast(Doc.UserDoc().userColor),
-                                            filter: 'opacity(0.2)',
-                                        }}
-                                    />
-                                    <div className={'dashboard-status' + (shared ? '-shared' : '')}>{shared ? 'shared' : ''}</div>
-                                </div>
-                            );
-                        })}
-                        <div
-                            className="dashboard-container-new"
-                            onClick={() => {
-                                this.setNewDashboardName('');
-                            }}>
-                            +
+                        {this.selectedDashboardGroup === DashboardGroup.SharedDashboards && !this.getDashboards(this.selectedDashboardGroup).length
+                            ? 'No one has shared a dashboard with you'
+                            : this.getDashboards(this.selectedDashboardGroup).map(dashboard => {
+                                  const href = ImageCast(dashboard.thumb)?.url?.href;
+                                  const shared = Object.keys(dashboard[DocAcl])
+                                      .filter(key => key !== `acl-${Doc.CurrentUserEmailNormalized}` && !['acl-Me', 'acl-Guest'].includes(key))
+                                      .some(key => dashboard[DocAcl][key] !== AclPrivate);
+                                  return (
+                                      <div
+                                          className="dashboard-container"
+                                          key={dashboard[Id]}
+                                          style={{ background: this.isUnviewedSharedDashboard(dashboard) && this.selectedDashboardGroup === DashboardGroup.SharedDashboards ? '#6CB982' : shared ? variant : '' }}
+                                          onContextMenu={e => this.onContextMenu(dashboard, e)}
+                                          onClick={e => this.clickDashboard(e, dashboard)}>
+                                          <img
+                                              src={
+                                                  href ??
+                                                  'https://media.istockphoto.com/photos/hot-air-balloons-flying-over-the-botan-canyon-in-turkey-picture-id1297349747?b=1&k=20&m=1297349747&s=170667a&w=0&h=oH31fJty_4xWl_JQ4OIQWZKP8C6ji9Mz7L4XmEnbqRU='
+                                              }
+                                          />
+                                          <div className="info">
+                                              <EditableText type={Type.PRIM} color={color} val={StrCast(dashboard.title)} setVal={val => (Doc.GetProto(dashboard).title = val)} />
+                                              {this.selectedDashboardGroup === DashboardGroup.SharedDashboards && this.isUnviewedSharedDashboard(dashboard) ? <div>unviewed</div> : <div></div>}
+                                              <div
+                                                  className="more"
+                                                  onPointerDown={e => {
+                                                      this._downX = e.clientX;
+                                                      this._downY = e.clientY;
+                                                  }}
+                                                  onClick={e => {
+                                                      e.preventDefault();
+                                                      e.stopPropagation();
+                                                      this.onContextMenu(dashboard, e);
+                                                  }}>
+                                                  <Button size={Size.SMALL} color={color} icon={<FontAwesomeIcon color={color} icon="bars" />} />
+                                              </div>
+                                          </div>
+                                          <div
+                                              className={`background`}
+                                              style={{
+                                                  background: StrCast(Doc.UserDoc().userColor),
+                                                  filter: 'opacity(0.2)',
+                                              }}
+                                          />
+                                          <div className={'dashboard-status' + (shared ? '-shared' : '')}>{shared ? 'shared' : ''}</div>
+                                      </div>
+                                  );
+                              })}
+                        {this.selectedDashboardGroup === DashboardGroup.SharedDashboards ? null : (
                             <div
-                                className={`background`}
-                                style={{
-                                    background: StrCast(Doc.UserDoc().userColor),
-                                    filter: 'opacity(0.2)',
-                                }}
-                            />
-                        </div>
+                                className="dashboard-container-new"
+                                onClick={() => {
+                                    this.setNewDashboardName('');
+                                }}>
+                                +
+                                <div
+                                    className={`background`}
+                                    style={{
+                                        background: StrCast(Doc.UserDoc().userColor),
+                                        filter: 'opacity(0.2)',
+                                    }}
+                                />
+                            </div>
+                        )}
                     </div>
                 </div>
                 <MainViewModal