feat: started dasboard page dvt60/dashboards-page

superset-frontend/src/pages/DvtDashboardList/dvtdashboardlist.module.tsx

@@ -0,0 +1,89 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { styled } from '@superset-ui/core';
+
+const StyledDashboardList = styled.div`
+  flex: 1;
+`;
+const StyledDvtSelectButtons = styled.div`
+  display: flex;
+`;
+
+const StyledSelectedItemCount = styled.div`
+  display: flex;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+  align-items: center;
+  color: ${({ theme }) => theme.colors.secondary.dark3};
+`;
+
+const StyledSelectedItem = styled.div`
+  display: flex;
+  gap: 45px;
+  padding: 35px;
+`;
+const StyledDashboardButtons = styled.div`
+  display: flex;
+  gap: 16px;
+  flex-direction: row;
+  justify-content: flex-end;
+`;
+const StyledDashboardListButtons = styled.div`
+  display: flex;
+  border-radius: 12px;
+  height: 56px;
+  align-items: center;
+  flex-direction: row;
+  justify-content: space-between;
+  background-color: ${({ theme }) => theme.colors.grayscale.light5};
+`;
+const StyledDashboardTable = styled.div``;
+
+const StyledDashboardPagination = styled.div`
+  display: flex;
+  justify-content: flex-end;
+`;
+
+const StyledDashboardCreateDashboard = styled.div`
+  display: flex;
+  justify-content: flex-start;
+`;
+
+const StyledDashboardBottom = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+export {
+  StyledDashboardList,
+  StyledDvtSelectButtons,
+  StyledSelectedItemCount,
+  StyledDashboardButtons,
+  StyledSelectedItem,
+  StyledDashboardListButtons,
+  StyledDashboardTable,
+  StyledDashboardPagination,
+  StyledDashboardCreateDashboard,
+  StyledDashboardBottom,
+};

superset-frontend/src/pages/DvtDashboardList/index.tsx

@@ -0,0 +1,201 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useEffect, useState } from 'react';
+import { useHistory } from 'react-router-dom';
+import DvtButton from 'src/components/DvtButton';
+import DvtPagination from 'src/components/DvtPagination';
+import DvtTable from 'src/components/DvtTable';
+import withToasts from 'src/components/MessageToasts/withToasts';
+import {
+  StyledDashboardBottom,
+  StyledDashboardButtons,
+  StyledDashboardCreateDashboard,
+  StyledDashboardList,
+  StyledDashboardListButtons,
+  StyledDashboardPagination,
+  StyledDashboardTable,
+  StyledDvtSelectButtons,
+  StyledSelectedItem,
+  StyledSelectedItemCount,
+} from './dvtdashboardlist.module';
+
+const headerData = [
+  { id: 1, title: 'Title', field: 'dashboard_title', flex: 3, checkbox: true },
+  { id: 2, title: 'Modified By', field: 'changed_by_name' },
+  { id: 3, title: 'Status', field: 'status' },
+  { id: 4, title: 'Modified', field: 'created_on_delta_humanized' },
+  { id: 5, title: 'Created By', field: 'createdbyName' },
+  { id: 6, title: 'Owners', field: 'owners' },
+  {
+    id: 7,
+    title: 'Action',
+    clicks: [
+      {
+        icon: 'edit_alt',
+        click: () => {},
+        popperLabel: 'Edit',
+      },
+      {
+        icon: 'share',
+        click: () => {},
+        popperLabel: 'Export',
+      },
+      {
+        icon: 'trash',
+        click: () => {},
+        popperLabel: 'Delete',
+      },
+    ],
+  },
+];
+
+function DvtDashboardList() {
+  const [selectedRows, setSelectedRows] = useState<any[]>([]);
+  const [currentPage, setCurrentPage] = useState<number>(1);
+  const [selectedItemCount, setSelectedItemCount] = useState<number>(0);
+  const [data, setData] = useState([]);
+  const [count, setCount] = useState<number>(0);
+
+  const history = useHistory<{ from: string }>();
+
+  useEffect(() => {
+    const apiUrl = `/api/v1/dashboard/?q=(order_column:changed_on_delta_humanized,order_direction:desc,page:${
+      currentPage - 1
+    },page_size:10)`;
+
+    const fetchApi = async () => {
+      try {
+        const response = await fetch(apiUrl);
+        const data = await response.json();
+        setData(
+          data.result.map((item: any) => ({
+            id: item.id,
+            dashboard_title: item.dashboard_title,
+            changed_by_name: item.changed_by_name,
+            status: item.status,
+            created_on_delta_humanized: item.created_on_delta_humanized,
+            owners: item.owners.length
+              ? item.owners
+                  .map(
+                    (item: { first_name: string; last_name: string }) =>
+                      `${item.first_name} ${item.last_name}`,
+                  )
+                  .join(',')
+              : '',
+            createdbyName: item.changed_by
+              ? `${item.changed_by.first_name} ${item.changed_by.last_name}`
+              : '',
+          })),
+        );
+        setCount(data.count);
+      } catch (error) {
+        console.log('Error:', error);
+      }
+    };
+    fetchApi();
+    setSelectedRows([]);
+    setSelectedItemCount(0);
+  }, [currentPage]);
+
+  useEffect(() => {
+    setSelectedItemCount(selectedRows.length);
+  }, [selectedRows]);
+
+  const handleDeselectAll = () => {
+    setSelectedRows([]);
+    setSelectedItemCount(0);
+  };
+
+  const handleCreateDashboard = () => {
+    history.push('/superset/dashboard');
+  };
+
+  return (
+    <StyledDashboardList>
+      <StyledDashboardListButtons>
+        <StyledDvtSelectButtons>
+          <StyledSelectedItem>
+            <StyledSelectedItemCount>
+              <span>{`${selectedItemCount} Selected`}</span>
+            </StyledSelectedItemCount>
+            <DvtButton
+              label="Deselect All"
+              bold
+              colour="primary"
+              typeColour="outline"
+              size="medium"
+              onClick={handleDeselectAll}
+            />
+          </StyledSelectedItem>
+        </StyledDvtSelectButtons>
+        <StyledDashboardButtons>
+          <DvtButton
+            label="Delete"
+            icon="dvt-delete"
+            iconToRight
+            colour="error"
+            size="small"
+            onClick={() => {}}
+          />
+          <DvtButton
+            label="Export"
+            icon="dvt-export"
+            iconToRight
+            colour="primary"
+            bold
+            typeColour="powder"
+            size="small"
+            onClick={() => {}}
+          />
+        </StyledDashboardButtons>
+      </StyledDashboardListButtons>
+      <StyledDashboardTable>
+        <DvtTable
+          data={data}
+          header={headerData}
+          selected={selectedRows}
+          setSelected={setSelectedRows}
+          checkboxActiveField="id"
+        />
+      </StyledDashboardTable>
+      <StyledDashboardBottom>
+        <StyledDashboardCreateDashboard>
+          <DvtButton
+            label="Create a New Dashboard"
+            colour="grayscale"
+            bold
+            typeColour="basic"
+            onClick={handleCreateDashboard}
+          />
+        </StyledDashboardCreateDashboard>
+        <StyledDashboardPagination>
+          <DvtPagination
+            page={currentPage}
+            setPage={setCurrentPage}
+            itemSize={count}
+            pageItemSize={10}
+          />
+        </StyledDashboardPagination>
+      </StyledDashboardBottom>
+    </StyledDashboardList>
+  );
+}
+
+export default withToasts(DvtDashboardList);

superset-frontend/src/views/dvt-routes.tsx

@@ -61,7 +61,9 @@ const CssTemplateList = lazy(
 
 const DashboardList = lazy(
   () =>
-    import(/* webpackChunkName: "DashboardList" */ 'src/pages/DashboardList'),
+    import(
+      /* webpackChunkName: "DashboardList" */ 'src/pages/DvtDashboardList'
+    ),
 );
 
 const Dashboard = lazy(